One prompt, one app
Build a small, working app just by describing it in plain English — no setup, no code editor, no account gymnastics. Then run the exact same prompt again and watch the two results diverge. That surprise is the lesson.
Everything here runs in your browser. Nothing to install. If one tool is slow or asks for too much, jump to the next one — they’re interchangeable for this lab.
01Open a free browser tool · 3 min
Pick one. All run in the browser:
Google AI Studio
aistudio.google.com
Prompt-to-app with instant preview and minimal friction. Great first choice.
bolt.new
bolt.new
Type an app idea and watch it build in a live editor + preview.
Claude.ai (Artifacts)
claude.ai
Describe an app; it generates a working single-page version you can run and tweak inline.
Replit
replit.com
Prompt-to-deployed-app in one tab if you already have a login.
02Paste the starter prompt · 5 min
Copy this in exactly as written and run it:
Build a small web app: a daily habit tracker. I can add a habit, check it off for today, and see a simple streak count for each one. Make it a single page with a clean, modern look and a friendly empty state. Start it with two example habits so it isn’t blank.
Watch what the agent does: it plans, writes files, and shows a running preview. You didn’t write a single line of code.
Swap in the Class 2 demo prompt instead: “Please build a website for a 3D first-person shooter game in an arena against one computer opponent, controlled by arrow keys and space bar to shoot.” Either works for this lab.
03Make it yours · 15 min
Now improve it through conversation. Send at least two follow-up messages. Try:
“Make the design more colorful and add a dark-mode toggle.”
“Add a button to clear all entries, with a confirmation.”
“The Save button doesn’t clear the text box after saving — fix that.”
Pick your own idea from the menu, or invent one. The goal is to feel how the app changes when you simply describe what you want.
04The twist: run it twice · 7 min
Open a fresh chat / new project and paste your original prompt again — unchanged. Compare the two results side by side.
- Did the layout change? The colors? The wording of the buttons?
- Did one version have a feature the other missed?
- Did one work perfectly while the other broke?
That divergence is non-determinism — the same input can produce different output every time. It’s not a bug; it’s a property of how these models work, and designing around it is what context engineering is all about.
05Reflect · 5 min
Jot down answers — you’ll reuse these when we talk context engineering:
? Three questions
- What did the agent get impressively right on the first try?
- Where did it get confused or make a wrong assumption?
- What one instruction, added up front, would have prevented that mistake?
06If something goes wrong
| Symptom | What to do |
|---|---|
| Tool is rate-limited or slow | Switch to a different tool from Step 1 and re-paste your prompt. |
| App won’t run | Tell the agent exactly what’s broken (“the buttons don’t do anything when clicked”) and let it fix itself. |
| Output looks nothing like you asked | Expected and useful — note it for the reflection. It’s data, not failure. |
Run your original prompt one more time at home and write three sentences on what varied between runs. Bring it along — it’s the perfect on-ramp to context engineering.