Figma Design to Code Handoff skill for Claude and Codex

Figma Design to Code Handoff as an AI skill. It asks for Design description, Screen or flow, Target framework and 3 more, then does the rest. Free to install…

Install it once and Claude or Codex runs it for you. When your request matches, your AI loads the skill, asks for anything it is missing, and works through the template itself. Prefer to fill it in by hand? See the full prompt template.

Download the skill (.zip) · View SKILL.md

When it is used

Use when a design file is ready for developers and needs components, tokens, states and open questions listed before any code is written. Do not use for generating finished code or critiquing the visual design. Related topics: design, coding.

What it will ask you for

• Design description (longer free text)
• Screen or flow (free text, e.g. "Name of what is being built")
• Target framework (choose one: React, Vue, Flutter, SwiftUI, Plain HTML and CSS)
• Existing component library (free text, e.g. "Name or none")
• Token values (longer free text)
• Responsive targets (choose any: Mobile, Tablet, Desktop)

How it works

1. List the components in the design with names, props and where they repeat, so each is built once.
2. Extract the tokens and match each to an existing library value before proposing a new one.
3. Enumerate every state per component and mark the ones the design never shows as Missing.
4. Describe layout rules and how they change at each chosen screen size, plus accessibility requirements.
5. Write the open questions for the designer, each with a default the developer can use meanwhile.

What you get

A handoff document with components, a token table, a state matrix, responsive notes, accessibility notes and a list of open questions with proposed defaults.

What it watches out for

• Copying exact pixel values into code instead of naming tokens, which scatters one-off numbers across the codebase.
• Building only the default state, then discovering loading, empty and error states at review.
• Guessing at a missing state silently instead of asking, so the designer finds the guess in production.

How to install

Claude.ai and the Claude desktop app

1. Download the skill .zip.
2. Open Settings, then Capabilities, and find Skills.
3. Choose Upload skill and select the .zip.
4. Ask Claude for help with the task. It loads the skill when your request matches.

Claude Code

1. Download the skill .zip.
2. Unzip it into ~/.claude/skills/ (or .claude/skills/ inside a project).
3. Start a new session. Claude Code loads the skill when your request matches.

Codex

1. Download the skill .zip.
2. Unzip it into ~/.agents/skills/ (or .agents/skills/ inside a project).
3. Codex picks it up on its own. Type $ and the skill name to use it, or just ask for the task.

Cursor

1. Download the Cursor rule (.mdc).
2. Save it in .cursor/rules/ inside your project.
3. Cursor's agent applies the rule when your request matches its description.

AGENTS.md (Codex, Cursor, and other coding agents)

1. Copy the AGENTS.md section.
2. Paste it into AGENTS.md at the root of your repository, creating the file if needed.
3. Coding agents that read AGENTS.md follow it when your request fits.