How to generate a prototype in Thinkr

A prototype turns a PRD into a clickable HTML mockup — real pages, real navigation, generated from the spec you already wrote. You review a page outline before anything is built, generate one page per row, then refine the result by chatting with it. It's the fastest way to put a tappable version of an idea in front of stakeholders.

Before you start

You need a generated PRD — the prototype is built from a spec, not a blank prompt. Optionally, set a Default Design System in your Brain so the mockup matches your house style; otherwise it uses a clean baseline aesthetic.

Open Prototype from the sidebar. First time, you'll see "No prototypes yet" — "Turn a PRD into a clickable HTML mockup and iterate with chat." — with a New Prototype → button. Otherwise click + New prototype.

Step 1 — Configure the prototype

In the Configure panel on the left:

• Select PRD — search and pick the spec to build from ("Search and select a PRD…").
• Title — name it, e.g. Onboarding flow v1.
• Device target — Web (1280 × 800), Tablet (1024 × 768), or Mobile (390 × 844).
• Focus prompt (optional) — steer the build, e.g. "Focus on the onboarding flow only. Minimalist style. Dark mode."
• Design system override (optional) — upload a .md file to override your Brain's default for this prototype only.

Click Plan pages.

Step 2 — Review the page outline

Before generating anything, Thinkr proposes a page list — "Rename, add, or remove pages before generation runs. One HTML page will be generated per row." For each page you can set the title, whether it appears In nav, its Primary CTA (a button label and the page it links to), and any other exits (secondary links). A User journey map shows how the pages connect. Add rows with + Add page, or click Regenerate outline to propose a fresh structure.

Spend your time here, not after. Fixing the page list and the CTA wiring now is cheap; regenerating fully-built pages later is slow. Get the journey right first.

When the outline looks right, click Generate pages.

Step 3 — Watch it build

Generation runs in two passes — Planning page structure, then Generating pages — and shows progress per page ("3 of 5 — Checkout"). It takes a couple of minutes; leave the page open. If a page fails, you'll get a Retry.

Step 4 — Iterate via chat

When the pages are ready, the canvas shows your mockup; the left panel has an Index of pages and a Chat tab. Use chat to make changes in plain language — "Make the primary CTA orange" or "Add a pricing page." — and Thinkr updates the affected pages, noting which ones it changed ("Updated: home, pricing").

Step 5 — Present

Open the Actions menu (top-right) and choose Present for a full-screen, chrome-free walkthrough — hit Esc to exit. From the same menu you can Regenerate if you want to re-plan the whole structure. Teammates with access to your workspace can open the prototype directly.

That's the loop

Pick a PRD, shape the page outline, generate, then iterate by chat until it feels real — and present it. Because it's built straight from the spec, the mockup stays honest to what you actually wrote.

Ready to try it? Open Thinkr and click Prototype.