{"slug": "even-with-the-figma-mcp-ai-eyeballs-your-design-and-ships-pixel-wrong-ui", "title": "Even With The Figma MCP, AI Eyeballs Your Design and Ships Pixel-Wrong UI", "summary": "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.", "body_md": "**Every hardcoded value now traces to a Figma node, and \"looks right\" is no longer accepted as proof.**\n\nWe packaged the fix as a reusable Claude Code skill, `implementing-figma-designs`\n\n. 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.\n\nAn LLM handed a Figma frame will happily invent a `1px solid #91A3B3`\n\nborder, 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.\n\n`get_variable_defs`\n\n/ `get_metadata`\n\n/ `get_design_context`\n\n) 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`\n\n.`get_design_context`\n\nemits as `#EE0F51`\n\ngets reconciled back to the project's design token; anything with no token is raised to the designer, not silently hardcoded.`<img>`\n\n`getComputedStyle`\n\nagainst the Figma node value. The screenshot tells you `sx`\n\noverride that loses to `.MuiOutlinedInput-notchedOutline`\n\nand silently keeps the wrong border while nothing errors).\n\n```\n# BEFORE — value read off the screenshot, \"looks right\" == done\n- <Icon size={28} />                 // guessed; node is actually 24\n- border: '1px solid #91A3B3'        // invented; frame has no border\n- // verification: screenshot looks close → PASS  (DOM still wrong)\n\n# AFTER — value traced to a node, proven in the DOM\n+ // get_metadata(node) -> width/height = 24  → <Icon size={24} />\n+ // get_variable_defs(node) -> no border token → frame has NO border → omit\n+ // Stage 6, in a real browser:\n+ getComputedStyle($icon).width         // \"24px\"  ✔ matches node\n+ getComputedStyle($toolbar).borderWidth // \"0px\"  ✔ matches frame\n+ // PASS only when computed CSS == node value, per element\nFigma frame URL\n   │\n   ▼\n[0] resolve to a concrete node ──► [1] orient (PNG = structure only)\n   │                                     │\n   ▼                                     ▼\n[2] classify nodes ──► [3] confirm component mappings (human gate)\n   │\n   ▼\n[4] triangulate: get_design_context + get_variable_defs + get_metadata\n   │        └─ raw hex/px  →  project token  (or flag off-system)\n   ▼\n[5] implement from tokens + geometry + real components\n   │\n   ▼\n[6] VERIFY in a real browser: getComputedStyle(el) == node value ?\n        PASS only per-element, with evidence — not \"the PNG looks right\"\n```\n\n`planning-dev-task`\n\nhands off a Figma-linked PRD, and its verification leg (`checking-figma-fidelity`\n\n) plugs into our test-plan runner as a visual `T-<n>`\n\n.Want to try it?! Ping me and I'll send the skill over", "url": "https://wpnews.pro/news/even-with-the-figma-mcp-ai-eyeballs-your-design-and-ships-pixel-wrong-ui", "canonical_source": "https://dev.to/borisgri/even-with-the-figma-mcp-ai-eyeballs-your-design-and-ships-pixel-wrong-ui-5164", "published_at": "2026-08-14 05:00:00+00:00", "updated_at": "2026-08-14 05:17:02.334356+00:00", "lang": "en", "topics": ["developer-tools", "artificial-intelligence", "large-language-models"], "entities": ["Figma", "Claude Code", "LLM"], "alternates": {"html": "https://wpnews.pro/news/even-with-the-figma-mcp-ai-eyeballs-your-design-and-ships-pixel-wrong-ui", "markdown": "https://wpnews.pro/news/even-with-the-figma-mcp-ai-eyeballs-your-design-and-ships-pixel-wrong-ui.md", "text": "https://wpnews.pro/news/even-with-the-figma-mcp-ai-eyeballs-your-design-and-ships-pixel-wrong-ui.txt", "jsonld": "https://wpnews.pro/news/even-with-the-figma-mcp-ai-eyeballs-your-design-and-ships-pixel-wrong-ui.jsonld"}}