d2c — Claude Code plugin: Figma frames to verified code
Turns Figma frames into frontend code built on your own components and tokens, then checks the result against the design.
/plugin marketplace add anthropics/claude-plugins-community
/plugin install d2c@claude-communityWhat d2c does
The plugin ships four skills for Claude: d2c-init, d2c-build, d2c-audit and d2c-guard. Run init once per project. Claude walks the codebase and records your styling approach, colors, spacing, typography, breakpoints, existing components and hooks, plus the way API calls are made. Everything lands in .claude/d2c/design-tokens.json. With Figma MCP connected, Figma Variables come in too and any mismatch against code tokens gets flagged. Running init again updates the file incrementally.
d2c-build takes a Dev Mode frame URL and produces the page. It asks about viewports, which components to reuse and whether the screen talks to an API, and suggests reusable components from its own analysis of the frame. Code generation follows your project's conventions, including typed API calls. Then Playwright CLI takes a screenshot and the result is compared two ways: pixel-diff scoring and a structural read. Up to 4 rounds run; anything under 95% gets fixed and re-shot. Multi-screen journeys go through d2c-build-flow, which takes one prompt listing the steps in order, finds a shared layout shell, wires navigation and emits a Playwright smoke test. In v1 that flow path is Next.js App Router only.
Before you start you need a Figma account with Dev Mode, Figma MCP configured with a personal access token, and Playwright installed globally (npm install -g playwright and npx playwright install chromium).
What it helps with
- build a page from a Figma frame using existing components
- extract design tokens from the codebase into one file
- pixel-diff the rendered page against the design and fix gaps
- wire a screen to an API with typed calls in the project's style
- catch hardcoded colors and design-system workarounds
Example prompts for the agent
- Set up d2c in this project:
/d2c-init - Build the dashboard page from this Figma frame, reuse the Card and Badge components:
/d2c-build - Build the three-step onboarding with navigation between screens:
/d2c-build-flow
How to install d2c
Plugin marketplace
/plugin marketplace add anthropics/claude-plugins-community/plugin install d2c@claude-communityStep by step, with commands for each platform: Claude Code plugins: marketplaces, installing, and building your own
Questions about d2c
How do I install d2c in Claude Code?
Use the plugin marketplace: run /plugin marketplace add anthropics/claude-plugins-community, then /plugin install d2c@claude-community. Restart Claude afterwards.
What does d2c do?
It scans your project, builds a design contract from tokens and components, generates code from a Figma frame, then screenshots and pixel-diffs the output, iterating until it matches the design.
What has to be set up before the first run?
A Figma account with Dev Mode, Figma MCP configured with a personal access token, and Playwright installed globally along with the chromium browser.
