👀 Recognise the panes
An integrated development environment (IDE) is basically a building interface. It is the app where the project, the preview, the AI helper, and the terminal all sit together so you can work in one place.
A build space is that same interface, but with AI woven into it. The win for today is simpler: recognise each pane, know what job it does, and know where to look when the build needs your next decision.
Click each pane inside the mock IDE once: Files, Preview window, AI panel, and Terminal. Click the same pane again to collapse it back down, like you would in a real IDE.
Do not overthink this. Most beginners mainly live in the Preview window and the AI panel. The other two matter to recognise, not master.
Your actual job in this module: open the build space, watch the first draft appear, notice what feels off, and ask for the next change clearly.
Useful adult framing: vibe coding is not “letting the robot do whatever.” It is more like working with a fast junior maker in a shared workshop where you can both see the same thing.
🛠️ Open the class build space
If you are in class, or doing this on your own and do not want to overthink it, start with Antigravity. It is Google's AI IDE, it is the class route, and it is the cleanest place to learn the basic build loop.
What computer are you setting up?
Mac path selected. If you have an older Intel Mac, check the download page for the Intel option.
Free tiers and plan details move around. If you need exact current pricing, check the provider page directly.
This is the tool we are using for the workshop. It is Google's AI IDE, it is visual, and it is a good fit for learning the workflow without turning tool choice into the main event.
Keep the goal small: download or open it, sign in, create a blank project, and find the AI panel. That is enough for this beat.
If you are unsure, Antigravity is the safe default. Build something first. Optimise tools later.
🧰 After class: other build and coding routes
These are real options, but they are not the main teaching path today. Keep them as side lanes once the first build loop makes sense and you know what kind of workspace you actually want.
A full editor with AI woven through it. Good when you want more control than a browser build space but still want the IDE, preview, files, and AI all living together.
Useful once you are ready to work in a more standard coding environment without giving up the fast vibe-coding loop.
A friendly visual bridge from “chatting with AI” to “building with AI”. Good if you like seeing the project, the files, and the AI together in one calmer interface.
Feels closer to the class experience than a plain code editor, so it can be a comfortable next step after Antigravity.
A common long-term route if you want a standard editor with AI layered in rather than the whole experience being AI-led.
This suits people who want to grow into more normal software habits while still getting AI help for drafts, fixes, and repetitive work.
If Module 4 felt good, this keeps that terminal energy and takes it into real folders and files.
You still usually want a proper editor or IDE open beside it, because you do not want to be managing a whole project through a bare terminal and a plain text window like it is Notepad.
Handy for fast prompting, model testing, and small browser-based app experiments before you move an idea into a fuller IDE.
Less of a full project workspace, more of a quick prototype and prompt-lab route.
Useful when you want to hand a coding task to an agent, inspect the result, and iterate more deliberately than a normal chat tab allows.
Best once the first-draft build loop already makes sense and you want a stronger task-oriented coding cockpit.
🧪 Google AI Studio — the no-install route
If you are not ready to download an IDE yet, Google AI Studio is a powerful browser-based alternative. No downloads. No setup. Sign in with a Google account and you are building in under a minute.
What makes it different from Antigravity: AI Studio is entirely in your browser — it is closer to a smart prompt lab than a full project workspace. Great for prototypes, experiments, and getting a working first draft fast. When you want to take the project further, you can export the HTML and open it in a proper IDE later.
Go to aistudio.google.com. In the left sidebar, choose Build (not Prompt or Stream). This switches to the app-building mode where output is a live page, not a chat reply.
Drop in one of the starter briefs from Section 4 below. AI Studio will generate a working HTML/CSS/JS page you can see live in the preview pane on the right.
The preview appears on the right. Click Run to refresh it after changes. Steer with follow-up messages exactly the same way you would in Antigravity — name what feels off, ask for one change at a time.
Click the download icon (top-right of the code pane) to save the HTML file. Open it in VS Code or Cursor for the next draft, or push it straight to GitHub.
🚀 Paste one starter brief
Do not start with your dream app. Start with one small thing you can actually finish. That first win is what makes the confidence stick.
Fast path: click one ready brief below, copy it, paste it into Antigravity, and let the first draft finish before you start judging it.
Choose one starter build above and the ready brief will appear here.
Why this brief works: it uses the same bones you learned in Module 2. It gives the AI a role, enough context, one clear task, a few constraints, and a tone to aim for.
Think: experienced web designer, helpful builder, or calm project partner.
Who it serves, what kind of page or tool it is, and why it exists.
One small build, not a vague dream app.
Keep it simple, keep it local, do not over-design it, include the practical sections that matter.
Warm, grounded, practical, calm, playful, trustworthy. These words steer more than people expect.
Choose a ready brief, then use this as a mental model for what a decent first pass might feel like before you start steering version two.
- Pick a project that feels real enough to care about.
- Paste the brief and let the build finish.
- Notice what feels promising and what feels off.
🔄 Steer one second draft
The first build is not the point. The real skill is how you steer what comes next. Good vibe coding is mostly good iteration.
“This feels cramped” or “this sounds too corporate” is far more useful than “I don’t like it.”
“The hero is good, but the call to action feels flat” gives the AI somewhere clear to work.
One or two strong moves are easier to judge than a ten-part rewrite.
Warm, local, calm, playful, trustworthy, understated. These often matter as much as the structural bits.
Choose one feedback move and the second-draft prompt will appear here.
Useful next-change ask: “Keep the structure you already made. Focus on the hero and call-to-action only. Make it feel more local to Aotearoa, strip out the corporate tone, and do not redesign everything else yet.”
🧯 Rescue one common wobble
This happens to everyone. A weird first draft does not mean you are bad at this. It usually means the AI guessed wrong, changed too much, or drifted away from the brief.
It looks like generic AI slop
Tell it what feels fake or overcooked. Name the tone you do want instead of just saying “make it better”.
It changed way too much at once
Get it to slow down and work in smaller moves. Big sweeping rewrites are where people lose trust.
It ignored the brief
Make it compare the current version against the actual brief so it has to notice the mismatch.
The layout is broken
When something visually breaks, name it plainly and ask for diagnosis first instead of another blind rewrite.
If you did these five beats, you did the module: recognise the panes, open the tool, paste one ready brief, steer one revision, rescue one wobble.
First build done.
You do not need to know everything yet. If you can recognise the panes, open one build space, paste a clear brief, and steer one next draft, you have already crossed into real building.
Want to go deeper before Module 6?