1In one sentence
Claude Design can make a working mock of an app or website that you can click through, to test an idea before anyone builds it.
2New words
- Prototype — a pretend version of an app or site that looks and clicks like the real thing but does nothing underneath. For showing and testing.
- Wireframe — a rough prototype in grey boxes, for deciding what goes where before worrying about colors.
- Screen — one view of an app: the home screen, the booking screen, the confirmation screen.
3Why you would want it
Explaining an app idea in words takes an hour and still gets misunderstood. A three-screen prototype takes minutes and everyone "gets it" the moment they tap through. You can test it on a friend before spending money on a developer.
4Try it now
(paid plans)
- In Design, start a new Design and type: A 3-screen phone app for booking a table at my bakery's café: choose a day and time, enter name and number of people, see a confirmation. Make the buttons clickable so I can move between screens.
- When it appears, click Play (the triangle at the top of the canvas) and tap through it.
- Ask for a change: Add a screen that asks about allergies before the confirmation.
5What you will see
[Picture pending: three phone screens on the canvas and the prototype in play mode.] Three phone-shaped artboards, linked: tap the button on one and the next appears. In play mode it feels like a real app. Claude explains what it assumed (sample times, placeholder names).
6Watch out
- It is a mock. Nothing is saved, no booking is made; that needs Chapter 3.5 or a developer.
- Keep the first prototype to three or four screens. Test it, then grow it.
7Go further
Show it to three people and ask them to book a table. Watch where they hesitate; that is your next change. Then Chapter 3.5 turns the design into a real website.