> ## Documentation Index
> Fetch the complete documentation index at: https://docs.buildbetter.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Prototypes Overview

> Capture any webpage, redesign it with AI assistance, and iterate through versions — then export a handoff document for your engineering team

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-unlock` route will give you an access-request form.
</Info>

## How Prototypes Works

<Steps>
  <Step title="Install the Chrome extension">
    The [BuildBetter Prototype Capture](https://chromewebstore.google.com/detail/buildbetter-prototype-cap/kihlicnbekcikoblemfkcpciljdofaai) extension captures any page you visit. Or start from a blank canvas — no capture needed.
  </Step>

  <Step title="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**.
  </Step>

  <Step title="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.
  </Step>

  <Step title="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.
  </Step>

  <Step title="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.
  </Step>
</Steps>

## 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

<CardGroup cols={2}>
  <Card title="Chrome Extension" icon="chrome" href="/pages/Prototypes/chrome-extension">
    Install, authorize, capture — and what's captured / what's not.
  </Card>

  <Card title="Editor" icon="pen-ruler" href="/pages/Prototypes/editor">
    The canvas, the chat sidebar, viewports, click-to-select, version navigation.
  </Card>

  <Card title="AI Editing" icon="wand-magic-sparkles" href="/pages/Prototypes/ai-editing">
    Quick prompts, the agent's tools (modify, insert, remove, query), what works well, what doesn't.
  </Card>

  <Card title="Versions & Forking" icon="code-branch" href="/pages/Prototypes/versions-and-forking">
    Iterating, jumping back, forking a version into a new prototype, sharing version-scoped links.
  </Card>

  <Card title="Handoff Export" icon="file-arrow-down" href="/pages/Prototypes/handoff">
    Copy as prompt — the markdown handoff document you can paste to a developer.
  </Card>
</CardGroup>

## 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.