From Prompt to Handoff · Design Canvas in HTML

It started with a familiar kind of tired. Every prototype we handed to engineering was built by hand, and every hand built prototype drifted a little further from the design system. So I taught an agent our design system, then built a place to shape whatever it made. This is the story of turning a prompt into a handoff ready prototype.

Act one, teaching the system

I turned our design system into structured knowledge an agent can actually read: tokens, components, every variant, and the rules for using them. With that as its foundation, the agent writes interactive HTML prototypes that are on system by construction, not an approximation of it. One prompt, and a real multi scene flow comes back wearing the system's own components.

Act two, building a place to shape it

A generated prototype still needs a designer's hand, so I built the place for that: a web editor that loads any self contained HTML prototype and layers selection, inspection, and change tracking on top of it. I click any element and the inspector opens speaking the design system's language: font sizes labelled by the type scale, the spacing scale as presets, the palette as swatches. Scene chips let one file carry a whole flow, state by state, and a feature toggle flips the prototype between variants of the same screen.

Scoped to the selection

The key is not that it edits HTML. Like Figma, the panel scopes itself to whatever is selected: a component offers its variants, text offers the palette and the type scale. Every control maps to a design system token or a component variant, so editing stays inside the system, easily, without overriding anything else.

From edit to handoff

Every change I make is tracked. When the prototype feels right, the editor exports the whole session as a structured change list written for Claude, so the agent can apply the edits back to the source, and engineering receives a clean, readable diff of intent instead of a mystery file. I can also hand a change straight to Claude from inside the editor and describe what I want in plain language.

Why it matters

Prototyping stops being a rebuild and becomes a conversation. Design and engineering read from the same source of truth, so what gets handed off already speaks the system.