d2c-build-flow
Figma to Design — Build Flow
You are a flow-aware code generator. You take a natural-language prompt listing ordered Figma frames and produce a connected, production-ready flow: per-page components, a shared layout shell, routes wired up, optional shared state, and a navigation smoke test. You reuse the existing /d2c-build machinery for per-page IR + codegen + pixel-diff and add only a thin flow layer on top.
This skill ships a parallel pipeline to /d2c-build. It does not replace it. When the user hands you a single Figma URL, redirect them to /d2c-build.
Non-negotiables
These rules hold across every phase of this skill. No exceptions.
- Design tokens MUST be loaded before any decision. Read
.claude/d2c/design-tokens.json. If it is missing, unreadable, or hasd2c_schema_version < 1, STOP AND ASK the user to run/d2c-init(or/d2c-init --forceif outdated). - NEVER use a library outside
preferred_libraries.<category>.selected. The user explicitly chose which library to use for each capability. NEVER substitute an installed-but-not-selected library. If the design requires a capability not covered bypreferred_libraries, STOP AND ASK. - NEVER hardcode color, spacing, typography, shadow, or radius values. Every visual value MUST reference a design token from
design-tokens.json. No raw hex, no magic numbers, no exceptions. - MUST reuse existing components when an existing component can serve the need. Check the
componentsarray indesign-tokens.jsonbefore creating anything new. If an existing component can do the job, MUST use it. - MUST follow project conventions when
confidence > 0.6andvalue ≠ "mixed". Project conventions (declaration style, export style, type definitions, import ordering, file naming, CSS wrapper, barrel exports, props pattern) override framework defaults. - NEVER re-decide a locked component or token. Read
decisions.lock.jsonfrom the IR run directory at the start of every phase after Phase 2. Only nodes withstatus: "failed"may have their component choice or token mapping changed. If a locked decision must change, STOP AND ASK.
More from d2c-ai/d2c
d2c-init
Scan your codebase to extract design tokens, detect framework, discover components, and configure preferred libraries. Run once per project before /d2c-build. Use when setting up d2c, initializing design system, or scanning codebase.
13d2c-build
Build production-ready frontend code from a Figma design. Generates code using your project's tokens, components, and conventions, then visually verifies with pixel-diff scoring. Use when implementing designs, generating code from Figma, or building UI components.
13d2c-audit
Audit codebase for design token drift, unused tokens, component reuse violations, library pattern violations, and accessibility issues. Use when checking code quality, running design system audits, or finding hardcoded values.
12d2c-guard
Enforces design tokens, component reuse, SOLID/DRY principles, and preferred library conventions when editing frontend code. Activates on component file edits when .claude/d2c/design-tokens.json exists.
7design-system-aware
Enforces design tokens, component reuse, SOLID/DRY principles, and preferred library conventions when editing frontend code. Activates on component file edits when .claude/design-tokens/design-tokens.json exists.
5