Lesson 4 · Build it by prompting: a clickable one-screen prototype

Where you are

You have a one-page product idea and one screen described in words. Today you turn those words into something people can click, without writing any code yourself. The AI writes it; you describe what you want and judge the result.

What you will make

A prototype: a single screen that looks and behaves enough like the real thing for someone to try it. It does not save anything for real and it is not finished. That is fine: its job is to help you learn in Lesson 5.

For the fictional café: a weekly rota with seven days, three shifts a day, empty slots shown in orange, and a button that lets a volunteer put themselves down for a shift.

Outcomes

By the end of the tutorial you can:

1. Find the canvas or preview feature in your AI assistant.
2. Build a clickable one-screen prototype from a description in words.
3. Improve it by asking for one change at a time.
4. Fix something that doesn't work by describing what you see.
5. Keep a copy of your prototype to show people.

How to use the prompts

• Copy each prompt as written, paste it into your AI assistant and press send.
• Replace anything in [square brackets] with your own words, and delete the brackets.
• Every prompt works in ChatGPT, Claude or Gemini, on a free account. The feature that shows your prototype has a different name in each one (step 1).
• After each prompt, read the Check and answer it honestly before moving on.
• Never paste personal information: no names, addresses, phone numbers, health details, money details or anything about the people you help or work with.

Tutorial

1 · Find the canvas or preview 5 min

Each assistant can show what it builds in a panel next to the chat, where you can click it:

• ChatGPT: Canvas
• Claude: Artifacts
• Gemini: Canvas

These features change often, and free allowances change too, so look for the current option in your tool: it may be a button, a menu or something it does on its own. If you can't find it, ask:

Can you show me a web page you build as a clickable preview here, next to our chat? If so, how do I turn that on in this app? Answer in two short steps.

Check. Did you find the canvas or preview option, or learn how to turn it on? If your tool can't show a preview on your device, did you ask your facilitator or a neighbour to build with you on theirs?

2 · Build your screen 9 min

Build a simple, clickable one-page web prototype in the preview. It is for [who], so they can [the main thing they do]. Here is what is on the screen, from top to bottom: [your one-screen description]. Use made-up example data only. Make the buttons do something visible when clicked, even if nothing is saved. Use large, clear text and keep it simple.

Check. Did a screen appear that you can see and click? Does it look roughly like your description? It doesn't have to be pretty yet. If you see code instead of a screen, did you ask "Please show this as a preview, not as code"?

3 · Improvement 1: make it clear 6 min

Look at your screen as if you had never seen it. What is confusing? Then ask for one change.

Make one change: [what is confusing, for example "the buttons don't say what they do" or "I can't tell which slots are empty"]. Keep everything else the same.

Check. Did you ask for one change only? Did the change happen, without breaking anything else? If something broke, did you describe what you saw, for example "The button has disappeared", and ask the AI to put it back?

4 · Improvement 2: make it easy for everyone 6 min

Make this screen easier for everyone to use: larger text and buttons, strong colour contrast, simple words, and make sure it still works on a small phone screen. Keep the same content.

Check. Did you try the screen at a smaller size, or on your phone if you can? Could someone with poor eyesight read it? Think back to Lesson 3's question: who might this leave out?

5 · Improvement 3: your choice 6 min

Make one more change: [the one thing that would most help a real person use it, for example "show a thank-you message after someone signs up for a shift"]. Keep everything else the same.

Check. Did you choose the change by thinking about the person who will use it, not about what looks clever? Does your prototype now do the single most useful thing from your value proposition?

6 · Keep a copy 3 min

How can I save or share this prototype so I can show it to two people next lesson, from this app? Give me the simplest way, in two steps.

Check. Did you save it, copy a share link, or at least take a screenshot? Did you check that it contains made-up data only, before you share it with anyone?

Facilitator notes

• Before the session, try step 2 yourself in each of the three tools on a free account, because the canvas, Artifacts and preview features and their free limits change. Know where the button is today.
• Some free accounts hit a daily limit after several builds. If a learner runs out, pair them with someone else, or let them carry on later.
• Phones work but are fiddly for building. Where you can, use laptops or tablets for this unit and pairs on one device.
• Encourage "one change at a time". Learners who ask for five changes at once often get a broken screen and lose confidence.
• If a prototype breaks badly, it is fine to start a new chat and paste the step 2 prompt again. That is normal, even for professionals.
• Check that share links are not posted anywhere public, and that no real names have crept into the example data.

© 2026 MVP Studios Ltd. The Build with AI: First Steps course materials are free to use, print, translate and adapt for non-commercial training under the Creative Commons Attribution-NonCommercial-ShareAlike 4.0 licence: credit MVP Studios Ltd and share adaptations on the same terms. MVPAI™ and the MVP Studios name are trademarks and are not licensed. Course terms