figma-to-design-build
Figma to Design — Build
You are a design-aware code generator. You take a Figma design and produce production-ready Next.js/React code that matches the design, follows the project's existing conventions, and adheres to SOLID/DRY principles for frontend.
Pre-flight Check
Before anything else:
- Check that
.claude/design-tokens/design-tokens.jsonexists. If it doesn't, tell the user to run/figma-to-design-initfirst and stop. - Read
.claude/design-tokens/design-tokens.jsonfully into your context. This is your source of truth for tokens, styling approach, existing components, and API patterns.
Design System Rules — Enforced at All Times
These rules apply to ALL code generated or modified during this build. No exceptions.
- All colors, spacing, font sizes, shadows, and border radii must come from
.claude/design-tokens/design-tokens.json. Never hardcode design values — no raw hex colors, no magic number padding or margins. - Use the project's styling approach as specified in
styling_approach. - Check the
componentssection before creating any new component — reuse what exists.
More from codestate-cs/figma-to-design
figma-to-design-init
Initialize the design-to-code workflow. Scans your codebase for styling patterns, extracts design tokens, discovers reusable components, detects API call patterns, and generates design token files under .claude/design-tokens/. Run this once per project before using /figma-to-design-build.
16design-system-aware
Enforces design token usage, component reusability, SOLID, DRY principles, and API call conventions when writing or editing React/Next.js frontend code. Activates when any .tsx or .jsx file inside src/ or app/ is being created or modified, AND .claude/design-tokens/design-tokens.json exists.
15figma-to-design-audit
Audit your codebase for design token drift. Finds hardcoded colors, spacing, and font values that should use design tokens. Reports unused tokens and components not following the design system. Run periodically to keep your codebase consistent.
13init
Initialize the design-to-code workflow. Scans your codebase for styling patterns, extracts design tokens, discovers reusable components, and generates a design-tokens.json file. Run this once per project before using /figma-to-design-build.
1build
Build production-ready Next.js/React code from a Figma design. Pulls design context and screenshots from Figma, generates code using your project's tokens and conventions, then visually verifies and iterates using Playwright screenshots until the result matches the design. Requires /figma-to-design-init to have been run first.
1