build-from-figma

/build-from-figma — Autonomous Figma-to-Working-App Pipeline

You are the master orchestrator for converting a Figma design into a fully working, tested React application. You receive a Figma URL and guide the entire process through 9 phases, using specialized skills and agents.

Key enforcement rules:

• TDD is mandatory — Phase 3 (TDD) MUST complete before Phase 4 (Build). No exceptions.
• The tests are the specification — Phases 4 and 5 never edit a test file; the component-lanes workflow checks every test file's checksum after each change.
• Visual QA uses pixel diff — Phase 5 uses scripts/visual-diff.js for programmatic comparison, not manual eyeballing.
• E2E tests are generated — Phase 6 generates and runs Playwright E2E tests appropriate to the app type.
• App-type aware — Chrome extensions, PWAs, and web apps each get tailored test strategies.

Input

The user provides: $ARGUMENTS (a Figma URL, optionally with node-id)

Parse the Figma URL to extract:

• fileKey from the URL path
• nodeId from the ?node-id= parameter (convert - to :)
• For branch URLs: use branchKey as fileKey

Configuration

Load .claude/pipeline.config.json at the start. This provides:

• Visual diff thresholds and iteration limits
• TDD enforcement settings
• E2E strategy per app type
• Quality gate thresholds
• Lighthouse score minimums

Progress Tracking

Track the run in .claude/plans/pipeline-state.json (gitignored, beside build-spec.json). Todo tools are not offered on current models, and a file survives an interrupted session: the SessionStart hook reads it and tells the next session where the run stopped. /build-from-canva, /build-from-screenshot and /build-from-conversation use the same file and shape.

Create it when the run starts, and rewrite it at every phase boundary and after each component and page result:

{
  "pipeline": "figma",
  "source": "https://www.figma.com/design/abc123/My-App",
  "renderer": "vite",
  "appType": "web-app",
  "startedAt": "2026-10-24T15:00:00Z",
  "updatedAt": "2026-10-24T15:42:00Z",
  "phase": "5",
  "phases": {
    "0": { "name": "token-sync", "status": "skipped" },
    "1": { "name": "intake", "status": "done", "artifact": ".claude/plans/build-spec.json" },
    "2": { "name": "token-lock", "status": "done", "artifact": "src/styles/design-tokens.lock.json" },
    "3": { "name": "tdd-scaffold", "status": "done" },
    "4": { "name": "component-build", "status": "done" },
    "4.5": { "name": "storybook", "status": "pending" },
    "5": { "name": "visual-diff", "status": "running" },
    "5.5": { "name": "dark-mode", "status": "pending" },
    "6": { "name": "e2e-tests", "status": "pending" },
    "7": { "name": "cross-browser", "status": "pending" },
    "8": { "name": "quality-gate", "status": "pending" },
    "8.5": { "name": "responsive", "status": "pending" },
    "9": { "name": "report", "status": "pending" }
  },
  "components": { "Button": { "test": "src/components/Button/Button.test.tsx", "testSha256": "…", "build": "green", "attempts": 1 } },
  "pages": { "home": { "visual": "pass", "worstMismatchPct": 0.012, "rounds": 2 } },
  "notes": ["Hero: needs review, 768px layout still 4.1% off after 5 rounds"]
}