FAQ

Questions we've heard most often. If something isn't covered here, the troubleshooting page covers failure modes; for anything else, open an issue.

What is d2c?

d2c is a design-to-code system that runs inside Claude Code. Four skills — d2c-init, d2c-build, d2c-audit, d2c-guard — read your Figma frame, your framework conventions, and your design tokens, then generate code, verify it matches the design pixel-by-pixel, and iterate until it does. It runs locally; no designs or code leave your machine.

How does d2c differ from Locofy, Anima, Builder.io, and Figma Dev Mode?

The short version: everyone else exports code. d2c verifies code against the source design and iterates until it matches.

~ means partial — Locofy and Builder.io support component mapping but still emit a standalone output rather than composing from your library in-place.

In more detail

• Locofy / Anima / Builder.io export a snapshot of the design as code (HTML+CSS, or a component flavored for a framework). They don't read the rest of your codebase, don't reuse your existing components, and don't verify the output renders like the source. You get code; you don't get a proof that the code matches the design. Changes to the design require re-export.
• Figma Dev Mode is a panel that shows measurements, colors, and a CSS hint for a selected frame. It doesn't generate components; it tells you the numbers so you can.
• d2c fetches the frame, writes a component in your framework using your existing primitives, takes a screenshot, pixel-diffs it against the Figma export, and iterates — fixes drift, re-renders, re-diffs — until the match crosses your threshold or it halts and explains why. The contract lives in your repo (design-tokens.json), so regenerating from a changed design is an incremental edit, not a re-export.

Does d2c support my framework?

Yes, if your framework is one of: React (incl. Next.js), Vue (incl. Nuxt), Svelte (incl. SvelteKit), Angular, Solid (incl. SolidStart), or Astro. Each has a reference in skills/d2c-build/references/ that teaches d2c-build how to map design primitives to your framework's idioms. Adding a new framework means adding one reference file.

Does it change my code style?

No. d2c-init scans your codebase first and writes the conventions it finds (import order, prop naming, file layout, component location) into .claude/d2c/design-tokens.json. Every subsequent generation reads those conventions. If the scanner gets something wrong, you edit the JSON and the next run picks up the edit.

Does it run offline?

Mostly. d2c-build needs to fetch the Figma frame once per run, and Claude Code itself needs to be reachable. Everything else — the pixel-diff loop, the framework-specific code generation, the adherence scoring in d2c-audit — runs on your machine against files you already have.

How does pixel-diff verification work?

d2c-build renders the generated component with Playwright (headless Chromium), takes a screenshot at the same viewport as the Figma export, and computes a per-pixel difference. If the diff is above threshold, the skill inspects where the pixels diverge, edits the component, re-renders, and re-diffs. This repeats up to a configurable number of rounds (default: 6) or until the diff clears the threshold. If neither condition triggers, the run halts and prints a summary showing which regions still diverge.

What data leaves my machine?

Only what Claude Code normally sends to Anthropic — the prompt + any attachments you include. Screenshots and generated code are written to your local filesystem; they are not uploaded anywhere. Figma frames are fetched from Figma's API using your Dev Mode credentials. No telemetry is sent by the skills themselves.

Do I need a Figma paid plan?

You need Dev Mode access, which ships on Figma's Professional, Organization, and Enterprise plans. Figma's free Starter plan does not include Dev Mode, so d2c-build can't fetch the frame under that tier. If you can view Inspect panels in the Figma desktop app, you have what's needed.

Can I use d2c without Claude Code?

Not today. The skills are implemented as Claude Code slash commands and rely on the Code agent for generation, file editing, and the iterative loop. A portable-CLI version is not on the current roadmap.

What happens if Figma or GitHub goes down?

• Figma down: d2c-build can't start a new run. An in-progress run continues from whichever frame it already fetched.
• GitHub down: this docs site serves the last-known-good snapshots from public/snapshots/ — a "cached" pill appears next to "View source" so you can tell. The skills themselves don't fetch from GitHub at runtime.