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. By default Thinkr plans the pages and builds straight through; you can also review the page plan first if you want to steer it. Either way you 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).
• Visual mood, pick a theme, or leave it on auto for a calm default.
• 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.
• Reference screenshot (optional), upload an image and the prototype will match its visual language (palette, type, density) within your design tokens.
• Review the page plan before building (optional), off by default. Leave it off to build straight through; turn it on to edit the page list and CTA wiring first.

Click Build prototype (or Plan pages if you turned on review).

Step 2, (Optional) Review the page outline

If you turned on review, Thinkr proposes a page list before generating, "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.

Reviewing is worth it when the structure matters: fixing the page list and CTA wiring before generation is cheaper than regenerating fully-built pages. When the outline looks right, click Generate pages.

Step 3, Watch it build

Thinkr plans the screens, then builds them into one clickable HTML document, every screen shares one stylesheet and one nav, and Thinkr composes the layout itself from a component library (stat rows, tables, forms, lists, hero bands…). The model supplies the content; Thinkr lays it out, so every screen is consistent and structured for what it is (a dashboard leads with stats and a table, a sign-up is a form, a success screen is a focused confirmation). Progress shows per screen ("3 of 5, Checkout"). It takes a minute or two; leave the page open.

Step 4, Click through and iterate via chat

When it's ready, the canvas shows your prototype, click the nav and CTAs to move between screens, just like a real app (Sign up → Dashboard). The left panel's Screens tab lists every screen so you can see them all and jump straight to any one while editing. Use the Chat tab to make changes in plain language, "Make the primary CTA orange" or "Add a pricing screen.", and Thinkr updates the affected screen in place, noting what it changed ("Updated: home, pricing"). If you've set a design system in your Brain, every screen is styled from it.

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 to re-plan the whole structure. Teammates with access to your workspace can open the prototype directly.

That's the loop

Pick a PRD, build (reviewing the plan first if you like), click through it, then refine by chat until it feels real, and present it. Because it's built straight from the spec, the prototype stays honest to what you actually wrote.

Ready to try it? Open Thinkr and click Prototype.