If you're shipping static sites, or building on a standard design system, the Figma MCP server is probably doing great work for you, and you can skip this one. This is for the people who have hit the friction: anyone trying to make the design-to-code pipeline more modular, maintainable, robust, and tool-agnostic, and get better code out the other end.
I started writing this as a takedown.
The plan was simple: Figma-to-code is overhyped, the demos are slick, and on most teams the reality is a mess. I was going to show you how bad it gets: the hard-coded colours, the components the model invents, the output that looks right until you actually read it.
Then I came across monday.com's design-to-code pipeline1, and I was genuinely impressed.
What monday showed me is that it can be done well, even if a developer is still cleaning up the code behind the demo.
The closer I looked, the more the piece stopped being about tools at all. The tools, the pipelines, the pricing, all of it keeps shifting. But underneath that noise is a quieter shift, the one I did not expect and cannot stop thinking about: a change in who actually does the work, and, perhaps more importantly, who owns the decisions the tools quietly make for us. That is where this ends up, and I think it raises deeper questions about code quality and responsibility.
On the surface, it looks settled
Point a large language model at a Figma file through an MCP server, and it hands you back components. That is the pipeline the whole industry is converging on. Design happens in Figma; the code gets generated by a small set of AI agents: Copilot, Cursor, Claude Code, Codex.
That convergence is real, and the numbers behind it are lopsided. Figma is the default surface, named by 82.3% of designers as their primary UI-design tool.2 Its own codegen feature, Figma Make, is already used weekly by around 60% of Figma customers who spend over $100k a year.3 The inputs are consolidating onto one tool.
So is the format. Design tokens reached their first stable standard, DTCG, in late 2025, backed by roughly two dozen of the largest names in the field: Adobe, Google, Microsoft, Meta, Amazon, Figma.4 The build tooling is adopting it. Style Dictionary,5 the most widely used token transformer, now ships first-class DTCG support. Smaller tools like Terrazzo6 are DTCG-native, built around the format from the start. Google publishes DESIGN.md,7 a way to describe a design system to a coding agent. Everyone is pointing the same direction. Even Figma backs the standard. A widely used community token plugin for Figma, Tokens Studio,8 reads and writes the DTCG format too. The incumbent is lining up behind an open format that makes its own tool easier to leave.
From a distance, the problem looks solved. One tool for design, a converging standard for tokens, a handful of capable agents to write the code. Call this the shift everyone already noticed: the tooling converged. Settled.
Then you actually run it
Point an unscaffolded model at a real Figma file and the output is plausible until you read it. It reaches for components that are not in your system, hard-codes colours that should be tokens, and mixes conventions across versions (Tailwind v3 patterns dropped into a v4 project).9 Sometimes it invents CSS outright, a value like fit-parent that no browser understands.10 This is not a skill problem or a bad prompt. It is what the naive pipeline does, to everyone.
Figma says so itself. Its own MCP setup guide11 is blunt about the limit: without Code Connect linking your Figma components to your real code, "the model is guessing." Coming from the vendor of the design tool itself, that admission is worth more than any third-party benchmark.
Why does it guess? Because the file hands it a bare value with no meaning: a FLOAT of 10, with nothing to say whether that is ten pixels, a z-index, or ten milliseconds. I dug into that failure in I wrote about before, so the model fills it in.
You do not have to take my word for it. When Yi Gui and colleagues built Figma2Code,14 a benchmark for turning real Figma files into code, the strongest proprietary models produced visually faithful output but stayed weak on layout responsiveness and maintainability, because they map the primitive values straight out of the Figma metadata without recovering the structure. Faithful pixels, guessed architecture.
If this were a prompting problem, the vendor that owns the entire stack would have solved it. Figma didn't. Figma Make, its own generator, produces standalone code by default; to make it build against your design system, you first have to author "Make kits"15 that package your components, tokens, and guidelines so the generator has something real to work from. So even the company that owns the whole stack cannot make its generator fit your design system for you. It hands you some tooling, but as it stands today that tooling is thin. You still author and maintain the kits yourself, and that is not free. It is real, ongoing work, heaviest on the small or mid-size team just trying to get up and running. Worse, those kits are Figma-specific, so the effort ties you tightly to one vendor instead of leaving you portable.
None of this is a technical wall. DTCG is a standard, and any model can read agnostic tokens from any system that exports them cleanly. What keeps you locked in is not the tech; it is that every vendor has a reason to keep you inside its walls. That could change. Right now it has not, and that is the tell. The problem is not the prompt. It is the architecture.
What monday built instead
The teams I've seen who have solid design-to-code pipelines stopped tinkering with prompts and rebuilt the pipeline itself. The team at monday.com hit exactly this problem, and instead of prompting harder, they built the sharpest version of the standard pipeline I have found anywhere publicly. It is not a new kind of thing. It is a far better-engineered version of what everyone is already reaching for: a real multi-agent pipeline, and a simple but effective workaround for the token problem. Their engineering team wrote it up1: the naive version failed the same way it fails everyone. "The problem wasn't that the model was bad," they note. "It's that the model had no understanding of what the design system actually was... Without that context, it guessed." So they gave it the understanding.
There is one detail that amuses me. Figma hands over bare values (the FLOAT 10 problem from earlier), so monday makes the spacing and token values visible inside the design itself, laid out for the model to read. The spec, they say, is written for AI, not for a person.16 It is a workaround for sure, not elegant. However, sometimes the low-tech fix is the easiest one, even when the rest of what they built is this advanced.
The shape is a pipeline of eleven small nodes, each with one job, orchestrated with LangGraph. It pulls the raw design out of Figma, then resolves it: raw values become semantic tokens, components get matched against the real library, examples get retrieved. What comes out the far end is not code. It is structured context, everything the model needs to know about the design, handed to whatever agent the developer already runs in Cursor.
That last choice is the clever one. Internally, monday runs hundreds of microfrontends on different React and design-system versions, so forcing a single generated code style would break ownership. By returning context instead of code, they kept the codegen model-agnostic and left authority with each team. They even exposed the whole agent as an MCP tool, so from Cursor's side it is just another tool call. In their words, this is "orchestration, not magic."1
There is a second thing I appreciate, further down the flow. What the developer ends up with is not a bare component but a full Storybook entry. The stories, the tests, and the documentation are generated alongside it, and the props table is drawn from the real component rather than filled in by hand.17 The deliverable is a documented, tested component, not code that merely renders.
It works for one reason: someone owns the resolve step that almost everyone else leaves to chance. It also took a mature design system to resolve against, a dedicated pipeline, and the engineers to build and run it. Hold onto that, because it is where the story turns.
Where even monday stops
For all that, it is still not hands-off. The honest part is that they say so themselves.
In their walkthrough talk,18 Elad Mizrahi, monday's design-systems lead, puts the number at 70 to 90 percent of a component's code generated, higher for the simple ones, lower for the complex, and then "our developers take it from there." Impressive, and a long way from automatic. Someone still writes the last 10 to 30 percent.
Notice what that number costs, too. The 70 to 90 percent is what a mature design system, a dedicated pipeline, and a team of engineers buys you, not to mention an AI bill they have never put a number on. It is the ceiling for the best-resourced setup in the room, not the starting line for everyone else.
One of Mizrahi's observations points ahead. The model does better on new components than on edits to old ones.19 He does not say why. My guess is that the old components carry incomplete recorded reasoning to edit against, so the model is back to guessing what the original decision was.
You can watch the ceiling on camera. Asked to flip a component to an inverted colour scheme live, the model missed; he fed it an example; it missed again. This component, he explained, "we need to do some overrides to make it work," and he was candid: "when you show it to somebody it's not always working."20 So he fixed it himself, by hand, applying the override the model could not. The pipeline got him close; a person closed the last gap.
Even with its faults, you could argue this will only keep getting better with time. The real strength here is not the last mile of code; it is the shape of the multi-agent pipeline and the guardrails and rules they have built around their ecosystem. Every feature still gets a manual design review and a manual code review; the changes "still need to be approved by a person." As he puts it, "we don't want to just rely blindly on AI."21 This is a very good head start, not an autopilot.
The wall isn't a monday problem
The wall is not a monday problem. The same ceiling shows up across setups that could not be more different. At Shopify, designers prototype in a code-connected clone of the actual admin. A designer there described the handoff plainly: the generated code gets an engineer to about 80 percent,22 and the rest is the tightening, the internationalization of strings, the polish, the slop code, the parts that are not production-aligned. At Ramp, a designer using an off-the-shelf prototyping tool with rough approximations of the design system gets to about 70 percent, then goes back into Figma for the real handoff.23 Line the self-reported numbers up and they cluster tight: monday's 70 to 90 percent,18 Shopify's 80, Ramp's 70. Optimistic, self-reported figures.24 Whether it is monday's bespoke pipeline or Ramp's off-the-shelf tool, the number lands in the same place.
There is a stranger shift buried in those setups. Here is what I expected. With seemingly every company now hiring full-stack developers, I assumed the developers would be the ones vibe-coding the UI, reaching for AI to get their own work done faster. What I found is the reverse: it is the designers building the prototypes, and the dev team reuses and finishes them. That inversion blurs the line between designer and developer, the same pendulum I , a codegen, a way to record the decisions? Tell me about it in the comments. A decoupled system comes together one part at a time. I would like to build it with you.
Further reading
A few of the people and teams whose work informed this piece, or who are circling the same problem, all worth following:
, , The Design System Guide, on agentic design systems and the 158-system study.
, on designing Figma files a machine can actually read.
, the case study at the centre of this piece.
, on giving an AI agent a typed, validated token contract to build against.
" ↩
UX Tools 2024 Design Tools Survey, interface-design segment, where Figma leads at 82.3%, roughly 46:1 over Sketch. and . ↩
Terrazzo is a DTCG-native design-token toolchain: its CLI is "for managing design tokens using the Design Tokens Community Group (DTCG) standard and generating code for any platform via plugins" (
@terrazzo/cli). . ↩
Tokens Studio for Figma (300k+ users) is a community plugin for managing design tokens; it supports the W3C Design Tokens Community Group (DTCG) format. . ↩
AI models routinely apply Tailwind v3 conventions to v4 projects; Tailwind documents the breaking changes in its upgrade guide (). The hallucination is documented in Shahid Pattani, "Design-to-Code AI Is Not Magic." ↩
Figma's MCP server setup guide: "Link components to your codebase via Code Connect. This is the best way to get consistent component reuse in code. Without it, the model is guessing." ). Either way, this is the token-export path, separate from what the Figma MCP hands a model when it reads a component to generate code. I dug into the underlying variables data model in " ↩
Yi Gui, Jiawan Zhang, Yina Wang, Tianran Ma, Yao Wan, Shilin He, Dongping Chen, Zhou Zhao, Wenbin Jiang, Xuanhua Shi, Hai Jin, and Philip S. Yu, "Figma2Code: Automating Multimodal Design to Code in the Wild" (arXiv 2604.13648, ICLR 2026). Benchmarking ten leading models on real Figma files, they find proprietary models achieve superior visual fidelity but stay limited in layout responsiveness and code maintainability, mapping primitive visual attributes straight from the Figma metadata. . ↩
Same walkthrough: the spacing and token values are surfaced inside the design for the model to read, a spec written for AI rather than a person, "instead of writing for a person we write for AI... all the spacings are visible. It helps the AI to see the spacing in cursor" (); "at the end of the flow it's creating all the stories all the tests for the developers" (). ↩
Elad Mizrahi, monday.com's design-systems lead, Sneak Peek walkthrough: 70 to 90 percent generated, then "our developers take it from there" (). The reason is my own hypothesis, not his. ↩
Same walkthrough, the live colour-flip stumble: "we need to do some overrides to make it work" (). ↩
Same walkthrough: changes "still need to be approved by a person" (). ↩
Shopify product designer Kazden Cattapan, Sneak Peek: a code-connected clone of the admin; generated code gets an engineer to about 80 percent () left over. ↩
Ramp product designer George Visan, Sneak Peek: asked what share of the design he targets in Magic Patterns, "0 to 70ish", then "I am going back to Figma" for the real handoff (). ↩
These are each team's own numbers, and self-reported bests round up, so read them as a ceiling, not a measurement. ↩
Generate-from-scratch tools named here: v0 (), Bolt (), Anima (). Code Connect is covered in the MCP note above. ↩
Canvas-as-code tools named here: Subframe (). ↩
Christine Vallaure, on designing Figma files a machine can actually read. . ↩
Romina Kavcic, on self-healing design systems: "when a human expert fails, they come back with a reason... with agents, 25 failures land on your desk, and none of them come with insight. No ownership, no explanation, no learning." Also "AI cannot fix taste." ↩
Romina Kavcic, ". ↩
Twilio's Paste, an open-source design system. . ↩
On AI coding tools priced below what it costs to serve them: Ed Zitron, "", on the subsidy mechanism. Framing, not hard numbers; the hard figures are the xAI-versus-revenue gap below. ↩
Menlo Ventures: in surveys of technical leaders, Claude led code generation at roughly 42% share versus OpenAI's 21% by mid-2025 (""), driven by Claude Code. ↩
Per SpaceX's SEC S-1 filing, Anthropic committed to pay xAI about $1.25 billion a month for compute through 2029, after a two-month discounted ramp (reported by TechCrunch, 20 May 2026). ↩
Anthropic CFO Krishna Rao, sworn declaration (9 March 2026) in Anthropic's suit against the U.S. Department of Defense (now the Department of War; N.D. Cal. No. 3:26-cv-01996), stated the company's revenue to date exceeds $5 billion. " (30 June 2025): "AI data centers, like telecom fiber before them, are highly capital-intensive, and the long-term returns remain speculative." ↩
GitHub moved Copilot to usage-based billing effective 1 June 2026. for current prices. ↩
The dominant design tool has turned over twice in about fifteen years, Photoshop to Sketch to Figma; Sketch peaked near 70 percent around 2017 and fell below 2 percent by 2024. ↩
"Design Engineer" is not my term. Its use for the design-and-engineering intersection traces at least to Natalya Shelburne's 2019 talk "CSS at the intersection"; David Luhr collects the lineage in "The Origins of Design Engineering" (Brad Frost's related "front-of-the-front-end", 2021, is a distinct term). ↩
SOCIAL SHARE CARD GENERATOR