App prototype: something to tap before anything is built

A clickable phone app in one page, sent to a few people to try before anyone writes real code.

Live example

The example: Shed Door, a bed sign-up for Cinder Lane Garden

Five screens, three tasks, nothing saved

Shed Door, a bed sign-up for Cinder Lane Garden

Open the exampleThe names and numbers are made up.

What to notice

  • Put your name on bed 7 and the Beds count goes from 5 of 12 free to 4, with that bed marked "You" on the plan.
  • The note beside the frame lists three things to try, and each one ticks itself off as you do it.
  • A list headed "What isn't real" says nothing is saved, the names are invented, no money moves and there's no sign-in.

The prompt that starts one like it

Make a clickable app prototype as a single HTML page. The app is [what it does, for whom]. Give it [four or five] screens to tap between: [list them]. Keep state in memory, so [adding or claiming something] shows up on the other screens. On a desktop, put it in a phone frame with a note beside it: three things to try and what isn't real. On a phone, open with the note, then drop the frame and fill the screen. Original design, system fonts. Then publish it on sharable.link.

A picture of an app gets polite nods. Something people can tap shows you where they hesitate. Shed Door is a made-up sign-up app for a community garden's twelve beds: one page, five screens, nothing behind it. It forgets everything on reload, no tester sees another's changes, and it can't tell you what anyone tapped. You have to ask.

Who it's for

Founders, designers and volunteers with an idea for a small app and five people willing to try it. Send it before any code is written, in one message: here's the link, try these three things, tell me where you got stuck.

It fits an app with one main job and a handful of screens. It can only pretend at real accounts, payments, or two people using it at once, and it should say so.

What a good one contains

  • One job, end to end. Find a free bed, put your name on it, give it back. Five screens cover that: Beds, one bed's details, the sign-up, Work days and Mine.
  • State that carries across screens. Take a bed and the number free on the Beds screen drops by one. Without that, testers are looking at pictures again.
  • A believable starting point. Seven beds already have names on them and one work day is full. The real app will never be empty.
  • A dead end, handled. Try for a second bed and the button is disabled, with the rule next to it: one bed each.
  • Tasks instead of a tour. The note gives three things to try and leaves the taps to the tester. Explain the route and you've tested your explanation.
  • What isn't real, in plain words. Four short lines cover saving, names, money and sign-in. People forgive a fake more easily when they were told first.
  • A frame at a desk, none on a phone. On a real phone the outline would be a small screen drawn inside a small screen, so the note opens first and the prototype then fills the display.
  • A way to start over. One button puts all 12 beds back, so the second person at the table gets a clean run.

What to ask the five

Put your question in the message and ask for the reply there, because the page records nothing. Where did you hesitate? What did you expect that didn't happen? Give a date, as Shed Door's note does: Sunday 22 November.

If you can, watch one person use it and say nothing while they do. Then fix what tripped them and replace the page. The link stays the same, so the next tester opens the better version.

How to send it

As an open link. Five testers should get from your message to their first tap with nothing in between, and there's no real data on it. Add a password if the idea itself is under wraps.

Every page you publish gets one link that opens in any browser. You choose who can open it: anyone with the link, anyone with the password, or only the people and company domains you name, who sign in with Google or Microsoft. Change the page later and the link stays the same.

Make yours in Claude

Add the connector once, then publish from any Claude conversation and get a link to send.

Add Claude Connector

Already have the file? Upload it here.

More in product and engineering

  • KPI dashboard: A few numbers with their changes and the reasons behind them, sent to the same readers on a schedule.
  • Product roadmap: What a product team is building now, next and later, by theme, for customers and colleagues.
  • Data visualization: One dataset drawn as a few interactive charts, each with a sentence that says what to see.
  • Flowchart: A process or user flow drawn as steps, questions and outcomes, for the people who have to follow it.
  • Product requirements document: The problem, the requirements and what's left out for one feature, for the people who will build it.
  • Release notes: What's new, better and fixed in this version of your product, written for the people who use it.
  • All use cases

Keep reading