d2c_

Install

d2c is Claude Code's design-to-code system. It runs as a Claude Code plugin, as npm skills, or as a manual install in any project. Pick whichever matches how you use Claude Code today — they are equivalent at runtime.

Prerequisites

Before installing, make sure your machine has:

  • Node.js 20+ — required by the skills' build verification step.
  • Claude Code — claude on your $PATH. Install from claude.com/code if you haven't already.
  • Playwright — used by d2c-build to take screenshots for pixel-diff verification. Run npx playwright install chromium once.
  • Figma Dev Mode access — for pulling design context. The Figma MCP is configured during d2c-init.

Option 1 — Claude Code plugin (recommended)

If you use Claude Code's plugin marketplace, this is the fastest path.

claude plugins add d2c-ai/d2c

The plugin registers all four skills (d2c-init, d2c-build, d2c-audit, d2c-guard) as slash commands. No further configuration is needed at install time.

Option 2 — npm skills

For projects that manage skills via npm, install with the skills CLI.

npx skills add d2c-ai/d2c

This writes skill definitions to .claude/skills/ in your current project and updates .claude/settings.json. Commit both directories so the whole team picks up the same skill versions.

Option 3 — Manual

If you want full control over which files land where — for example, to fork a skill before installing — clone the repo and run the install script.

git clone https://github.com/d2c-ai/d2c
cd d2c
./install.sh /path/to/your/project

The install script copies skills/ into your project's .claude/ directory and does not modify anything else.

Verify the install

Open a fresh Claude Code session in your project and run:

/d2c-init --dry-run

You should see a summary of what d2c-init would do — scan the codebase, detect framework, list design-token candidates — without writing anything. If this command is recognized, the install worked.

Next steps

  1. Run /d2c-init for real. This creates .claude/d2c/design-tokens.json, the contract every other skill reads from.
  2. Open a Figma frame, copy its Dev Mode URL, then run /d2c-build <figma-url> and answer the intake questions.
  3. After your first generated component lands, run /d2c-audit to see how well it adheres to the tokens, and check that d2c-guard is armed for future edits.

If any step fails, the skill output includes a diagnose section with suggested fixes. For deeper issues, file a GitHub issue with your design-tokens.json attached.

See the FAQ for comparisons with Locofy, Anima, Builder.io, and Figma Dev Mode.

Uninstalling

./uninstall.sh /path/to/your/project from the cloned repo, or claude plugins remove d2c-ai/d2c for the plugin path. Your .claude/d2c/design-tokens.json is left in place — it's your codebase's design contract, not a d2c artifact.