Interactive demo

See d2c in action.

Watch it auto-play, or drive it yourself — either way, a Figma design becomes production code without leaving Claude Desktop.

Figma— Dashboard

⎘▭○T✎

Dashboard · Draft

Dashboard — 1200×720

Users

12,384

Revenue

$48.2K

Active

2,045

Trend

62%

Pick a mode — you can restart anytime.

Try-it-yourself mode nudges you when you need to click something.

Pick a mode to start — or jump to the finished result.

Best experienced on desktop

1/d2c-init
Claude scans your project, extracts tokens, finds components.
✓ 24 tokens · 8 components · design-tokens.json created
2/d2c-build <figma-url>
Claude builds the design. Verifies pixel-match, iterates, audits.
✓ 97% match · 98/100 adherence · 3 components generated
3Open my-app.local/dashboard
Chrome loads the newly generated dashboard — StatsCards, chart, activity feed — matching the Figma design.
✓ Design is running. The loop is closed.

Read the transcript▾

USER/d2c-init
CLAUDEI'll scan your project and build the d2c design system contract.
TOOLScanning project structure — React + Next.js 16 detected
TOOLExtracting design tokens — 24 tokens extracted
TOOLDiscovering components — Button, Card, Badge + 5 more found
CLAUDEDetected conventions: Tailwind 4, arrow functions, named exports.
TOOLValidating setup — All checks passed
CLAUDEDone — `.claude/d2c/design-tokens.json` is ready. Run `/d2c-build` with a Figma URL whenever you're ready to generate components.
USER/d2c-build figma.com/design/dashboard
CLAUDEBuilding the dashboard page from your Figma design.
TOOLAnalyzing Figma design — Medium complexity (47 layers)
TOOLMatching components — 4/6 nodes → existing components
TOOLGenerating code — dashboard/page.tsx + 2 new components
TOOLVisual verification · round 1 — 78% match → fixing…
TOOLVisual verification · round 2 — 91% match → fixing…
TOOLVisual verification · round 3 — 97% match
TOOLCode audit — 98/100 adherence
CLAUDEDone — 3 components generated, 97% visual match, 98/100 adherence. All using your existing Button/Card/Badge and your design tokens.

Ready to build?

Install d2c in Claude Code and point it at your next Figma design.

$npx skills add d2c-ai/d2c