Build it by prompting
A prototype is a pretend version of your product that people can click through. Today you build one screen of yours just by describing it to the AI.
What you will leave with
- What a prototype is, and what it is not
- The describe, build, look, improve loop
- Where to find the canvas or preview in your tool
- A clickable one-screen prototype, improved three times
YOU LEAVE WITH · A working prototype
A prototype is not a finished app
A prototype is
- One screen people can click
- Made-up names and data
- Quick to change or throw away
- For learning, not for launch
A prototype is not
- Somewhere to store real people’s details
- Safe enough for real use
- Something to share with the whole internet
- A promise of what you will build
You are building to learn, not to launch.
Describe, build, look, improve
- DESCRIBESay what the screen shows and what each button does, in plain words
- BUILDAsk the AI to make it in its canvas or preview
- LOOKClick everything. Does it match what you described?
- IMPROVEAsk for one change at a time
- REPEATThree rounds is plenty for today
One change per prompt. Small asks get better results.
Finding the canvas or preview
- CHATGPTCanvas: shows what it makes in a panel beside the chat
- CLAUDEArtifacts: shows a working page in a panel beside the chat
- GEMINICanvas: shows what it makes in a panel beside the chat
- IF YOU CANNOT FIND ITAsk the assistant: “How do I preview a web page you make here?”
Features and free allowances change. Look for the current option in your tool.
Riverside Café (fictional): one screen, three rounds
The one-page idea: this week’s shifts, gaps in orange, and an “I can cover” button.
First build: seven days with made-up names like “Volunteer A”. Round 1: make the gaps orange. Round 2: bigger text and buttons. Round 3: show a thank-you message when someone taps “I can cover”.
Ask
- Which round matters most to a shift lead?
- Who might find this screen hard to use?
- Why use made-up names?
Live demo: build one screen
Please build a simple, clickable one-page prototype as a web page I can preview here. It is for [WHO] and shows [WHAT THE SCREEN SHOWS]. Include [ONE BUTTON AND WHAT HAPPENS WHEN IT IS TAPPED]. Use only made-up names and data. Make the text large and easy to read, with strong contrast. Keep it to one page, with no logins and nothing saved. Then tell me in two short sentences how to open the preview.
Check the response
- You can see and click the screen
- Every name and number is made up
- The button does what you asked
- The text is large and easy to read
Your tutorial: 35 minutes
Work through the Lesson 4 tutorial. Each step is a short prompt, then a “Did you…?” check.
- Put your one-screen description into the build prompt
- Find the preview and click everything
- Improve it three times, one change per prompt
- Save it, or take a screenshot, ready for Lesson 5
A working one-screen prototype
Before you move on
- I have a screen I can click through
- I used only made-up names and data
- I improved it three times, one change at a time
- I have saved it or taken a screenshot
NEXT · Lesson 5: Show it, learn and decide
© 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