Every hardcoded value now traces to a Figma node, and "looks right" is no longer accepted as proof.
We packaged the fix as a reusable Claude Code skill, implementing-figma-designs
. It turned Figma-to-code from a "build it, then eyeball it against the PNG for three correction rounds" loop into a staged extract-then-prove protocol.
An LLM handed a Figma frame will happily invent a 1px solid #91A3B3
border, size a 24px icon at 28px, and guess the icon→text gap — because a faint border and an off-by-4px value both look correct in a screenshot, so a screenshot-based "does it match?" check passes while the running DOM is wrong.
get_variable_defs
/ get_metadata
/ get_design_context
) per node, or be explicitly flagged as off-system. No value is read off the PNG.orient → classify nodes → confirm component mappings → triangulate code+tokens+geometry → implement
.get_design_context
emits as #EE0F51
gets reconciled back to the project's design token; anything with no token is raised to the designer, not silently hardcoded.<img>
getComputedStyle
against the Figma node value. The screenshot tells you sx
override that loses to .MuiOutlinedInput-notchedOutline
and silently keeps the wrong border while nothing errors).
- <Icon size={28} /> // guessed; node is actually 24
- border: '1px solid #91A3B3' // invented; frame has no border
- // verification: screenshot looks close → PASS (DOM still wrong)
+ // get_metadata(node) -> width/height = 24 → <Icon size={24} />
+ // get_variable_defs(node) -> no border token → frame has NO border → omit
+ // Stage 6, in a real browser:
+ getComputedStyle($icon).width // "24px" ✔ matches node
+ getComputedStyle($toolbar).borderWidth // "0px" ✔ matches frame
+ // PASS only when computed CSS == node value, per element
Figma frame URL
│
▼
[0] resolve to a concrete node ──► [1] orient (PNG = structure only)
│ │
▼ ▼
[2] classify nodes ──► [3] confirm component mappings (human gate)
│
▼
[4] triangulate: get_design_context + get_variable_defs + get_metadata
│ └─ raw hex/px → project token (or flag off-system)
▼
[5] implement from tokens + geometry + real components
│
▼
[6] VERIFY in a real browser: getComputedStyle(el) == node value ?
PASS only per-element, with evidence — not "the PNG looks right"
planning-dev-task
hands off a Figma-linked PRD, and its verification leg (checking-figma-fidelity
) plugs into our test-plan runner as a visual T-<n>
.Want to try it?! Ping me and I'll send the skill over