Build design

This skill turns a design into code that matches it. It reads the design at its source, builds with what the project already has, then compares the result against the design before calling it done.

The design decides. Values come from the design file, never from your taste or a pattern you liked elsewhere. A change the design does not show is a deviation, and a deviation is the user's call.

It owns no domain rules. Where the design breaks one, build it as designed and report the conflict with its owner. Contrast is a requirement in better-accessibility and a measurement in better-colors. Focus and semantics are better-accessibility, type is better-typography and spacing and structure are better-layout. Palette is better-colors, copy is better-writing and surfaces, icons and motion are . Reviewing finished work is , exploring alternatives is and stress testing a component is .

In the design	In code
A bound variable or style	The token with the same name or the same value
A raw value that equals a token	That token
A raw value with no token	The nearest existing token, listed in the report as rounded
A component instance	The project's component of that name, with the variant the design shows
A component instance with no project equivalent	Plain markup in place, listed as a deviation, and ask whether a component should exist
A one-off group of layers	Plain markup in place, not a new component

Element	Design	Built	Status
Card padding	20px	`p-5`	Matches
Title size	15px	`text-sm`, 14px	Rounded to token
Badge	Filled pill	Text label	Deviates, asked: no badge component exists

You notice	Fix
"Figma isn't connected" written before any tool search	Search the tools for `figma` first
Values in code that appear in no Figma response, only in the screenshot	Read them from the design context
An arbitrary utility such as `w-[343px]` or a raw hex in the diff	Map it to a token, or ask if rounding shows
A new file under the components directory for a frame that is not a component	Inline it as plain markup
A loading or error branch the design never drew	Remove it, keep the default and list it as missing
Files in the diff that no frame touches	Revert them
A contrast or focus change the design does not show	Restore the design and report the conflict with its owner
A comparison claimed with no screenshot of the build	Render each frame width, or say it is unverified
Hard-coded sample data with no mention in the report	List it under Unwired

Build Design

Build design

1. Read the design at its source

2. Map the design onto the project

3. Build only what the design shows

4. Compare against the design

5. Report and stop

Before you finish