A stepper built out of progress bars.
That's what Coinbase's agents produced before the team wired up Code Connect — the coding agent, blind to the real component library, invented its own version of a component that already existed. Frontend Engineer Erich Kuerschner ran the same design, prompt, and model with and without Code Connect and watched the agent hallucinate. "Without Code Connect, the agent would sometimes fabricate its own version of components: say, build a stepper out of progress bars," he says.
Hold that scene. We'll come back to it, because it's the tell that unlocks everything else.
Last week this column was still tracking whether Figma's steering-layer bet survives Config 2026. This week the argument has moved on to something more concrete: the MCP pipelines and code-first workflows that are actually shipping, and what they quietly demand of the people who feed them.
Start with the seductive one. An AI-first workflow, demoed to a Paris audience, has designers skip Figma entirely. No static mockup. The designer opens a terminal, not a canvas, spins up a feature branch, and hands Claude Code an instruction against the existing design system.
Out comes production-ready Vue. Realistic Rails API mocks, a live CI/CD preview, a product-focused handoff summary. The developer never laboriously recreates a mockup, because there was no mockup to recreate.
Frame it honestly and it looks like the death of the handoff. The most expensive, most error-prone step in product development — translating a picture into working code — just evaporated.
Except it didn't. Read the demo description again and the load-bearing phrase is "using the existing design system and frontend conventions." The magic works because the machine-readable system was already there, waiting. The designer isn't generating code from nothing; they're composing against a contract that someone built and maintains.
Now put that beside the opposite bet — the one that keeps Figma but instruments it. Figma's Dev Mode MCP server exposes a selected frame's structure, variables, and component graph to an agent like Claude Code or Cursor. The agent reads the design over a protocol instead of squinting at a screenshot.
These two paths present themselves as enemies. Superdesign's honest guide to Figma-in-2026 even frames them as a fork in the road: is Figma your source of truth, or a step you'd rather delete? Skip it, or instrument it.
But look at what each path is actually solving, and the binary collapses.
The skip path works only because the design system is already codified as real components the agent can call. The instrument path works only because Code Connect maps Figma components to those same real components in the codebase. Both routes point the agent at the identical thing: a machine-readable component contract. One stores it as a repo the designer generates against; the other stores it as a Code Connect map the agent queries. Same destination, different filing cabinet.
Figma's own eval numbers show where the quality actually comes from — and it isn't the tool. When they ran design-to-code tasks with the MCP server, then re-ran them with Code Connect templates added, median task duration dropped 19.6%, token usage dropped 29.5%, and code quality rose a full point on a 1-to-4 Likert scale.
Read that carefully. The tool was constant. The agent was constant. The only variable was the connective tissue — the map linking design components to code components. Add the tissue, and quality jumps a full point on a four-point scale. That's not a rounding error; that's most of the range.
The tool was constant. The agent was constant. The only variable was the connective tissue linking design components to code components. Add the tissue, and quality jumps a full point.
So the quality doesn't live in the MCP server. It lives in how ruthlessly you've mapped design decisions to real code.
Here's why Coinbase's stepper matters. Without Code Connect, Figma's MCP hands the agent a plausible React description of what's on the canvas — a `div` with `role="tablist"` and some Tailwind. Visually correct, structurally orphaned. The agent doesn't know that maps to a real `SegmentedControl` in the codebase, so it does one of three things: invents a component, picks the wrong one, or burns tokens flailing toward the right one.
With Code Connect, the MCP response swaps that generic React for a production-accurate snippet — the literal import statement pointing at the correct component. "The agent sees accurate representations of the design as code and literal import statements pointing directly to the correct CDS components," Kuerschner says, and the output quality "vastly improved."
This is the tell that runs through every source. An agent that can't see fabricates. The Lanhu MCP write-up says it plainly: a screenshot doesn't tell the agent whether a group is named `btn-primary-container` or just `Group 452`. Superdesign says it flatly: Claude Code cannot see, so quality is decided by how much real design context you feed it, not by the prompt.
Point a blind agent at a vague prompt and it fills the gap with its training-data average — Inter, a purple gradient, a centered hero. The only cure, everywhere, is structured metadata. Whether that metadata lives in a repo the designer builds against or a Code Connect map the agent reads changes nothing about the requirement.
Which brings us to the uncomfortable part. The handoff didn't disappear. It moved into infrastructure — and the labor moved with it.
The mockup became optional. Organizing files did not. Naming layers did not. Maintaining the component map did not.
Look at what the "skip Figma" designer actually does in that Paris demo: they generate against an existing design system, enforce frontend conventions, mock the API, and write the handoff summary. None of that is drawing. All of it is systems work.
And on the instrument side, the labor is even more explicit. Figma's own guidance is that clean, variable-and-auto-layout files give the agent clean tokens; loose files give it `w-[37px]` to copy. Code Connect coverage is the difference between a stepper and a hallucinated stepper — and in Figma's own eval, their realistic internal design system's MCP responses consisted of about 6% Code Connect snippets versus 20% for the tidy example one. That gap is unglamorous, ongoing maintenance labor that someone has to close.
This is the relocation. The designer who "skipped the design work" didn't shed a job. They took on a heavier, less visible one: authoring and maintaining the contract that makes every downstream generation possible.
That contract is the machine-readable component map — tokens, component APIs, allowed states, the whole schema — and it's authored with the DESIGN.md discipline covered in the sibling piece. Worth the pointer, not the detour.
The seduction of the skip-the-mockup demo is that it looks like subtraction. Fewer steps, fewer artifacts, no more tedious rebuild. And on the surface it is.
But the quality never lived in the mockup. It lived in the contract underneath it. Skip the mockup and you haven't removed the hard part — you've just made it invisible, and handed it to the person who used to get credit for the pretty picture.
Whichever path you pick, the work is the same: map every design decision to real code, ruthlessly, and keep it mapped. Do that, and the agent builds a `SegmentedControl`. Skip it, and it builds a stepper out of progress bars.