---
prompt-id: "17"
name: Phase 2 — GENERATE (build code from Phase 1 spec)
status: live
mcp: optional (for re-checking against source)
model: Sonnet 4.6
environment: Claude Code (file output) or Claude Desktop
inputs:
  - output/phase-1-spec.md (from Prompt 16)
  - Tech stack target (framework, styling)
  - Existing components / token file paths (if any)
outputs:
  - Component code with tokens at top, components below
  - All values via CSS custom properties — no raw hex in components
chains: [10]
prereqs: ["16"]
documented-in: Ch16 — The Three-Phase Workflow
---

# Prompt 17 — Phase 2 GENERATE

The second of three sequential prompts in the Path B production workflow. Takes the Phase 1 spec as input and generates production code — tokens at top, components below, every value through `var(--token)`.

## When to use

After Phase 1 (Prompt 16) has produced `output/phase-1-spec.md`. Never run Phase 2 without a Phase 1 spec — it will improvise values.

## Output shape

Code file(s) for the chosen framework: tokens declared in `:root`, components reference tokens via `var()`, all interactive states (hover / focus-visible / disabled) included.

## Chain memberships

- Chain 10 — Three-Phase Path B Workflow (step 2 of 3)

## Prompt body

```
PHASE 2 — GENERATE: Build code from Phase 1 specification

Spec from Phase 1: [paste output/phase-1-spec.md content here]

Tech stack:
  Framework: [React + TypeScript | Vanilla HTML/CSS | Vue | Svelte]
  Styling: [CSS custom properties | Tailwind]
  Existing components at: [path, if any]
  Token file at: [path, if any]

Rules:
1. Use EXACT values from the spec. No rounding, no "approximately".
2. Define all colors and spacing as CSS custom properties in :root,
   grouped by category.
3. Every component references tokens via var(), never raw values.
4. Include hover, focus-visible, and disabled states for all
   interactive elements.
5. Use semantic HTML (button for buttons, not div with onclick).
6. Add aria-labels where visible text is absent.
7. Respect prefers-reduced-motion for any animation.
8. Do not improvise values not in the spec. If something is unclear,
   flag it with a comment and use the closest spec value.

Output: component code with tokens at top, component below.
No inline styles. No raw hex values in components.

META-FOOTER (chain runner)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
SAVE INSTRUCTION
  Save tokens to: output/tokens.css
  Save component code to: output/components/<framework>/

VERIFY
  Open the generated code. Confirm:
  - All values reference tokens (grep for raw hex should be empty)
  - All interactive elements have hover, focus-visible, disabled
  - Visual comparison with Figma source: any drift list?

CHAIN-STATE LOG
  Append to output/chain-state.md:
    ## Prompt 17 — Phase 2 GENERATE
    Date: <today>
    Framework: <chosen>
    Components generated: <count>
    Drift items for Phase 3: <count>

HANDOFF
  "Phase 2 code generated. Compare with Figma source visually.
   List any drift in the format expected by Phase 3:
     [element]: [property] is [current] → should be [value]
   Next → Prompt 18 (Phase 3 REFINE) with the drift list."
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
```