Two Agents, One Figma Frame (Codex Pending)

Design data beat a screenshot, case closed? For one model. Tonight, two more.

Four terms first. Design context: the code-shaped description of a frame that Figma's MCP server hands an agent. A headless run: Claude Code started from one command, no chat window, that works and exits. A property match: one of twenty-seven measured values — size, color, font, radius — equal to Figma's. And Codex, OpenAI's coding agent, which did not run tonight.

The setup: one Figma frame, the study card from an earlier film, with the same three files it produced — Figma's render, design context, and variables — and the same prompt, word for word, sent to two Claude models: Opus and Sonnet 5. One change was forced: the brief named Opus 5.5, but this copy of Claude Code refused that model, and updating the tool overnight with four other agents building on it wasn't the right call — so the older Opus 4.7 stood in, with Sonnet 5 running as named. Each agent could read, write, and edit files — nothing else, no browser, no Figma, no way to check its own result. Both claimed their card matched. Neither had looked.

Checked pixel by pixel against Figma's render: Opus differed on 3.6% of pixels, Sonnet 5 on 4.6% — both well under an earlier build's 9.3%. The remaining difference is just font rasterizing; the image block matches to the pixel in both. Scoring 27 measured properties: Opus hit 27 of 27, Sonnet 5 hit 27 of 27 — up from an earlier build's 26 of 27. That earlier miss, a button stretched to the card's full width, didn't come back; both new builds hugged the button to its label at 127 pixels against Figma's 129.

Where the two models actually differed: tokens — the file has two real color variables; Sonnet 5 declared two, Opus declared five, inventing three extra for colors that are plain hex in the file — right values, wrong structure. Fonts — Opus linked Inter from the web, needing network access; Sonnet 5 named Inter but shipped nothing, looking right only because the test machine had Inter installed, even though the prompt asked for self-contained output. Page wrapping — nobody asked for one, but Opus added 32 pixels of padding and a background, Sonnet 5 added 40 and a different one; that padding cost Opus two points under a strict test in a window sized to the card itself, squeezing it to 296 pixels wide — given room, it scored 27.

Cost and time, at list price under the account owner's login, not charged money: Opus, 32 cents, 28 seconds; Sonnet 5, 17 cents, 16 seconds; an earlier Sonnet build, 14 cents, 29 seconds. Codex — the title's other half — didn't run tonight; it's kept off the automated film loop and run separately by hand, with the same prompt, files, and scoring script. That comparison is still pending.

On the question in the title — do two agents read the same design differently — the answer for the full three-way comparison is pending. On the two Claude models tested: strong agreement wherever the data decides (27 of 27, both), and clear divergence wherever it doesn't — tokens, fonts, page wrapping. The frame's data is the spec; the gaps between agents map exactly what that spec leaves out.

Your Turn: Paste into Claude: "Here is Figma's design context for one frame: [paste it]. Build it as one self-contained HTML file. Then list two things: every value you took from the data, and every choice the data didn't make for you." Then check two things yourself: run it twice, with two models, and diff the two lists, and confirm every invented choice shows up on the second list, not hidden in the code.

Sources and citations: see the reel's SOURCES.md in the open textbook. An independent series, not affiliated with or endorsed by Figma.

0:00 Introduction: four terms 0:27 The setup: one frame, two Claude models Pixel scores, token structure, fonts, and page wrapping 3:23 Your Turn

Series: Figma for Educational AI. @NikBearBrown

Deliberately Not Claimed

This video compares two Claude models (Opus and Sonnet 5) on one frame, one prompt, one run each, and explicitly leaves the full title question — how agents across providers read the same design — pending, since the planned Codex comparison did not run in this session. It does not claim these specific pixel-match or property-match percentages generalize to other frames, prompts, or model versions. Cost and timing figures reflect one specific session under one account's list pricing, not a benchmark.

SEO Keyword Tags

Claude Opus vs Sonnet, Figma design context comparison, Claude Code model comparison, AI model design fidelity, Figma MCP two models, headless Claude Code test, design token AI generation, AI font handling comparison, Claude Code cost comparison, Figma education experiment, Codex vs Claude, AI coding agent divergence, design context gaps, pixel diff AI models, Figma MCP server experiment

What this video covers

• 0:00 — Introduction: four terms 0:27 The setup: one frame, two Claude models Pixel scores, token structure, fonts, and page wrapping 3:23 Your Turn

Transcript

A lightly formatted transcript of the video, with timestamps so you can jump to any section on YouTube.

Introduction: four terms 0:27 The setup: one frame, two Claude models Pixel scores, token structure, fonts, and page wrapping 3:23 Your Turn

[0:00] Yasu, this is Liam in for Bear. Design data beat a screenshot, case closed. For one model tonight, two more. Four terms: design context, the code shape description of a frame that Figma's MCP server hands an agent. A headless run, Claude code started from one command with no chat window that works and exits. A property match, one of 27 measured values, a size, color, font, or radius equal to Figma's. And Codex, which is OpenAI's coding agent. It did not run tonight. The setup, one Figma frame, the study card from film three. The same three files it produced, Figma's render, its design context, and its variables. The same prompt word for word sent to two Claude models, Opus and Sonnet 5. Nothing else changed. One change was forced. The brief named Opus 5.5. This copy of Claude code refused that model, and updating Bear's tool overnight with four other agents building on it wasn't mine to do. So, the older Opus 4.7 stood in. Sonnet 5 ran as named.

What each agent could do: read files, write files, edit files, nothing else. No browser, no Figma, no way to look at its own result, same as film three. Both said their card matched, neither had looked. Both cards next to Figma's render, pixel by pixel. Opus differs on 3.6% of pixels, Sonnet 5 on 4.6. Film three's build on 9.3. All the difference left is the font rasterizing. The image block matches to the pixel in both. The scoring sheet, 27 properties, every size, color, radius, font, and weight read from each page as it rendered. Opus 27 of 27. Sonnet 5 27 of 27. Film three's Sonnet got 26. Last time, single miss was the button stretched to the card's full width. It didn't come back. Both new builds hugged the button to its label, 127 pixels against Figma's 129. The two pixels are the browser's font. Now, where they differ. First, tokens. The Figma file has two color variables. Sonnet 5 declared two, Opus declared five, the two real ones

Plus three it invented for colors that are plain hex in the file. Right values, wrong structure. Second, the font. Opus linked Inter from the web, so its file needs a network. Sonnet 5 named Inter and shipped nothing. Its card looked right only because this Mac has Inter installed. The prompt said self-contained. Each read that differently. Third, the page. Nobody asked for one. Opus wrapped the card in 32 pixels of padding and a background. Sonnet 5 40 in a different one. And that padding cost Opus two points under Film 3's exact method. In a window the card's own size, its card squeezed to 296 wide. Give it room and it's 27. Cost and time as the command line reported them at list price under Bear's login, not money charged. Opus 32 cents, 28 seconds. Sonnet 5 17 cents, 16 seconds. Film 3's Sonnet 14 cents, 29 seconds. Then there's Codex. It's in the title and it didn't run. Bear keeps Codex off the film loop, so the Codex

Run is his at his desk. The same prompt, the same three files, then the same scoring script. That is the deciding half of this experiment. The question then, do two agents read the same design differently? On the question in the title, pending. On the stand-in two Claude models, strong. Wherever the data decides they agree, 27 of 27 each. Wherever it doesn't, they diverge. Tokens, fonts, the page. The frame's data is the spec, and the gaps between agents are a map of what it leaves out. Your turn. Paste this into Claude. Here is Figma's design context for one frame, then paste it. Build it as one self-contained HTML file. Then list two things: every value you took from the data and every choice the data didn't make for you. Then check two things yourself. Run it twice with two models and diff the two lists. And is every invented choice on the second list not hidden in the code? Two agents, one frame, Codex pending at Nick Bear Brown.