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.

The Problem

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.

How we solved it