Even With The Figma MCP, AI Eyeballs Your Design and Ships Pixel-Wrong UI

A developer has created a reusable Claude Code skill, 'implementing-figma-designs', that transforms Figma-to-code conversion from a screenshot-based eyeballing loop into a staged extract-then-prove protocol. The skill ensures every hardcoded value traces to a Figma node and verifies the implementation in a real browser by comparing computed CSS styles to node values, eliminating pixel-wrong UI caused by LLM guesses.

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 . BEFORE — value read off the screenshot, "looks right" == done - <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 AFTER — value traced to a node, proven in the DOM + // 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