An AI user flow generator that draws every screen.
Describe a task, such as sign-up or checkout. Your agent storyboards at least three versions of it, screen by screen, so you compare whole sequences instead of boxes and arrows.
Updated · By Thijs Verreck
A user flow is the path a person takes through a product to get one thing done: the screens they see, in order, and the choices that move them along. Most flow tools draw it as a flowchart of labelled boxes. Prototyper draws it as a storyboard instead: each step is a wireframed screen in a browser or device frame, with its own route in the address bar, connected to the next by an arrow.
Because the AI wireframe generator always produces at least three options, you get three versions of the whole flow, such as a step-by-step wizard, a single page, and one that asks for details only when they are needed. Each screen shows where it sits in the sequence, with step dots or a progress bar.
Try these prompts
Paste one into the chat, or pick Wireframe under “Start with a format” first. Say where the flow starts and where it ends, and what the versions should differ on.
Storyboard the checkout flow of an online bike shop, from cart to order confirmation. Three versions: one page, a three-step wizard, and express checkout with an option to see every detail.
Storyboard sign-up and first-run onboarding for a project management app, ending when the user creates their first project. Three versions that differ on how much is asked up front.
Storyboard booking a haircut on mobile, from choosing a salon to the confirmation. Three versions: pick the time first, pick the stylist first, and a single smart suggestion.
Storyboard the flow for cancelling a subscription in account settings. Three versions that differ on how many screens it takes, and keep it honest: no hidden buttons.
How to map a user flow with AI
- 01
Name the start and the finish.
“From the cart to the order confirmation”. A clear end point keeps the storyboard from sprawling.
- 02
Decide what the versions should differ on.
The number of steps, the order of questions, or how much is shown at once. If you are unsure, the agent proposes a few axes and asks.
- 03
Read each storyboard left to right.
Each version is a row of screens joined by arrows, labelled 1a, 1b and 1c, with notes on what it gains and what it costs.
- 04
Walk the team through it.
The canvas is multiplayer, so the team reviews the same storyboard together. A single flow can also be presented one screen at a time, like a slide deck.
- 05
Fill the gaps, then build.
Ask for the error and empty states, then have the agent build the chosen flow as working screens on the canvas.
More wireframe guides
Back to the hub, or try another kind of wireframe.
AI wireframe generator
How Prototyper sketches three hand-drawn options and builds the one you pick.
Mobile app wireframes
Phone-sized screens in device frames, three layouts per screen, onboarding to settings.
Website wireframes
Landing pages and site sections in browser frames, with the page structure laid bare.
Why storyboard a flow
Flows fail between screens
A storyboard shows the sequence, which is where people get lost or give up.
Screens, not boxes
Every step is a real wireframe, so a reviewer sees what the user would see.
Three paths to compare
Different numbers of steps, side by side, make the trade-off concrete.
Frequently asked questions
- What is a user flow?
- The sequence of screens and choices a person goes through to complete one task in a product, such as signing up or checking out.
- Is this a flowchart or diagram tool?
- No. Prototyper draws a flow as a storyboard of wireframed screens joined by arrows, not as a flowchart of labelled shapes.
- How many versions of the flow will I get?
- At least three per request, each a full storyboard, and up to five or six in a round if you ask.
- Does it work for mobile flows?
- Yes. Say the flow is for mobile, and every screen is drawn in a device frame instead of a browser window.
- Can the flow become a working prototype?
- Yes. Ask the agent to build the chosen version, and the working screens appear next to the storyboard on the same canvas.
Try it on the canvas.
Free to start, no credit card. Bring the agent you already have.