Build the design, then go and look

The failure this is for

The agent writes the component. It reads its own source back, confirms the class names say what it intended, and reports that the header is blue with the logo centred. The header renders red and left-aligned, because a parent rule won and nothing in this loop ever displayed a pixel.

This is not carelessness. The agent is generating a visual artifact while reasoning entirely in text, and the only feedback available to it is the text it just wrote. Of course it agrees with itself.

The failure	What it looks like	What answers it
Measuring the design by eye	12px read as "about 14", a shade off	the design as data
Reasoning about pixels in prose	"I have implemented the blue header"	an actual render
Screenshotting too early	compares against a loading skeleton	wait for the page to settle
The match rots	a refactor removes a label, silently	an assertion that re-runs

Data in, render out

The two halves are doing opposite jobs and both are load-bearing.

The Figma server turns the design into numbers. Exact hex, exact spacing, the real type scale, the actual icon files. An agent working from a flattened screenshot is measuring by eye, and 12px read as "about 14" is a drift that lands in every property nobody thinks to check.

The browser turns the implementation into numbers. Not the class names the agent just wrote and can only agree with, but the computed values a real engine produced. Comparing two sets of numbers is a thing an agent is good at. Comparing its own prose to its own intentions is not.

The step people leave out is the last one, which is turning that comparison into something saved. Everybody remembers to look at the screenshot once. Almost nobody makes the next refactor get past it.

There is no visual diff tool here, on purpose

The obvious fifth item is a pixel-diff: something to compare the render against the design and return a similarity score. Its absence is the sort of thing a catalog papers over, so here is the actual reason.

Nothing first-party exists for it. Searching this catalog for pixelmatch, odiff, resemble, percy, backstop and visual regression returns single-digit-star personal forks and enormous skill-dump repositories that bundle thousands of unrelated files. Recommending one of those would be inventing rigour.

The better reason is that the job does not need a tool. The model already has vision. Putting the render next to the design and asking is the entire mechanism, and a similarity score would mostly launder that judgment into a number that looks more objective than it is. What the stack has to guarantee is that the agent looks at all, which is what both items are for.

Where the design lives

This reads the design through a community server rather than Figma's own Dev Mode MCP, and that is a deliberate trade rather than an oversight.

Figma's official server does something this one cannot: Code Connect, which maps the design's components onto the ones already in your codebase, so generated code reuses your button instead of inventing a second one. That is genuinely better output. It also assumes you have already done the Code Connect mapping, and it puts the richer tools behind a beta endpoint limited to an approved client list.

The item here needs a personal access token and nothing else. If your team has Code Connect set up, use theirs; the rest of this stack is unchanged either way.

That last sentence now has evidence behind it rather than just reasoning. The search below found this loop documented with the community server and with Figma's official one, and the browser half is the same in both.

What the search changed

Checked 2026-08-13.

This page had four items. Two are gone.

anthropics/skills — webapp-testing. It was here for the reconnaissance pattern: navigate, wait for the network to go quiet, then capture. The search found it documented as an alternative to Playwright MCP rather than as a layer above it. Running both means running two things that do the same job and calling it a flow. The waiting is real and it is now part of the browser step above, where it belongs.

ChromeDevTools/chrome-devtools-mcp. It was the looking half, on the argument that it and Playwright are opposite philosophies rather than the same item twice. That argument survives contact with the evidence about as well as it deserves: chrome-devtools-mcp does appear alongside Playwright MCP in one recipe, but that recipe uses Figma's official server, not this one, and nothing found anywhere combines the community Figma server with both browsers. Two browser servers in one loop is also the case the friction findings below punish hardest.

Every stack in this directory went through one grounded question: does any public source describe somebody running this combination, rather than these tools individually. What came back for this one was consistent about the shape and specific about the parts:

• Framelink (figma-developer-mcp, this item) with Playwright MCP, describing exactly the read-values-then-measure-computed-CSS loop above.
• Framelink with Playwright MCP again, in a second independent write-up that recommends Framelink specifically for teams without a Figma Dev seat.
• Figma's official server with Playwright MCP.
• Figma's official server with chrome-devtools-mcp.
• Playwright MCP with chrome-devtools-mcp, in a full-stack recipe using the official Figma server.

So: a Figma server plus a browser server is the attested unit. Which Figma server is a real choice, made above. Which browser server is a real choice too, and this page now makes one instead of shipping both.

The risk on the second item, stated plainly

Playwright MCP is the item on this page most likely to be the wrong answer in six months, and the pressure is coming from its own maintainers.

Microsoft ships @playwright/cli and installable skills, and the playwright-mcp README itself now says that if you are using a coding agent you might benefit from the CLI and skills instead. Playwright 1.56 ships Test Agents — Planner, Generator, Healer — via npx playwright init-agents. The stated reason is token cost: the MCP tool list alone was measured at 14.4k tokens before any navigation, and one report describes a sixfold increase in token use since v0.0.32.

This catalog lists MCP servers and skills, and the CLI is neither, which is the same shelf gap that keeps Repomix off the codebase stack. The difference is that here the missing row is the one the tool's own maintainers point at. If you are running a coding agent rather than a test suite, read that README before you install the server.

claude mcp add figma-context -- npx -y figma-developer-mcp
claude mcp add playwright -- npx -y @playwright/mcp