Reference Interpreter

Analyze a reference (screenshot, URL, or description) and produce a Design Brief that maps visual observations to design system tokens. Output the Brief, then stop and wait for user confirmation before building anything.

Prerequisite: figma-preflight should have run so the Token Map and Style Registry are available.

Phase 1 — Analyze

Examine the reference across these dimensions:

1. Layout — structure, columns, section heights, grid width, alignment
2. Typography — heading/body hierarchy, weight contrast, tracking
3. Color — dark/light sections, accent usage, neutral dominance
4. Spacing — generous vs compact, section padding, internal gap
5. Visual Anchor — what draws the eye: large type, hero image, illustration
6. Components — what UI elements are visible: cards, buttons, forms, nav