Closing the gap between design and code, with Figma MCP and Playwright MCP
For a while, we kept hitting the same wall with AI coding assistants on UI work. The output looked roughly like the design, but rarely matched it. Spacing was approximated. Tokens got reinvented. Components drifted from their Figma definitions. Product owners flagged the gaps, sent the work back, and another round of corrections followed.
What changed
MCP, the Model Context Protocol, lets AI assistants talk directly to other tools. Until recently, an assistant on a UI task had only what we pasted into the prompt. It couldn't see the Figma file. It couldn't open a browser to check its own work.
A developer would never work that way. They write some markup, switch to the browser, notice the heading is too tight against the card edge, fix the padding, look again. Implement, check, correct. AI assistants did the opposite: one shot, hand it over, leave the checking to the developer.
Figma MCP gives the assistant the design source directly: tokens, spacing, typography, component structure. Playwright MCP gives it a browser to navigate to the implementation, screenshot it, and compare against Figma. The assistant now works the way our developers work. By the time a developer reviews the output, the obvious gaps have already been closed.
Why the design system matters
The biggest lever is having a design system in code that mirrors the Figma one. When the same tokens and components exist on both sides, the assistant stops translating and starts mapping. It sees a Button variant in Figma and reaches for the matching Button in the codebase. It pulls the spacing token by name instead of hardcoding a pixel value. The output fits the codebase the first time.
What it means for projects
Component sets that used to take a developer a focused day or two now land in roughly half that, with fewer corrections coming back from review. Estimates hold up better. Design fidelity is higher on first delivery. Revision cycles compress.
We're using this approach across most of our active client work. If the Figma-to-production gap has burned you before, we'd be glad to talk.
TL;DR
AI assistants used to produce UI that looked roughly right but rarely matched the design, triggering repeated review rounds. By connecting the assistant to Figma (via Figma MCP) and a real browser (via Playwright MCP), it now iterates the way our developers do: implement, check, correct. UI work is faster, more accurate on first delivery, and more predictable to estimate. A design system mirrored in code is what makes it work.