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
design-tokens.jsonexists at the project root. If it doesn't, tell the user to run/figma-to-design-initfirst and stop. - Read
design-tokens.jsonfully into your context. This is your source of truth for tokens, styling approach, and existing components.
Phase 1: Gather Inputs
1.1 — Get the Figma URL
Ask the user for the Figma Dev Mode URL for the design. This is required.
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.
16figma-to-design-build
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.
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.
1