---
prompt-id: "16"
name: Phase 1 — STUDY (extract design specification from Figma)
status: live
mcp: figma-dev-mode
model: Opus 4.7
environment: Claude Desktop (with Figma Dev Mode MCP connected)
inputs:
  - Figma file URL
  - Frame or page to extract
outputs:
  - Structured markdown spec covering color palette, typography scale, spacing map, component inventory, effects, layout structure
  - NO code in this phase — extraction only
chains: [10]
prereqs: []
documented-in: Ch16 — The Three-Phase Workflow
---

# Prompt 16 — Phase 1 STUDY

The first of three sequential prompts in the Path B production workflow. Extracts a complete design specification from a Figma file via Dev Mode MCP — exact values, no rounding, no improvements. The output is a markdown spec document that becomes the input to Phase 2 (Prompt 17 — GENERATE).

## When to use

When you have a Figma file and need to produce production code from it. Always run before Phase 2; never skip. The discipline of "no code in Phase 1" is what stops AI from improvising values that aren't in the source.

## Output shape

A structured markdown document with six sections: COLOR PALETTE (every unique hex with role), TYPOGRAPHY SCALE (every font size with weight/line-height), SPACING MAP (every padding/margin/gap), COMPONENT INVENTORY (every distinct component with variants and states), EFFECTS (shadows, radii, transitions), LAYOUT STRUCTURE (container widths, grids, breakpoints).

## Chain memberships

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

## Prompt body

```
PHASE 1 — STUDY: Extract design specification

Study this Figma file: [FIGMA_URL]

Before writing any code, output a complete design specification
with these sections:

1. COLOR PALETTE
   - Every unique color with exact hex value
   - Usage role for each (background, text, border, accent, etc.)
   - Grouped into: primitives and semantic roles

2. TYPOGRAPHY SCALE
   - Every unique font size with exact value (no rounding)
   - Font-family, weight, line-height, letter-spacing per style
   - Suggested token name for each

3. SPACING MAP
   - Every unique spacing value (padding, margin, gap) in exact px
   - Grouped into a suggested token scale

4. COMPONENT INVENTORY
   - Every distinct component visible
   - Variants present, sizes used, interactive states visible

5. EFFECTS
   - Shadow values (x / y / blur / spread / color, exact)
   - Border radii used (exact px values)
   - Any transitions or animations

6. LAYOUT STRUCTURE
   - Container widths
   - Grid structures
   - Breakpoints inferable from source

Output as structured markdown with exact values throughout.

CRITICAL: Do NOT write any code. Do NOT suggest improvements.
Extract only what exists with exact values — no approximations.

META-FOOTER (chain runner)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
SAVE INSTRUCTION
  Save the spec markdown to: output/phase-1-spec.md
  This file becomes the input to Phase 2 (Prompt 17).

VERIFY
  Spec contains six sections (color, type, spacing, components,
  effects, layout). No code blocks. No "approximately" or "around".

CHAIN-STATE LOG
  Append to output/chain-state.md:
    ## Prompt 16 — Phase 1 STUDY
    Date: <today>
    Figma source: <URL>
    Spec sections: 6 ✓
    Component count: <N>

HANDOFF
  "Phase 1 spec extracted to output/phase-1-spec.md.
   Next → Prompt 17 (Phase 2 GENERATE) — paste the spec into
   the GENERATE prompt body to build code from it."
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
```