figma-to-code

An Agent Skill for Claude Code and Codex CLI that implements Figma designs to exact 1:1 fidelity.

Decomposes designs into sub-components, implements each one bottom-up, and runs a self-correcting loop per component that cross-references every CSS value against the Figma data until it matches — in a single prompt.

The Problem

AI coding tools using Figma MCP tend to:

• Dump everything into one giant implementation that drifts from the design
• Validate once ("looks good") and move on, leaving spacing/color/font errors
• Require many follow-up prompts to fix discrepancies
• Waste MCP calls by fetching screenshots and variables redundantly

How This Skill Solves It

Decompose → Plan → Implement → Correct until done → Assemble → Correct until done

1. Smart data strategy — complex designs use static/mock data first (no auth/API dependencies); simple components implement directly with project patterns.
2. Decomposes the design into logical parts (atoms → compounds → sections → layout)
3. Implements each piece individually bottom-up
4. Self-corrects per component — cross-references every CSS value against Figma data, lists discrepancies, fixes them, re-checks (up to 3 iterations). Does NOT move on until it matches.
5. Assembles the full page and runs another correction loop on the assembly
6. Uses ~65% fewer MCP calls than the naive approach

| Approach | MCP calls (7-component page) | |----------|------------------------------| | Naive (context + screenshot + variables per component) | ~23 | | Official implement-design skill | ~16 | | This skill | ~8 |

Installation

One command, works on macOS, Linux, and Windows:

npx figma-to-code-skill

This auto-detects your CLI (Claude Code or Codex) and installs to the right location.

Explicit target

npx figma-to-code-skill claude          # → .claude/skills/ (project)
npx figma-to-code-skill codex           # → ~/.codex/skills/ (user-level)
npx figma-to-code-skill codex-project   # → .codex/skills/ (project)

Uninstall

npx figma-to-code-skill uninstall              # auto-detect
npx figma-to-code-skill uninstall claude       # specific target

Clone and copy the skill directory to your agent's skill path:

git clone https://github.com/pawanpaudel93/figma-to-code /tmp/figma-to-code

# Claude Code
cp -r /tmp/figma-to-code/skills/figma-to-code .claude/skills/

# Codex CLI (user-level)
cp -r /tmp/figma-to-code/skills/figma-to-code ~/.codex/skills/

# Any other agent
cp -r /tmp/figma-to-code/skills/figma-to-code <your-agent-skills-dir>/

The SKILL.md follows the Agent Skills open standard.

Prerequisites

• Figma MCP server connected to your AI coding tool
  • Claude Code: claude plugin install figma@claude-plugins-official
  • Codex: Add Figma MCP to your config
• Figma account with Dev or Full seat on Professional+ plan (for higher rate limits)

Usage

Implement this design: https://figma.com/design/abc123/MyApp?node-id=10-5

What Happens

Step 1-3: Analyze — Fetches metadata, variables, and screenshot in 3 parallel MCP calls. Builds a component tree. Presents an implementation plan with MCP call estimates. Waits for confirmation.

Step 4: Implement + Correct — For each component (bottom-up):

• Fetches get_design_context (includes code + screenshot)
• Implements the component
• Correction loop: Cross-references every CSS value against Figma data. Lists specific discrepancies ("padding-left is 16px, Figma specifies 24px"). Fixes all. Re-checks. Repeats until zero discrepancies. Does NOT proceed until the component passes.

Step 5: Assemble + Correct — Composes the full page. Runs another correction loop on the assembly — section spacing, backgrounds, alignment. Fixes until the full page matches.

Step 6: Report — Components created/reused, MCP calls used, correction iterations, deviations.

MCP Efficiency

| Optimization | Saves | |-------------|-------| | get_design_context includes screenshot — skip get_screenshot | 1 call/component | | get_variable_defs once on root — skip per component | 1 call/component | | Parallel batching of siblings | Faster execution | | Skip MCP for "reuse" and "layout-only" items | 1 call/skip | | get_metadata for page root instead of get_design_context | Avoids truncated call |

Browser Validation (Playwright MCP)

When Playwright MCP is connected to your existing browser, the correction loop additionally:

1. Finds the frontend tab already open in your browser (or opens a new tab)
2. Takes a screenshot of the running implementation
3. Compares against the Figma screenshot
4. Fixes and re-renders until they match

No separate browser window. No auth issues — your existing sessions are preserved.

Setup (one-time):

npx figma-to-code-skill setup-browser

This auto-detects your installed browsers (Chrome, Edge, Brave, Arc, Chromium, Vivaldi, Opera), guides you through installing the Playwright MCP Bridge extension, and configures Claude Code.

# Non-interactive (skip browser selection prompt)
npx figma-to-code-skill setup-browser --browser brave
npx figma-to-code-skill setup-browser --browser=chrome

# Skip all prompts (CI-friendly)
npx figma-to-code-skill setup-browser --browser brave --yes

# Verify your setup is working
npx figma-to-code-skill doctor

1. Install the Playwright MCP Bridge extension in your browser

2. Add Playwright MCP (Chrome/Edge are natively supported):

# Chrome or Edge
claude mcp add playwright -s user -- npx @playwright/mcp@latest --extension

# Brave, Arc, Chromium, or other Chromium-based browsers — add --executable-path
claude mcp add playwright -s user -- npx @playwright/mcp@latest --extension '--executable-path=/Applications/Brave Browser.app/Contents/MacOS/Brave Browser'

3. Restart Claude Code

Launch your browser with remote debugging and connect manually:

# macOS (Brave example — replace with your browser path)
/Applications/Brave\ Browser.app/Contents/MacOS/Brave\ Browser --remote-debugging-port=9222
# Chrome
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

# Add Playwright MCP
claude mcp add playwright -s user -- npx @playwright/mcp@latest --cdp-endpoint http://localhost:9222

Note: The browser must be fully quit and relaunched with the flag each time.

Project Structure

figma-to-code/
├── bin/
│   └── cli.mjs                  # Cross-platform installer CLI
├── .claude-plugin/
│   ├── plugin.json              # Claude Code plugin manifest
│   └── marketplace.json         # Self-hosted marketplace config
├── skills/
│   └── figma-to-code/
│       ├── SKILL.md             # Core skill (Agent Skills standard)
│       └── references/
│           └── edge-cases.md    # Truncation, 20+ components, responsive, rate limits
├── CLAUDE.md                    # Project rules for Claude Code
├── AGENTS.md                    # Project rules for Codex CLI
├── package.json                 # npm package for npx installer
├── LICENSE
└── README.md

Tips

• Structure Figma files well — Auto Layout, semantic layer names, components, variables
• Use Code Connect — Links Figma components to codebase components for better output
• Start small — Test with one section before running on a full page
• Rate limits — Starter plans: 6 calls/month. Dev/Full seats: per-minute limits.

Contributing

PRs welcome. If you find edge cases or improvements, open an issue.

License

MIT