D2C
A Claude Code plugin that turns Figma designs into production-ready frontend code. Supports React/Next.js, Vue/Nuxt, Svelte/SvelteKit, Angular, Solid.js/SolidStart, and Astro. Scans your codebase for design tokens and API patterns, pulls designs from Figma, generates code matching your project's conventions (including real API integrations), and visually verifies output via Playwright screenshot comparison with objective pixel-diff scoring — iterating until the result matches the design.
Quick Start
# 1. Add the marketplace and install the plugin (run inside Claude Code)
/plugin marketplace add d2c-ai/d2c
/plugin install d2c@d2c
# 2. Initialize in your project (scans codebase, extracts design tokens)
/d2c-init
# 3. Build from a Figma design
/d2c-build https://figma.com/design/your-file/your-page?node-id=1-2
Jump to Installation for the full set of install options, Usage for the per-skill walkthrough, and Step 2b: Build a multi-page flow for connected flows.
How It Works
/d2c-init (once per project)
└─ Claude Code scans codebase → generates .claude/d2c/design-tokens.json
└─ Discovers existing components, hooks, styling approach
└─ Detects API call patterns (React Query, SWR, axios, fetch, GraphQL, etc.)
└─ Imports Figma Variables if Figma MCP is available (flags mismatches)
└─ Checks for global Playwright installation
/d2c-build (per task)
└─ User provides Figma URL + prompt
└─ Shows "Last used" options from previous builds alongside standard choices
└─ Asks about viewports, components to reuse, and API connections
└─ Auto-suggests reusable components based on Figma design analysis
└─ Asks for API response structures (per endpoint) if the design connects to APIs
└─ Pulls design context + screenshots from Figma MCP
└─ Generates code using project tokens, styling conventions, existing components
└─ Generates real typed API calls matching your project's fetching pattern
└─ Screenshots result via Playwright CLI
└─ Compares using pixel-diff (objective) + visual judgment (structural)
└─ Iterates (up to 4 rounds)
├─ Below 95% → auto-fixes and re-runs
└─ 95%+ or round 4 reached → stops, shows results
/d2c-audit (periodic)
└─ Scans for hardcoded values that should use design tokens
└─ Finds unused tokens in the design system
└─ Detects components bypassing the design system
└─ Checks API calls follow the project's established pattern
└─ Outputs adherence score and violation report
Prerequisites
- Claude Code installed and working
- A frontend project using React/Next.js, Vue/Nuxt, Svelte/SvelteKit, Angular, Solid.js/SolidStart, or Astro
- Figma account with Dev Mode access
- Figma MCP configured in Claude Code
- Playwright installed globally (
npm install -g playwright && npx playwright install chromium)
Installation
Option A: Claude Code plugin (recommended)
Inside a Claude Code session:
/plugin marketplace add d2c-ai/d2c
/plugin install d2c@d2c
The first command registers this repository as a plugin marketplace named d2c. The second installs the d2c plugin from it. Plugin installs use <plugin-name>@<marketplace-name> — both are d2c here.
Option B: npx skills add
npx skills add d2c-ai/d2c
Works across Claude Code, Cursor, Codex, and other agents that support the Agent Skills standard.
Option C: Manual install
git clone https://github.com/d2c-ai/d2c.git
cd d2c
./install.sh
Restart Claude Code after installing. The commands /d2c-init, /d2c-build, /d2c-build-flow, and /d2c-audit will be available in any project, and d2c-guard will auto-activate while you edit component files.
Uninstall
# If installed via Option C
./uninstall.sh
MCP Setup
You need Figma MCP configured. Add this to your project's .mcp.json:
{
"mcpServers": {
"figma": {
"command": "npx",
"args": ["-y", "@anthropic-ai/figma-mcp-server@latest"],
"env": {
"FIGMA_ACCESS_TOKEN": "your-figma-personal-access-token"
}
}
}
}
Figma access token: Figma → Settings → Account → Personal access tokens → Generate.
Usage
Step 1: Initialize (once per project)
/d2c-init
This scans your codebase and generates .claude/d2c/design-tokens.json containing your styling approach, colors, spacing, typography, breakpoints, existing components, hooks, and API call patterns.
It also imports Figma Variables if Figma MCP is available, flagging any mismatches between Figma and code tokens.
Re-running init when the token file already exists performs an incremental update — only scanning for changes rather than re-reading everything.
Step 2: Build from Figma
Make sure your dev server is running (npm run dev), then:
