|Design-to-code export, one way

What comes out

Six targets, from the same document, each answering a different question:

• +HTML and CSS — a standalone page, no build step.
• +React as TSX — components, typed, ready to drop into a project.
• +Plain JSX — the same, without the types.
• +Tailwind — utilities instead of a stylesheet, when that is the codebase’s convention.
• +JSON — the raw document, for anything else you want to do with it.
• +PNG — a capture of a page or a single node.

Deterministic means reviewable

The same document produces the same code every time: no model in the loop, no sampling, no rewriting. That sounds like a modest property and it is the one that makes export usable in a real workflow.

Because it is deterministic, you can export twice and read the diff, and the diff is exactly the design change — not a differently-worded version of the same markup. That makes export something you can run repeatedly instead of once at the end.

Why it does not come back

Round-tripping is the feature everyone asks for, and it fails for a structural reason rather than a difficulty one. Code holds things a design cannot: state, conditionals, data, event handlers, imports. To read code back into the document, the document would have to store all of it — at which point it is not a design document, it is a worse code editor with a canvas attached.

The alternative is to parse code back and drop what does not fit, which silently deletes work. One-way is the version that does not lie about what it does.

How to actually work with it

Treat the export as a build artifact, and the document as the source. When something about the design changes, change the design and export again. When something about the application changes — data, logic, wiring — that lives in your code and was never the design tool’s.

The seam usually falls in a natural place: the exported component is the presentational layer, and the code around it supplies the props. That way re-exporting replaces the part that is generated and leaves the part that is yours.

Motion comes with it

Transitions, keyframe animations, and hover, press, and focus states are part of the document, so they are part of the export — as CSS, generated from the same source the editor renders from. A hover that lifts a card on the canvas is the same rule in the download, and every generated stylesheet ends with a prefers-reduced-motion block that turns it all off.

Questions