Prototypes Overview
Prototypes lets you grab a snapshot of a real webpage, hand it to an AI design agent, and iterate on a redesign through a chat interface. Every edit is saved as a version, you can fork from any point, and when you're happy you can copy the result as a markdown handoff document — final HTML, screenshot, and full iteration log included.
What Prototypes Is For
- Iterating on a redesign of a real page — capture a page from your product, marketing site, or a competitor, then ask the AI to apply your direction.
- Testing ideas fast — try a dark theme, a mobile layout, or a content shuffle without touching your codebase.
- Aligning on direction with stakeholders — share a link to a specific version with PM, design, or the CEO.
- Generating a handoff — when an iteration lands, copy the final HTML + chat history as a markdown doc that an engineer can rebuild from.
Info: Prototypes is gated by an unlock page. If you don't have access yet, the
/prototype-unlockroute will give you an access-request form.
How Prototypes Works
1. Install the Chrome extension
The BuildBetter Prototype Capture extension captures any page you visit. Or start from a blank canvas — no capture needed.
2. Capture or create
From the extension, capture the current page. The extension grabs the HTML, inlines all CSS, and embeds images — producing a static mockup you can edit safely. Or go to /prototypes and click New prototype → Blank canvas.
3. Iterate in the editor
The editor opens at /prototype/:id. Talk to the AI on the right; the canvas updates on the left as the agent applies your changes.
4. Browse versions, fork, share
Every edit creates a new version. Browse them in the Iterations strip, fork from any one to explore a variation, or copy a version-scoped link for review.
5. Export for handoff
When the design lands, click Copy as prompt — exports a markdown document with the final HTML, a screenshot, and the iteration log.
Core Concepts
| Concept | What It Means |
|---|---|
| Capture | A snapshot of a webpage at a moment in time. HTML + inlined CSS + embedded assets. Scripts are stripped — captures are static mockups, not live apps. |
| Base version | Version 0 of every prototype — the original capture (or empty HTML for blank canvases). Forks always start from a chosen version, not the base. |
| Iteration | A version produced by one user message + one agent response. Has a patch log of the edits applied. |
| Patch operation | A single change in a version's log — modify, insert, or remove. Replayed in order on every page load. |
| Quick prompt | A pre-written, tuned prompt (e.g., "Convert to dark mode") that inserts into the composer for you to review and submit. |
| Click-to-select | A toolbar mode that lets you click an element in the canvas to scope the next agent message to that element. |
What's Documented Here
-
Install, authorize, capture — and what's captured / what's not.
-
The canvas, the chat sidebar, viewports, click-to-select, version navigation.
-
Quick prompts, the agent's tools (modify, insert, remove, query), what works well, what doesn't.
-
Iterating, jumping back, forking a version into a new prototype, sharing version-scoped links.
-
Copy as prompt — the markdown handoff document you can paste to a developer.
Important Limits
- Captures are static — JavaScript is stripped at capture time. Buttons don't work; forms don't submit; nothing animates. You're editing a frozen page.
- External assets stay external — image URLs in the captured HTML still point to the original CDN. If the original site changes or removes an image, your prototype's image may break.
- Captures don't store sensitive data — passwords, payment fields, and similar inputs are preserved structurally but not auto-filled on reload.
- No script execution — even if you ask the agent to add JavaScript, it won't run in the prototype's iframe. Prototypes are for design iteration, not interaction.