Live Workshop — Vibe Coding in 5 Rounds
The structured in-session exercise sequence for Session 1. Five rounds, 50 minutes total — starting with free AI tools to find the gap, then Lovable to close it.
This page is structured as a live classroom exercise. Each round has a time target. Do them in order — Round 0 is deliberately frustrating, and that frustration is the lesson.
Before You Start
You need two things open in Chrome:
- Any free AI tool — chat.openai.com, claude.ai, or gemini.google.com. Use whichever one you already have an account on.
- lovable.dev — sign in or create an account (60 seconds, Gmail).
Total time for all 5 rounds: 50 minutes.
Round 0 — Ask a Free AI Tool to Build You a Website (10 minutes)
Goal: Discover the wall that Lovable was built to break through.
Open your free AI tool — ChatGPT, Claude, or Gemini — and type this prompt:
Hit send. Watch it generate.
What you will get: A block of code — HTML, CSS, maybe some JavaScript. It will look complete. It will look correct. The AI will confidently say something like "Here is your homepage."
Now ask:
"How do I see it?"
The AI will tell you to save the code as a .html file, open it in a browser, or use a tool like VS Code with Live Server. It might even write instructions for how to set that up.
Now ask:
"Can you change the button colour to amber?"
It will change the code. You still cannot see anything.
Now ask:
"Can you deploy this so I can share a link with someone?"
It cannot. It might suggest Netlify, GitHub Pages, or hosting services. It will give you more instructions.
Stop Here and Look at What Happened
The AI understood your request perfectly. The code it generated is real, correct HTML. If a developer copied it into the right setup, the site would work.
But you are not a developer — yet. And even if you were, the loop of "generate code → save file → open in browser → change one thing → save again → refresh" is slow and painful. It is the opposite of the fast, visual, iterative way you want to work.
The gap you just hit:
| What you wanted | What you got |
|---|---|
| A website you can see | A block of text |
| Click to change the button colour | Edit the code manually |
| A shareable link | Instructions for 4 more tools |
| Iterate visually | Read-modify-save-refresh loop |
These free AI tools are text interfaces. They understand software deeply. They can write entire applications from scratch. But they hand you the blueprint, not the building.
This is not a flaw in ChatGPT or Claude. They are general-purpose AI assistants. Building software interactively requires a browser, a live preview, a deploy pipeline, and version control wired together. That infrastructure is what a specialised tool provides.
What Lovable Is
Lovable takes the same AI intelligence and wraps it in exactly what was missing:
- Live preview — every prompt shows you the result in a browser, instantly
- Iterative — describe a change, see it, describe the next change
- Deploy button — one click to a public URL you can share in 30 seconds
- Real code underneath — React + Tailwind, the same stack you build with properly in Project 2
The prompt you just typed in ChatGPT? Paste the same prompt into Lovable. You will get a different kind of answer.
Round 1 — The Same Prompt, in Lovable (7 minutes)
Goal: See what changes — and what doesn't — when you move from a text AI to a builder AI.
Open Lovable. Paste the exact same prompt you used in Round 0:
Hit send. Wait 15–40 seconds.
What is different this time:
- You can see it — a real browser preview, not a code block
- You can click "Plan a Visit" right now — the button is real
- There is a deploy URL you can open on your phone
What is the same:
- The output is still generic — it could be any school anywhere
- The colour scheme is something Lovable chose randomly
- "Contact footer" is vague, so the footer is vague
Put Round 0 (ChatGPT) and Round 1 (Lovable) side by side in your mind:
- ChatGPT gave you a blueprint. Lovable gave you a building.
- But both built to the same vague spec — so both results are vague.
The problem is not the tool. The problem is still the prompt.
Round 2 — The Right First Prompt (12 minutes)
Goal: Build a first version you can actually work with.
Open a new Lovable project (click + New Project at the top). This time, use a structured prompt. Fill in your own details where shown, or use the Aurora Public School example below:
Hit send. Wait.
When it finishes:
Put Round 1 and Round 2 side by side in two browser tabs. Look at them together.
Ask yourself:
- Which one would you actually send to a parent?
- Which one looks like it is for this school specifically?
- What is different about the level of detail in the two prompts?
Round 3 — Iterate (12 minutes)
Goal: Improve Round 2 with 4–6 single-change prompts.
Stay in your Round 2 project. The first version is rarely what you want — that is expected. Do not start over. Pick the single biggest problem and describe the change in one sentence.
Pick 4–6 changes from this list — or notice what you want to change and describe it specifically:
| If you see this | Try this prompt |
|---|---|
| Hero looks generic and plain | "Make the hero background indigo-900 (#312E81). Headline and tagline in white. The button amber (#F59E0B) with dark text." |
| Stock photo is obviously stock | "Replace the hero image with an illustration of a bright, modern Indian school classroom. No real photos." |
| About section is too corporate | "Rewrite the about paragraphs in a warmer voice. Audience: a parent deciding where to enrol their 8-year-old. Use 'we' and 'your child'. Don't use the phrases 'holistic development' or 'world-class'." |
| Branch cards look flat | "Add a soft shadow and a subtle border to each branch card. On hover, lift the card slightly with a transition." |
| Spacing is too tight | "Increase the padding on every section by 50%. Add more breathing room between the hero and the about section." |
| Mobile layout is broken | "Check how this looks on a 375px mobile screen and fix anything that wraps badly or looks cut off." |
| Footer is too dark / too light | "The footer should be the same deep indigo as the hero — not black, not white." |
Rules for this round:
- One change per prompt. No combining.
- After each prompt, look at the result before writing the next one.
- If a change breaks something you liked, say: "The [element] looked better before — revert just that section."
Round 4 — The Reality Reveal (8 minutes)
Goal: Find where Lovable ends and real software begins.
Your site now looks close to finished. Before you share it, do the following three things:
Test 1 — Click the "Plan a Visit" button. Does it go anywhere? Does it open a form that actually submits? Does any data go into a database?
Test 2 — Fill in the contact form and submit it. Did you get a confirmation email? Can you see the submission anywhere? Does anyone at the school actually receive it?
Test 3 — Add the school's real phone number to the footer. Then ask: if a parent calls that number right now, is there a system that tracks that call? Does it connect to a student record?
What you will find: The site is real HTML and CSS — it loads in a browser, it looks like a website. But none of the actions go anywhere. The form data disappears. The button is a link to nowhere. The phone number is text with no system behind it.
This is not a Lovable failure. It is the correct result. Lovable builds the front end — what people see. The back end — the database, the forms that actually submit, the system that stores data — is what you build in Projects 2 through 5.
The gap between what looks like a product and what is a product: that is the cloud.
The server, the database, the auth system, the API — that is the cloud. Right now, everything is on Lovable's servers and it all disappears if you close the tab. In the real stack you build next, nothing disappears. Everything is yours.
This is the most important lesson of Session 1. It is not that Lovable is limited — it is that you now understand the layers. You know what the front end is. You know what a real back end adds. That understanding is what separates someone who vibe-codes a demo from someone who builds a real product.
Optional Round 5 — Build Your Own (remaining time)
Only if you have 10+ minutes left.
Instead of the Aurora School example, build a site for something you actually care about:
- Your CA firm's homepage
- A landing page for a service you provide
- A site for a friend's business
Use the Round 2 structure: one page, 4 sections, specific style. Then iterate with Round 3 prompts.
When your site looks good enough to show someone, send the Lovable preview link to one person and ask: "What would you change?"
Their feedback is the most valuable output from this exercise.
What You Just Practised
| Round | What you learned |
|---|---|
| Round 1 | Vague prompts → vague results. The quality of the output is a mirror of the quality of the input. |
| Round 2 | Structure + specifics → something you can actually work with. First version is never final. |
| Round 3 | Iteration is the skill. Small focused changes beat large ambiguous ones every time. |
| Round 4 | Every beautiful front end has a gap. The gap is the back end. That gap is what the rest of this course fills. |
The rhythm you practised — describe, see, judge, describe again — is not just for Lovable. It is how you will work with Claude Code, how you will debug a broken API, how you will refine a database schema. It is the fundamental loop of building software.