How to generate a prototype in Thinkr

A prototype turns a PRD into a clickable HTML mockup, real screens, real navigation, generated from the spec you already wrote. By default Thinkr plans the screens first and shows you the plan, including each screen's shape and how screens link, before it builds; you can switch that off to build straight through. 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). Thinkr pre-selects one from the PRD's brief (a PRD about shoppers on mobile web starts on Mobile) and shows the words it went by; pick another and your choice sticks.
• Visual mood, leave it on Auto and Thinkr picks a mood from the PRD's domain and audience (a finance admin tool reads corporate; a consumer app, checkout included, reads vivid or minimal) and tells you why above the plan, or pick one yourself.
• Focus prompt (optional), steer the build. Structural phrasing changes the layout, not just the copy: "Admin console: left sidebar + data table + detail panel." The chips under the box (Sidebar + table + detail panel, Data-dense, compact tables, …) add these for you.
• 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 screen plan first, on by default; your choice is remembered. Turn it off to build straight through.

Click Plan screens (or Build prototype if you turned review off).

Step 2, Review the screen plan

Thinkr proposes a screen list before generating. For each screen you can set the title, whether it appears In nav, its Shape (workbench, stat-led, long document, comparison table, confirmation, error state, …) and Role (entry, discovery, conversion, onboarding, recovery, success), its Primary CTA (a button label and the screen it links to), and any other exits. Under each row a hint shows exactly what those choices produce, renders as app-dashboard · chart-led: page-header → stat-row → chart → info-list, and updates as you change them. A User journey map shows how the screens connect. Add rows with + Add page, or click Regenerate outline to propose a fresh structure.

The plan is where variety comes from. Thinkr picks a layout variant for each screen from the PRD's content (fields make a form, several numbers make a chart-led dashboard, a list of records makes a table-led one); changing a shape or role here changes the layout before anything is built. When the plan looks right, click Looks good, build.

Step 3, Watch it build

Thinkr builds the screens 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, charts, forms, lists, sidebars, images, hero bands…). The model supplies the content; Thinkr lays it out, so every screen is consistent and structured for what it is. Progress shows per screen ("3 of 5, Checkout") along with any quality or link warning as it's found. Expect a few minutes for a large plan; leave the page open. If a screen can't be generated, the run is marked Failed with the screens named, and Retry regenerates, you'll never get a "ready" prototype with blank screens.

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). Every screen marked In nav is in the nav (a top bar on web and tablet, a bottom tab bar on mobile); focused screens such as sign-up, confirmations and error states hide the nav and show a ← Back to … link instead; table and list rows can open their detail screen. 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.