Lesson 25 · Build with customers

Prototype a change on your real product

Capture a page, change it with the agent, share it.

1 min 26 s8 stepsLesson 3 of 5 in Build with customers

You’ll be able to

  • Capture a real page of your product
  • Change it with the agent
  • Compare versions and share it

Read the docs

Synced from docs.buildbetter.ai

The help pages for this lesson, kept up to date. Read them here without leaving the lesson.

Prototypes Overview
Capture any webpage, redesign it with AI assistance, and iterate through versions — then export a handoff document for your engineering team
Chrome Extension
Install the BuildBetter Prototype Capture extension, authorize it, and capture pages for redesign in the prototype editor
The Editor
The two-column prototype editor — canvas on the left with viewport and click-to-select controls, chat sidebar on the right for talking to the agent
AI Editing
Talk to the design agent — quick prompts, the four tools the agent uses to edit your prototype, and how to get good results

Transcript

You can now try a change on your real product, and share it, before anyone writes code.

In the Build surface, open Prototypes. Each row is a page from your product, with the address it came from and its latest version.

Pages come in through the BuildBetter Chrome extension. Click Download extension, install it, and capture any page of your product. It lands here as a prototype.

Or click New prototype to start from a blank canvas, or from a page someone already captured.

Open a prototype. The real page loads on the canvas, and you can preview it on desktop, tablet or mobile.

Tell the agent what to change. This request asks for a prep button on each upcoming call. Use Select element to point it at one part of the page.

The agent inspects the page and makes the edit. Here's the new Prep button.

Every edit saves a new version under Iterations. Click an older one to compare, then go back to the latest.

When it's ready, click Share link so your team can open it, or Ask personas for feedback.

Next up, see how people use your product with screens, flows and sessions.