--- chain-id: 10 name: Three-phase Path B workflow (Figma → Code, production-grade) path: B · Standard status: live prompts: [16, 17, 18] inputs: Figma file URL + tech stack target + tokens.css (or generated by Chain 2 first) outputs: production-grade code matching Figma source — tokens at top, components below, all interactive states present documented-in: Ch16 — The Three-Phase Workflow --- # Chain 10 — Three-Phase Path B Workflow The Path B equivalent of Chain 9. Where Chain 9 takes brand adjectives and ends with a published spec page, Chain 10 takes a Figma file and ends with production code that matches the Figma source byte-for-byte. Three sequential prompts — Phase 1 STUDY → Phase 2 GENERATE → Phase 3 REFINE — each with a different job and a different output artifact. **When to use:** You have an existing Figma file and need production code from it. This is Path B's main run. **Expected runtime:** 30–60 minutes for a single screen / component, longer for multi-screen flows. Each phase is a separate Claude session by design — don't try to compress into one prompt. **Prerequisites:** Figma Dev Mode MCP connected (run Prompt 19 first if unsure). `tokens.css` exists for token validation in Phase 2 (run Chain 2 to generate it from Figma if needed). --- ## Step table | Step | Prompt | What lands | Checkpoint | |---|---|---|---| | 1 | `16-phase-1-study.md` | `output/phase-1-spec.md` — structured spec with exact values, no code | Spec sections complete; no "approximately" anywhere | | 2 | `17-phase-2-generate.md` | `output/components//` — code with tokens at top, components below | Visual comparison with Figma source; produce drift list | | 3 | `18-phase-3-refine.md` | Updated component files with surgical corrections applied | Drift list resolved; remaining items go to next REFINE round | --- ## Step-by-step walkthrough ### Step 1 — Phase 1 STUDY (Prompt 16) **What to paste:** - Figma file URL - The frame or page name to extract **Discipline:** No code in Phase 1. The single most common failure mode in Path B is asking for the spec and the code in the same prompt — Claude defaults to "show me what good looks like" and improvises code that hasn't been validated against the source. The Phase 1 prompt explicitly forbids code generation. Honor it. **What to check:** - Six sections present (color, type, spacing, components, effects, layout) - Exact values throughout — no rounding, no "approximately" - Component inventory matches what you see in Figma (spot-check 3–5 components by name) **Common failures:** - *Spec is missing component variants:* Ask Claude to extract variants explicitly. Variants live in Figma Component Properties — Claude can read them via MCP but won't always volunteer the list without a prompt. - *Spec rounds spacing values:* Re-paste Phase 1 prompt with emphasis: "EXACT px values. No rounding. If a value is 11.5px, report 11.5px not 12px." --- ### Step 2 — Phase 2 GENERATE (Prompt 17) **What to paste:** - The full content of `output/phase-1-spec.md` from Step 1 - Tech stack: framework, styling approach, existing component paths if any - (Optional) The current `tokens.css` if you want Claude to map Phase 1 colors to existing tokens rather than create new ones **What to check:** - All values reference tokens via `var()` — search the output for raw hex; should be empty inside components - All interactive states present (hover, focus-visible, disabled) - Visual comparison with Figma source — note any drift in the format `[element]: [property] is [current] → should be [value]` **Common failures:** - *Code uses raw hex instead of tokens:* The prompt explicitly forbids it. Re-run Step 2 with: "Every value must be `var(--token)`. If a value isn't in tokens.css, propose a new token name; don't inline raw." - *Missing focus-visible state:* Governance requires it. Add to the prompt: "Generate `:focus-visible` (not `:focus`) for every interactive element." --- ### Step 3 — Phase 3 REFINE (Prompt 18) **What to paste:** - The drift list from Step 2's checkpoint, in format `[element]: [property] is [current] → should be [value]` - The Phase 2 component code **Discipline:** Phase 3 is surgical. Only the listed corrections get applied. No "improvements," no "while I'm at it" refactors. The format `[element]: [property] is [current] → should be [value]` is intentional — it forces mechanical application rather than creative interpretation. **What to check:** - Listed corrections all applied - Nothing else changed (compare with Phase 2 output) - Remaining drift items (if any) listed in a NOTES section for the next round **The nuclear refinement (escape hatch):** If Claude keeps reinterpreting instead of applying exact values, paste the computed CSS from your browser's DevTools directly into the prompt and write *"Use these EXACT values, do not reinterpret."* Forces mechanical application. Reserved for stubborn cases. --- ## Closing the round-trip — optional Chain 8 follow-up Phase 3 ends with code corrected against the Figma source. But the inverse can be true too: when Phase 3 updates a token value materially (e.g., a button's border-radius is fixed in code), Figma now drifts behind code. To close the round-trip, run [Chain 8 — Figma write-back](chain-8-figma-write-back.md) (powered by [Prompt 15](../prompts/15-figma-write-back.md)) after a REFINE pass that materially changed token values. Chain 8 reads the updated `tokens.css`, reconciles against the Figma variable library via MCP write access, and updates Figma to match. The full round-trip becomes: Figma → STUDY → GENERATE → REFINE → Figma write-back → Figma. Code is the source of truth at the end of every cycle. --- ## When to use which path | You have | Run | |---|---| | 3 brand adjectives, no Figma | Chain 9 (greenfield end-to-end) | | Figma file, want code | **Chain 10 (this chain)** | | Figma file with variables, want tokens.css only | Chain 2 (extract only) | | Code, want Figma to match | Mapping report (Prompt 27) → Chain 8 (write-back) | | Existing audit work, want quality gate | Chain 4 (drift) + Chain 5 (a11y) | --- ## What to do with the output After Chain 10: - **Run Chain 4** (drift audit) on the generated code before merge — Phase 3 is surgical, not exhaustive - **Run Chain 5** (a11y audit) — visual comparison doesn't catch ARIA or keyboard issues - **Optionally run Chain 8** if Phase 3 changed token values materially — keeps Figma synced --- *Chain 10 · Three-Phase Path B Workflow · Design Systems That Build Themselves · © 2026 Ishdeep S Sahni*