48 tagged figma to code, measured the same way as everything else here.
Browse within: agentic-workflow 33figma 15dotnet 6
Skill Claude CodeCodex
Convert Figma designs to production-ready React components with Tailwind CSS. Use when user provides a Figma URL, asks to convert Figma designs to React/code, wants to extract components from Figma, or mentions "vibefigma". Requires a Figma access token (via --token flag, FIGMATOKEN env var, or .env file).
Skill Claude CodeCodex
Upgrade @figma/plugin-typings and absorb what the new version exposes. Diffs the .d.ts between the installed and the target version (that package ships no changelog), sorts the changes into breakage / new API / silently-added fields, maps each onto the sandbox handlers, the hand-written Zod mirrors in shared, and the…
Skill Claude CodeCodex
Upgrade @modelcontextprotocol/server (the MCP TypeScript SDK v2) and prove the wire contract survived. The SDK is a runtime dependency whose breakage lands on the wire, not in the type checker — so this sorts each release by which SDK source files it touched (Figwright uses only the server + stdio slice of a…
Skill Claude CodeCodex
Generate framework-aware code from a Figma design. Reads the project's stack profile and emits code matching the existing framework (React/Vue/Svelte/Next/etc.) and styling (Tailwind/CSS/CSS-in-JS), reusing existing components and design tokens instead of regenerating from scratch. Triggers whenever the user wants a…
Skill Claude CodeCodex
Run a gotcha survey on a Figma design — Q&A workflow that captures designer/developer answers locally in .claude/skills/canicode-gotchas/SKILL.md so figma-implement-design can read them at code-gen time. Memo-only: this skill never writes to the Figma canvas. TRIGGER when: the user shares a figma.com/design/... URL…
Skill Claude CodeCodex
Run the full design-to-code roundtrip — analyze a Figma design, surface gotchas, write designer answers back into the file via the Figma Plugin API (usefigma), re-analyze to confirm the gotchas were captured, hand off to figma-implement-design, then optionally register a Code Connect mapping pointing the Figma…
Skill Claude CodeCodex
Analyze a Figma design for development-friendliness and AI-friendliness — produces a graded readiness report listing rule-based issues with severity, affected nodes, and fix suggestions. Read-only: this skill never modifies the Figma file. TRIGGER when: the user shares a figma.com/design/... URL and asks to analyze…
Skill Claude CodeCodex
A build-and-test workflow for turning Figma designs into shadcn/ui components, a reusable set of interface components for React-based projects. It checks the result in a real browser at three screen sizes and runs accessibility checks.
punkadillo/figma-code-composer
Skill Claude CodeCodex
Use when integrating Atomic Design methodology with React, Vue, Angular, or other frameworks. Framework-specific implementation patterns.
punkadillo/figma-code-composer
Skill Claude CodeCodex
Use when composing atoms into molecule components like form fields, search bars, and card headers. Molecules are functional groups of atoms.
punkadillo/figma-code-composer
Skill Claude CodeCodex
Use when building complex organisms from molecules and atoms like headers, footers, product cards, and sidebars. Organisms are distinct UI sections.
Skill Claude CodeCodex
Bind existing Unity prefabs and sprites to Figma components — only when the user explicitly asks. Binding is NOT a prerequisite for building or updating prefabs. Use this when an old UI kit already has assets that are not linked to Figma components. Trigger phrases: "bind figma", "sync figma", "match components", "map…
Skill Claude CodeCodex
Build a Unity UI prefab from a Figma node. Fetches the design, shows a preview image and hierarchy, lets the user pick a pipeline, runs the build, and reports the result including any missing sprites. Use this skill whenever the user wants to create a prefab from Figma, convert a Figma frame/component to Unity, build…
Skill Claude CodeCodex
Download sprites from Figma and import them into Unity as sprite assets. Use this skill whenever the user wants to export images or icons from Figma into their Unity project, save sprites, download assets, or import graphics. Trigger phrases: "download sprites", "export sprites", "save icons from figma", "import…