# d2c

Turns Figma frames into frontend code built on your own components and tokens, then checks the result against the design.

- plugin · `type=plugin` · Claude Code · ★ 8
- Author: d2c-ai
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/d2c-ai/d2c
- Updated: 2026-06-22
- HTML: https://affpapa.org/en/nevibecode/plugins/d2c

## What it 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`).

## Install

### Claude Code (native platform)

**Plugin marketplace**
In the agent chat (not a shell):
```text
/plugin marketplace add anthropics/claude-plugins-community
```
In the agent chat (not a shell):
```text
/plugin install d2c@claude-community
```

## When to use it
- 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
- 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`

## Similar
- [build-design](https://affpapa.org/en/nevibecode/skills/build-design.md) — skill · 3600 installs
- [figma-integration](https://affpapa.org/en/nevibecode/skills/figma-integration.md) — skill · 718 installs
- [screenshot-to-code](https://affpapa.org/en/nevibecode/skills/screenshot-to-code.md) — skill · 1300 installs
- [designfit](https://affpapa.org/en/nevibecode/mcp/designfit.md) — MCP server · ★ 7
- [understand-figma](https://affpapa.org/en/nevibecode/skills/understand-figma.md) — skill · 1800 installs
- [figma-designer](https://affpapa.org/en/nevibecode/skills/figma-designer.md) — skill · 807 installs

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md