The design and the codebase are in one window.

Why one HTML file is the right output

Tools that emit React components produce code shaped by their assumptions, not your project's: their state approach, their styling library, their component boundaries. In an existing codebase that is usually more work to reconcile than to reimplement. A plain HTML page makes no claim about your architecture, which makes it a better specification and an honest one.

Three ways out

Export the HTML, export a clickable prototype that walks through several pages, or open the page in Chrome to check it in a real browser. The prototype is the one to send to someone who needs to click through a flow rather than read a page.

The agent already has the context

Because it is the same window and the same repository, an implementation turn starts with the project's existing conventions available rather than with a design file and no idea what it is being built into. That is the part a hosted design tool structurally cannot offer, since it has never seen your code.

And the diagram side of the same idea

This is the design-tab version of what the Diagram tab does with architecture: draw the thing, then hand it to the coding agent as a specification. Same shape of handoff, different artefact, which is the through-line for the whole product.

Related

• Responsive Preview at Mobile Width
  Stated plainly because the buttons imply more than they do: these are viewport widths, not platforms.
• AI Landing Page Design
  A real page you can open and click, not a picture of one.
• Wireframe to High Fidelity
  A finished-looking mockup gets reviewed as a design. A rough one gets reviewed as a structure.
• Click to Edit an AI Design
  The difference between iterating and rerolling.