Design Token Extraction

An AI-generated mockup is a reference image, not a design system. To build a functional prototype, you must extract the design tokens from the image — the specific values that define the visual implementation.

Extraction methodology: use the research agent to analyze the approved mockup and produce a design token document. Colors: sample the exact hex values used in the mockup. Spacing: measure the pixel distances between elements (element padding, margin between cards, section gaps). Typography: identify the font, size, weight, and line height for each text level. Border radii: measure the corner rounding on cards and buttons. Shadows and effects: describe the glow, blur, and shadow values.

For brand-aligned mockups, the extracted tokens should closely match the design system tokens (tokens.ts). Where they diverge, the design system takes precedence — the mockup was a concept, not a specification. The extracted tokens serve as a bridge: they tell the developer "this is what the mockup looks like" while the design system tells them "this is what it should look like." Discrepancies are resolved toward the design system.