How to export a UI design to a coding agent

A coding agent that builds UI needs two different things from you, and almost every handoff workflow only supplies one of them. The first is the design itself — this screen, these elements, at these positions, in these colours. The second is the design system behind it — which typeface owns headings, what the accent colour is allowed to touch, how much space a card gets, what your product never does. Exports are very good at the first. They carry essentially none of the second.

That gap is why a generated screen so often looks right in isolation and wrong next to the rest of the product. The agent received geometry and inferred everything else from the statistical average of its training data. It is not ignoring your design system; it never received one. We cover that argument on its own in why your agent never got the rules — this guide is about the mechanical half: getting the design across cleanly in the first place.

Whatever tools you use, the design reaches the agent in one of three shapes. Knowing which one you are in tells you what to expect from the output, and where to spend your effort.

• A live MCP connection: The design tool runs a server, the agent connects to it, and the agent pulls a selection on demand. Figma Dev Mode works this way. The design stays in the design tool and the agent asks for it when it needs it, so re-running a prompt picks up whatever changed since. This is the highest-fidelity route when it is available.
• A file export: You render the design to files — HTML, PDF, images — put them somewhere the agent can read, and point at them. Canva works this way, and so does anything without a server. Fidelity depends entirely on which format you pick; the difference between a structured HTML bundle and a PNG is the difference between a document and a photograph of one.
• A handoff bundle: The tool that made the design packages it for the agent while the reasoning is still in context. Claude Design does this for Claude Code. Nothing is re-interpreted from pixels or markup, because the thing assembling the package is the thing that made the decisions.

The three are ordered by how much intent survives, not by how convenient they are. A bundle beats a live connection on intent within a single screen; a live connection beats an export on freshness. All three lose the same thing at the end, which we get to below.

Two of these have a trap worth naming up front. Canva publishes an MCP server, but it connects agents to Canva's developer documentation so they can build Canva apps — it does not hand your designs to an agent. The export path is the real route, and it is covered in Canva to a coding agent. Figma's Dev Mode server, meanwhile, only accepts connections from clients in its own catalogue, which quietly excludes Lovable; the details are in Figma to a coding agent.

Every agent in this space reads a project instructions file before it starts working. Putting the handoff details there — where exports live, which server is connected, what the export format does and does not preserve — means you stop re-explaining it in every session, and so does everyone else on the team.

Note which of those travel with the repository. Cursor and Replit keep configuration in committed files, so a teammate who clones the repo inherits the same design route. Codex keeps it user-level, which means every person sets it up themselves. That distinction decides whether your handoff is a team capability or a personal habit, and it is the main axis in which coding agent handles design context best.

The most common self-inflicted failure is sending too much. A whole Figma page, an entire Canva presentation, a folder of exports — each one arrives as a large structured description that fills the context window before any code is written. The agent then works from a compressed impression of everything instead of a precise reading of one thing.

Select one frame. Build it. Confirm it. Move to the next. This is slower to type and considerably faster to finish, because the failure mode of the alternative is a full rebuild rather than a small correction.

Here is the thing every route has in common. A live connection, an export and a bundle all describe a design that exists. None of them explains a design that does not exist yet. Ask any agent for a screen you never drew — a settings page, an empty state, a billing error — and it has nothing to consult. It infers, and inference drifts.

The information it needs is not in the file, because it was never written down anywhere. It sounds like this:

• Colour roles, not hex codes: Not "#287F71" but "this is the single accent; it appears on primary actions and active states, and nowhere else". A hex code in an export tells the agent what was used once. A role tells it what to do next time.
• Type ownership: Which typeface owns headings, which owns body, which sizes are in the scale — and which sizes are not, so the agent stops inventing a 19px heading between two real ones.
• Spacing and motion values: The actual numbers. A spacing scale and a transition duration are two of the cheapest things to specify and two of the most visible when they are wrong.
• Who the copy is for: Name the audience. "Technical buyers evaluating an on-prem tool" produces different microcopy from "first-time users", and the agent will otherwise pick a generic register.
• The never list: Negative constraints do the heaviest lifting of anything on this list. No gradients on surfaces, never centre body copy, no emoji in product UI — each one closes off a whole family of plausible-looking wrong answers.

Where that lives matters as much as what it says. In a prompt, it works once and is gone. In a repository markdown file, it works for that repository — which is fine until you have four repositories and three clients, and the four copies quietly diverge. What it wants to be is a single source the agent can read on demand, over the same MCP transport it already uses for everything else.

One check tells you whether your handoff moved a design or a design system. Hand the agent a screen through whichever route you set up, and let it build. Then ask it for a screen that does not exist anywhere in the design file — a settings page is the usual choice, because everyone needs one and nobody designs it first.

Compare the two. If the second screen reuses your heading sizes, your accent, your spacing rhythm and your tone of voice, the route carried your system. If it is visibly a different product — new typographic scale, a colour you have never shipped, copy in a register you do not use — then the handoff moved one design, and the rules never arrived. That is a fixable problem, and it is fixed in a different place from the export.