Prototypes
Every shipped Prototypes control: index create, editor chrome, Wayback, Figma, brand match, handoff, apply/fork, code export, chat, and sidebar.
Prototypes is a UI design workspace: chat with the UI agent against a captured product screen (or Figma import), edit in preview or code, then hand off to a coding agent. It is not the core analytics loop.
| Route | Role |
|---|---|
/projects/:id/prototypes | Index empty state → create |
/projects/:id/prototypes/new | Create entry (often redirects into a new id) |
/projects/:id/prototypes/:prototypeId | Editor |
Editor query params
| Param | Role |
|---|---|
?c= | Conversation id within this prototype |
?day= | Wayback calendar day |
?snapshot= | Specific capture snapshot |
?route= / ?viewport= | May appear when selecting screens (server restore) |
Index empty state
| Element | Copy / behavior |
|---|---|
| Illustration | Prototypes illustration |
| H2 | No prototypes yet |
| Body | Start a prototype to chat with the UI agent and edit a captured screen in real time. |
| New prototype | POST /api/projects/:id/prototypes with {}, dispatches hb:prototypes-changed, navigates to the new editor; button shows Creating… while in flight |
| Error | Failed to create prototype: {message} |
Creating from the sidebar often uses the same POST then navigates to the new id.
Editor layout
| Region | Contents |
|---|---|
| Left aside | Chat top bar + transcript + composer (resizable 500–600px, default 500; drag separator; double-click resets) |
| Separator | aria-label="Resize chat panel" — Drag to resize · double-click to reset |
| Right main | Command bar, address / Wayback bar, Preview iframe or Code panel |
Local draft HTML is mirrored to localStorage per prototype + screen so refresh does not lose in-progress edits; Apply / Fork still write server-side.
Chat pane (left)
| Control | Behavior |
|---|---|
| Open sidebar | Shown when the project sidebar is collapsed; shortcut ⌘B |
| Editable title | Renames the prototype (not only the chat) |
| New chat | Fresh thread inside the same prototype; keeps Wayback selection |
| View history | Switch conversations (?c=); multiple chats share one canvas |
| Transcript | Stream status, branch/feedback/retry/edit when available |
| Composer | Submit / cancel while streaming; Select element toggle when a screen is active; model picker (Change AI model) |
Select element: when active, clicking in the preview targets a DOM node for the next edit instruction (targetSelector / targetLabel; clear target from the composer).
Command bar (right top)
| Control | When | Behavior |
|---|---|---|
| Preview / Code | HTML displayable | Segmented toggle; Code uses CodePanel with floating export |
| Match my brand | Screen active | Popover: paste a brand URL → extract tokens → submits a restyle instruction to the designer |
Send to coding agent (HandoffChip) | HTML present | Opens handoff modal (Cursor / Devin agents) |
| Apply to screen | Edits pending, non-selection variant | Persists edit to the shared screen; shows Applying… |
| Fork screen | Edits pending | Forks a new screen from the edit; shows Forking… |
| More actions → Delete | Always | Deletes the prototype and leaves the editor |
Apply/Fork are hidden for selection-backed variants that do not use that persist path.
Code export (Code view)
Floating cluster:
| Control | Behavior |
|---|---|
| Copy HTML | Clipboard; briefly Copied HTML |
| Download HTML | Downloads {prototype-name}.html |
Address bar & Wayback
When a screen/variant is active:
| Control | Behavior |
|---|---|
| Address / route picker | Full URL when siteOrigin known; pick routes from the day’s manifest or saved screens |
| Wayback day chip / calendar | Opens Wayback picker; persists ?day= / ?snapshot= via history.replaceState |
| Variant switcher | Alternate captures for the same route on that day |
Uncaptured route on the selected day: overlay offers adjacent prior/next captures or explains nothing was recorded (Checking for nearby captures while loading).
Empty canvas (no screen)
| Element | Copy |
|---|---|
| H2 | No screen selected |
| Body | Start from your captured product, a saved prototype, or import a frame from Figma. |
| Start from product UI | Opens product setup / Wayback capture flow |
| Connect Figma | When Figma connector configured but disconnected |
| Select from Figma | When connected — opens import panel |
| Loading Figma… | Status loading |
| Hidden | If Figma is unconfigured, Figma button is omitted |
Figma connection status is cached in sessionStorage (hb:figma-connection-status).
Handoff modal (Send to coding agent)
Eligible agents are Cursor/Devin toolbox agents. Typical fields:
| Field | Role |
|---|---|
| Agent picker | Eligible project agents |
| Provider | Cursor / Devin; may require Connect |
| Repository / ref | Target repo (default ref often main) |
| Instructions | Editable; default asks to implement the prototype design and open a PR |
| HTML payload | Current HTML (size-capped server-side) |
Connect flows reuse the shared connector modal when the toolbox is not linked.
Sidebar Prototypes section
| Control | Behavior |
|---|---|
| Prototype rows | Navigate to editor |
| Empty dashed New Prototype | Create |
| Row menu | Rename / Delete |
| Presentational icons | Some “options / see all” icons are tooltips only |