Handoff Export

When a design lands and you want to ship it, the Copy as prompt export turns the prototype into a markdown handoff document. Paste it into a PR description, a doc, or an AI coding tool and an engineer can rebuild the design in your production framework.

What's in the Export

The markdown document contains:

• Final HTML snapshot — the prototype's current state with inlined stylesheets, suitable for copy-paste reference
• Screenshot — embedded as a data URL so it renders inline in any markdown viewer
• Full iteration log — every user prompt and a summary of the agent's actions per turn (modifications, insertions, removals, queries skipped)
• Implementation notes — boilerplate reminding the reader that the prototype is a static mockup and must be rebuilt using your production framework's components and design system

How to Export

1. Make sure you're on the latest version

The Copy as prompt option is disabled when viewing an older version — use Back to latest → in the Iterations strip first.

2. Open the Share menu

Click the upload icon in the chat sidebar header (top-right).

3. Click 'Copy as prompt'

The markdown document is generated and copied to your clipboard. A toast confirms.

4. Paste it where it's useful

A PR description, a Notion doc, a Linear issue, a chat with your engineer, or directly into an AI coding tool like Cursor or Claude.

What Engineers Should Know

When handing off, mention these caveats:

• The HTML is a static mockup. Don't copy it into production verbatim — rebuild using your component library, design tokens, and accessibility patterns.
• External images. The image URLs in the export point to the original captured site's CDN. Replace with assets from your own asset pipeline.
• No JavaScript. The prototype demonstrates layout and visual design only. Interactivity, animations, and data fetching are out of scope.
• The iteration log is the why. Engineers building from the export can read the chat to understand which decisions were intentional vs. incidental.

Alternative: Copy Link

If your engineer is in BuildBetter, they don't need the export — they can open the prototype directly. Use Copy link in the same Share menu for a quick share that preserves the live editor.

Use the export when the recipient:

• Doesn't have BuildBetter access
• Wants to feed the design into an external AI coding tool
• Needs the design archived in another system (Notion, Linear, GitHub)

A Note on Iteration History

The export includes the full iteration log — every prompt and agent action. This is intentional. It captures:

• Intent — what you asked for at each step
• Decisions — what the agent chose to do
• Direction — how the design evolved from capture to final state

For complex designs, this context is as valuable to the engineer as the HTML itself.

Tip: If you want a cleaner export focused on the final state without iteration history, copy the HTML directly from your browser's DevTools while viewing the latest version — but you'll lose the "why" that the iteration log provides.