Felix Lee's Figma MCP × Claude Code designer's playbook¶
Insight: After 100 days of daily vibe-coding, Felix Lee documents a complete Figma MCP → Claude Code workflow claiming 5x faster design-to-production. The workflow eliminates "handoff hell" (design → spec doc → dev interprets → review → feedback ×10 → "close enough") and replaces it with Claude reading Figma directly and generating production code in minutes.
Detail: Five-phase workflow: (1) Analyze design — Claude reads Figma file, identifies structure/colors/typography/components; (2) Extract tokens — generate Tailwind config with semantic color names + CSS variables; (3) Generate components — match exact styling with TypeScript, all variants, hover/focus states; (4) Build sections — responsive sections with semantic HTML; (5) Full pages one by one. Three MCP use cases: Figma Design → production code (most used), FigJam wireframes/flows → working app (powerful), Figma Make → inject into existing codebase (fastest). Setup: claude mcp add figma -e FIGMA_PERSONAL_ACCESS_TOKEN=figd_xxx. Claude can read: layer hierarchy, colors, typography, Auto Layout, component variants, spacing, effects, tokens/variables, text. Cannot read: actual image pixels, prototype interactions, comments, version history.
Sources
Related: existing entry "Figma MCP server setup and usage patterns" in external/figma-workflows.md — COMPLEMENTS