{
  "markdown": "# d2c\n\nClaude Code commands that turn 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.\n\n---\n\n## Quick Start\n\n```bash\n# 1. Install the plugin\nclaude plugin add d2c\n\n# 2. Initialize in your project (scans codebase, extracts design tokens)\n/d2c-init\n\n# 3. Build from a Figma design\n/d2c-build https://figma.com/design/your-file/your-page?node-id=1-2\n```\n\nSee the full [Getting Started guide](docs/getting-started.md) for detailed setup.\n\n---\n\n## How It Works\n\n```\n/d2c-init (once per project)\n  └─ Claude Code scans codebase → generates .claude/d2c/design-tokens.json\n  └─ Discovers existing components, hooks, styling approach\n  └─ Detects API call patterns (React Query, SWR, axios, fetch, GraphQL, etc.)\n  └─ Imports Figma Variables if Figma MCP is available (flags mismatches)\n  └─ Checks for global Playwright installation\n\n/d2c-build (per task)\n  └─ User provides Figma URL + prompt\n  └─ Shows \"Last used\" options from previous builds alongside standard choices\n  └─ Asks about viewports, components to reuse, and API connections\n  └─ Auto-suggests reusable components based on Figma design analysis\n  └─ Asks for API response structures (per endpoint) if the design connects to APIs\n  └─ Pulls design context + screenshots from Figma MCP\n  └─ Generates code using project tokens, styling conventions, existing components\n  └─ Generates real typed API calls matching your project's fetching pattern\n  └─ Screenshots result via Playwright CLI\n  └─ Compares using pixel-diff (objective) + visual judgment (structural)\n  └─ Iterates (up to 4 rounds)\n       ├─ Below 95% → auto-fixes and re-runs\n       └─ 95%+ or round 4 reached → stops, shows results\n\n/d2c-audit (periodic)\n  └─ Scans for hardcoded values that should use design tokens\n  └─ Finds unused tokens in the design system\n  └─ Detects components bypassing the design system\n  └─ Checks API calls follow the project's established pattern\n  └─ Outputs adherence score and violation report\n```\n\n---\n\n## Prerequisites\n\n1. **Claude Code** installed and working\n2. **A frontend project** using React/Next.js, Vue/Nuxt, Svelte/SvelteKit, Angular, Solid.js/SolidStart, or Astro\n3. **Figma account** with Dev Mode access\n4. **Figma MCP** configured in Claude Code\n5. **Playwright** installed globally (`npm install -g playwright && npx playwright install chromium`)\n\n---\n\n## Installation\n\n### Option A: Claude Code plugin (recommended)\n\n```\n/plugin marketplace add d2c-ai/d2c\n/plugin install d2c\n```\n\n### Option B: npx skills add\n\n```bash\nnpx skills add d2c-ai/d2c\n```\n\nWorks across Claude Code, Cursor, Codex, and other agents that support the [Agent Skills](https://agentskills.io) standard.\n\n### Option C: Manual install\n\n```bash\ngit clone https://github.com/d2c-ai/d2c.git\ncd d2c\n./install.sh\n```\n\nRestart Claude Code after installing. The commands `/d2c-init` and `/d2c-build` will be available in any project.\n\n### Uninstall\n\n```bash\n# If installed via Option C\n./uninstall.sh\n```\n\n---\n\n## MCP Setup\n\nYou need Figma MCP configured. Add this to your project's `.mcp.json`:\n\n```json\n{\n  \"mcpServers\": {\n    \"figma\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"@anthropic-ai/figma-mcp-server@latest\"],\n      \"env\": {\n        \"FIGMA_ACCESS_TOKEN\": \"your-figma-personal-access-token\"\n      }\n    }\n  }\n}\n```\n\n**Figma access token:** Figma → Settings → Account → Personal access tokens → Generate.\n\n---\n\n## Usage\n\n### Step 1: Initialize (once per project)\n\n```\n/d2c-init\n```\n\nThis 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.\n\nIt also imports Figma Variables if Figma MCP is available, flagging any mismatches between Figma and code tokens.\n\nRe-running init when the token file already exists performs an incremental update — only scanning for changes rather than re-reading everything.\n\n### Step 2: Build from Figma\n\nMake sure your dev server is running (`npm run dev`), then:\n\n```\n/d2c-build\n```\n\nClaude Code will ask for:\n1. The Figma Dev Mode URL\n2. What it is (page/section/component), where it lives, functional vs visual-only\n3. Viewports and components to reuse (shows \"Last used\" from previous builds)\n4. Whether the design connects to APIs — if yes, how many calls and their response structures\n\nIt then auto-suggests reusable components from the Figma analysis, generates code with real typed API calls matching your project's pattern, and runs the visual verification loop with objective pixel-diff scoring.\n\n**Dry run:** Add \"dry run\" to your prompt to preview the plan without writing files.\n\n### Step 3: Audit (periodic)\n\n```\n/d2c-audit\n```\n\nScans for design token drift: hardcoded colors, spacing values that should use tokens, unused tokens, components bypassing the design system, and API calls not following established patterns. Outputs a detailed report with an adherence score.\n\n### Step 2b (optional): Build a multi-page flow\n\nWhen the thing you're building spans 2+ screens the user moves through in order — onboarding, checkout, KYC, signup, a wizard — use `/d2c-build-flow` instead of running `/d2c-build` per page. It takes one prompt listing every step in order, detects a shared layout shell, wires navigation between pages, and emits a Playwright navigation smoke test.\n\n```\n/d2c-build-flow\nIn these following pages we need to build the following flow, this is the route /onboarding\nThese are the steps:\nStep 1: https://www.figma.com/design/abc/Onboarding?node-id=1-2\nStep 2: https://www.figma.com/design/abc/Onboarding?node-id=3-4\nStep 3: https://www.figma.com/design/abc/Onboarding?node-id=5-6\n```\n\nPer-page IR, codegen, pixel-diff, and audit reuse the `/d2c-build` machinery unchanged — the flow layer only adds the shared layout, routing, optional shared state, and the navigation test. v1 targets Next.js App Router only.\n\nSee [docs/getting-started-flow.md](docs/getting-started-flow.md) for the full walkthrough, Form B (explicit per-step routes), the Phase 6 report, and common failure modes.\n\n---\n\n## Example Prompts\n\n### Good Prompts\n\n```\nBuild the dashboard overview page from this Figma.\nIt should be the default page at /dashboard.\nThe data cards at the top should accept props for title, value, and trend.\nReuse the existing Card and Badge components.\n```\n\n```\nImplement the user settings page.\nIt goes in app/settings/page.tsx.\nThe form sections should be separate components under components/settings/.\nUse our existing Input and Select components for form fields.\nThe save button should be disabled until a field changes.\n```\n\n```\nBuild the pricing section from the landing page Figma.\nThis is a section component, not a full page — it'll be imported into app/page.tsx.\nThe pricing cards should be a reusable PricingCard component.\nThe toggle between monthly/annual should update all cards.\n```\n\n### Bad Prompts\n\n```\nBuild this page.\n```\n*No context about where it lives, what's interactive, or what to reuse.*\n\n```\nMake it look exactly like the Figma.\n```\n*No information about behavior, state, routing, or data flow.*\n\n---\n\n## What It Enforces\n\n### Reusability First\n- Check existing components before creating new ones\n- Extract repeated patterns into components\n- Props-driven, composable components\n\n### SOLID for Frontend\n- **S** — Single Responsibility: one component, one job\n- **O** — Open/Closed: extendable via props, not source modification\n- **I** — Interface Segregation: don't bloat component props\n- **D** — Dependency Inversion: depend on props and hooks, not concrete implementations\n\n### DRY for Frontend\n- Design tokens for all values — no magic numbers\n- Shared logic in custom hooks\n- Shared layout in layout components\n\n---\n\n## Troubleshooting\n\n**\"Figma MCP not responding\"**\n- Check your `FIGMA_ACCESS_TOKEN` is valid\n- Make sure the Figma file is accessible to your account\n- Restart Claude Code after changing `.mcp.json`\n\n**\"Playwright screenshot is blank\"**\n- Is your dev server running?\n- Check Playwright is installed globally: `npx playwright --version`\n\n**\"design-tokens.json looks wrong\"**\n- Re-run `/d2c-init` and point out what's missing\n- You can manually edit it — it's at `.claude/d2c/design-tokens.json`\n\n**\"Generated code doesn't use my existing components\"**\n- Check the `components` section in `.claude/d2c/design-tokens.json` is complete\n- Explicitly name the components you want reused in your prompt\n\n**\"Generated API calls use the wrong pattern\"**\n- Check the `api` section in `.claude/d2c/design-tokens.json`\n- Re-run `/d2c-init` if you've changed your data fetching approach\n\n**\"Iteration loop isn't converging\"**\n- Break the page into smaller sections and run `/d2c-build` per section\n- Add more context about what matters most in the design\n\n**\"Design system rules aren't being enforced during editing\"**\n- The `d2c-guard` skill activates only when `.claude/d2c/design-tokens.json` exists. Run `/d2c-init` first.\n- Check that the skill is installed: look for `d2c-guard/SKILL.md` in your Claude Code commands directory or plugin installation.\n- The skill only triggers on component file edits inside `src/` or `app/` directories.\n\n---\n\n## Project Structure\n\n```\nd2c/\n├── .claude-plugin/\n│   └── plugin.json                    # Plugin manifest\n├── skills/\n│   ├── d2c-init/SKILL.md             # /d2c-init\n│   ├── d2c-build/\n│   │   ├── SKILL.md                   # /d2c-build (framework-agnostic orchestrator)\n│   │   └── references/                # Framework-specific code gen rules\n│   │       ├── framework-react.md     # React / Next.js\n│   │       ├── framework-vue.md       # Vue 3 / Nuxt 3\n│   │       ├── framework-svelte.md    # Svelte 5 / SvelteKit\n│   │       ├── framework-angular.md   # Angular 17+\n│   │       ├── framework-solid.md     # Solid.js / SolidStart\n│   │       └── framework-astro.md     # Astro\n│   ├── d2c-audit/SKILL.md            # /d2c-audit\n│   └── d2c-guard/SKILL.md   # Auto-invoked (no slash command)\n├── install.sh                         # Install commands globally\n├── uninstall.sh                       # Remove commands\n└── README.md\n```\n\n**`d2c-guard`** is not a slash command. It activates automatically when you create or edit any component file (`.tsx`, `.vue`, `.svelte`, etc.) inside `src/` or `app/`, provided `.claude/d2c/design-tokens.json` exists. It enforces token usage, component reuse, preferred libraries, and SOLID/DRY principles during normal editing — not just during `/d2c-build`.\n\n**In your project (generated by init):**\n```\nyour-project/\n├── .claude/\n│   └── d2c/\n│       ├── design-tokens.json         # Design tokens, components, hooks, API patterns\n│       └── intake-history.json        # Previous build intake answers (auto-generated)\n└── ...\n```\n\n---\n\n## How Skills Resolve Files\n\nSkills reference companion files (framework rules, library categories, token schemas, pixeldiff script) via relative paths like `references/framework-react.md`.\n\n- **Plugin/marketplace install** (`/plugin install d2c` or `npx skills add`): The full directory structure is preserved automatically. Relative paths work out of the box.\n- **Manual install** (`./install.sh`): The script copies entire skill directories (including `references/` and `scripts/` subdirectories) to `~/.claude/commands/`. Relative paths resolve from there.\n- **Fallback**: If a reference file isn't found at its relative path, skills use a Glob search (`**/filename.md`) as a fallback before giving up.\n\n---\n\n## Limitations\n\n- **Supported frameworks:** React/Next.js, Vue/Nuxt, Svelte/SvelteKit, Angular, Solid.js/SolidStart, Astro.\n- **API integration requires user-provided response structures.** The tool generates typed API calls but needs sample response JSON to create accurate types.\n- **Does not guarantee pixel-perfection.** 95%+ is the target. Cross-renderer differences (Figma vs Chromium) may limit pixel-diff scores; visual judgment provides the final assessment.\n- **Does not create designs.** It implements them.\n\n---\n\n## License\n\nMIT",
  "bytes": 12412,
  "sha": "3088d4c6af21bf08a958130130133d1d2d8f7a530541f6ac27bc09bf6d89bd07",
  "repo_slug": "d2c-ai/d2c",
  "fonte": "repo",
  "truncated": false,
  "api": "https://agentalog.com/api/listings/plg_d2c_ai_d2c_d2c_27d6e290/readme"
}