Extracting a Design System from a Reference
Lock the reference first. Then extract every token from computed styles — not visual estimation.
Lock the Reference First
The extraction workflow begins with a single non-negotiable step: lock the reference before touching any code, any token list, or any design system file.
Locking means establishing the artifact that AI must reproduce — not describe, not improve, not reinterpret. It means feeding the reference image to AI before any text. In practice, leading with the reference image anchors the build: it establishes the concrete artifact that all subsequent instructions modify, rather than asking AI to imagine a design from words alone.
This is the source of most rebuild failures. The developer describes the design in a prompt. AI builds something that matches the description but not the reference — because language is imprecise and AI fills in the gaps with its own aesthetic judgment. With the reference image present and the lock instruction active, the gap disappears.
The Six-Step Extraction Workflow
Extraction is systematic, not aesthetic. Every token you add to MASTER.md is a measurement — not a guess.
The order matters. You lock the reference before extraction. You extract before building. You write MASTER.md before feeding AI any code prompt. The workflow is sequential precisely because each step depends on the prior one.
Step 1 — Lock the Reference: Screenshot or Figma export. This becomes the artifact you are building against. Nothing else is authoritative.
Step 2 — Extract Color Palette: Open DevTools → inspect the background, the primary text, the accent elements, the borders. Use the color picker on each computed color. Write down every distinct hex value with its role. Do not invent: "I think the accent is maybe a cyan-blue" is not a token. #00E5FF is a token.
Step 3 — Extract Type Scale: Inspect every text element in DevTools. For each role (hero heading, section heading, body, label), record: font-size in px, font-weight, line-height computed value, font-family. This is the data that goes directly into MASTER.md.
Step 4 — Extract Spacing System: Find the base unit (is the smallest padding 4px or 8px?). Measure card padding, section gap, grid gap. The academy uses an 8px grid — card-padding is 24px (3 units), section gap is 64px (8 units). Consistent ratios are a good sign; note them.
Step 5 — Extract Motion Spec: Open DevTools → Animations panel. Hover over interactive elements. Record transition duration and easing. The academy uses 150ms ease on hover — no layout shifts, only color and border changes.
Step 6 — Write MASTER.md: All extracted tokens go into structured sections. Identity & Concept, Color System, Typography Rules, Component Patterns, Anti-Patterns. The anti-patterns section is where you codify the hard rules — the font-weight 300 ban, the no-border-2-on-cards rule, the no-slate-500-body-copy rule.
The Token Extraction Matrix
Knowing what to extract is only half the work. Knowing how to measure it precisely is the other half.
The "How to Measure" column matters. "Color picker on body" is not "estimate from visual inspection." DevTools computed styles give the actual rendered value — not the declared CSS that might be overridden by specificity. For colors, open DevTools → Elements → Computed → filter for color, background-color, border-color. For typography, filter for font-size, font-weight, line-height.
Hard Rules Override Reference Values
One critical nuance: the reference is the truth about what was built, but the hard rules override unsafe reference values when you are building in a different context.
The most common example is font weight. A reference built for a light-mode site might use font-weight: 300 for body copy. That is readable on a white or very light background. When you extract that reference and build a dark mode version, weight 300 must be upgraded to at minimum weight 400. The dark background absorbs thin strokes.
This is why MASTER.md has an anti-patterns section. After extraction, you apply the hard rules:
- If extracted body weight is 300 → upgrade to 400 in MASTER.md
- If extracted body size is 14px → upgrade to 16px in MASTER.md
- If extracted body color is below #94A3B8 brightness → upgrade to #94A3B8 in MASTER.md
The reference is the design truth. The hard rules are the production correctness floor. Both must be satisfied.
What a Completed Extraction Looks Like
After running the six-step workflow against the academy's own design, the MASTER.md contains:
--background: #0a0a0f
--foreground: #f1f5f9
--muted: #94a3b8
--accent: #00E5FF
--border: rgba(255,255,255,0.08)
H1: 48–72px / 700 / 1.05 / #f1f5f9
Body: 16px / 400 / 1.625 / #94a3b8
Label: 10–11px / 700 / 1 / #64748b (monospace, decorative)
These values are not approximate. They are the exact computed values from the running academy site. AI provided this MASTER.md will produce output that matches the academy's design language — not because it guessed right, but because it was given no other option.
Now do the codification yourself: take a set of measured values and write the MASTER.md token document, applying the hard-rule overrides where the reference is unsafe on a dark background.
Knox's five live properties each have this kind of extraction done. The indecision.io MASTER.md was extracted from the live site before any AI rebuild work. The academy's MASTER.md was written before the first component. The pattern is consistent: extract → codify → constrain → build.