Figma to Code with Claude Code

A proof of concept demonstrating automated Figma-to-Angular implementation using Claude Code with pixel-perfect visual verification.

What It Does

1. Extracts design specs from Figma via MCP
2. Implements Angular components with exact Figma values
3. Creates Storybook stories for documentation
4. Compares screenshots pixel-by-pixel until implementation matches design

Prerequisites

• Node.js 18+
• Figma Desktop
• Claude Code CLI
• ImageMagick (for screenshot comparison)

Setup

1. Install Claude Code CLI

npm install -g @anthropic-ai/claude-code

2. Authenticate

claude login

3. Enable Figma Desktop MCP Server

In Figma Desktop: Figma menu → Settings → Enable Local Server

Then add to Claude Code:

claude mcp add figma-desktop http://127.0.0.1:3845/mcp --transport http

4. Add Playwright MCP Server

claude mcp add playwright -- npx @playwright/mcp@latest --config playwright-mcp-config.json

5. Install Dependencies

npm install

Usage

1. Start Storybook:

   npm run storybook

2. Open Figma Desktop with your design file

3. Run Claude Code:

   claude

4. Give it a Figma URL:

   Implement this Figma design: https://www.figma.com/design/xxx?node-id=123-456
   

Claude automatically uses the implement-figma-design skill to extract specs, implement the component, and iterate until pixel-perfect.

How It Works

The skill (.claude/skills/implement-figma-design/SKILL.md) guides Claude through:

1. Get Figma specs - Uses Figma Desktop MCP for exact design values
2. Implement component - Angular standalone with OnPush, signal inputs
3. Create story - Storybook story matching Figma exactly
4. Compare pixels - Playwright screenshots vs Figma, ImageMagick diff
5. Iterate - Fix mismatches until <0.5% difference

Commands

npm start           # Dev server
npm run storybook   # Storybook dev server
npm run build       # Production build
npm test            # Run tests

License

MIT