Figma-to-Code: The Full Pipeline
Day 43 · Week 9 · Real-World Workflows
Slack Message — copy & paste
🤖 Tip #43 — Three-step Figma pipeline: extract tokens, generate a prototype mapped to project variables, then visually verify against the original.
#43 Claude Code
The Three-Step Pipeline
- **Step 1 — Extract** (/dx-figma-extract) — Reads the Figma design via MCP, captures a reference screenshot, extracts design tokens (colors, spacing, typography), and saves everything to figma-extract.md.
- **Step 2 — Prototype** (/dx-figma-prototype) — Reads the extraction data, discovers project CSS conventions (variables, breakpoints), generates standalone HTML/CSS, and maps Figma tokens to existing project variables (not raw hex values).
- **Step 3 — Verify** (/dx-figma-verify) — Opens the prototype in Chrome via DevTools MCP, takes a screenshot, compares against the Figma reference using vision, identifies visual differences, fixes them automatically, and re-verifies.
Figma Design-to-Code Pipeline
#43 Real-World Workflows
Why It Works
- 1 **Token mapping is the key insight** — The prototype maps to your project's design tokens, not generic CSS. If Figma says #36C0CF, the prototype uses var(--color-secondary). This makes the output actually usable in production code.
- 2 **Zero manual copying** — Three skills, three agents, no tab-switching between Figma and code
- › The entire pipeline runs from the terminal
- › Each step's output feeds the next automatically
- 3 **Getting started**
- › Run /dx-figma-extract <figma-url> with a real Figma design URL and inspect the output in .ai/specs/
- › Ensure Chrome DevTools MCP is configured — the verify step needs it to screenshot and compare
- › Check your project's CSS variable conventions before running the prototype step — missing variable mappings fall back to raw values
Figma Design-to-Code Pipeline
Your screenshot here Optional — add a screenshot from your own workflow