🧠 Context is everything
The single biggest difference between frustrating vibe-coding sessions and productive ones is how much the AI knows about your project before it touches anything.
When you start a fresh conversation and paste a prompt, the AI is guessing at your whole project from a single message. It doesn't know what files exist, what you've already built, what you're trying to achieve overall, or what you tried last time. It's guessing. The output reflects that.
The fix is to front-load context deliberately, every session. Here's what that looks like:
That last line is important. You're making the AI prove it understood before it acts. It only costs ten seconds and it prevents the single most common failure mode in vibe-coding: the AI confidently rewriting the wrong thing.
Power user move — context files. Many IDEs (Cursor, VS Code with Cline, Claude Code) support a project-level instruction file. Create a file called CLAUDE.md (for Claude Code) or .cursorrules (for Cursor) in your project root. Every AI session in that folder automatically starts with that context loaded. You stop retyping it every time.
Here is what a real CLAUDE.md looks like. Adapt this for your own project:
📸 The screenshot-to-code move
This one legitimately surprises people every time it's demonstrated live. You take a photo of anything — a competitor's website, a napkin sketch, a Figma mockup, a page from a magazine — and you tell the AI: "Build this."
The result is never pixel-perfect. But it's usually 80% of the way there in about 30 seconds, which is 80% more than you had before. From there you're steering and refining, not staring at a blank canvas.
Best models for this: GPT-4o (ChatGPT) and Claude Sonnet are both strong at image understanding. Gemini 2.0 Flash is also excellent — and free. If you're using Google AI Studio (introduced in Module 3), multimodal input is built right in.
📁 When your project gets bigger than one file
Everything in Modules 5 and 6 assumed a relatively simple project — maybe one HTML file, some CSS, a bit of JavaScript. At some point your project gets bigger: multiple pages, a stylesheet, scripts, images, a database. The moment that happens, vibe-coding without structure starts producing broken things.
The fix isn't to become a developer. It's to describe the structure to the AI clearly before asking it to do anything.
That last line saves an enormous amount of time. If your file is 400 lines long, you don't want the AI to paste all 400 lines back at you with a 3-line change somewhere in the middle. Asking for "only the changed section" makes it diff-style — you can find and apply the change yourself.
Agentic IDEs handle this automatically. Cursor, Claude Code, and Cline can read your whole project folder and understand the structure without you explaining it. This multi-file prompt technique is most useful when you're working in a basic browser-based AI chat rather than a full agentic tool.
Go deeper: The Economics & Your Stack branch module covers choosing and paying for the tools that fit your project. Branch modules on MCPs (model context protocol), RAG (retrieval-augmented generation), and advanced Git are in development — watch the workshop home page for when they land.
🩺 The debugging loop — your exact script
Something broke. It always does. Most people either panic and start asking vague questions, or they paste 200 lines of code and say "what's wrong?" — both of which produce slow, confused responses.
Here is the precise script that works every time:
"Before you fix it, explain in one sentence what is causing the problem." This prevents the AI from blindly trying things and ensures the fix is actually right."Applied your fix. Now the error is [new error]. Same expected behaviour." Never start a new conversation for a continuing problem — the context is in this thread.Expected: the booking form to render. Instead: blank section + console error.
Relevant code: [paste booking.js:30–40]
Before you fix it, explain in one sentence what's causing this.
formData prop isn't being passed to BookingForm — it's undefined when the component tries to read from it on line 34.💾 Checkpoint commits — your undo button
The biggest mistake experienced vibe-coders make is building for too long without saving a checkpoint. You get into a productive flow, make ten changes, then one of them breaks something subtle that doesn't show up until three changes later. Now you don't know which change caused it, and rolling back is a nightmare.
The rule is simple: any time something works, commit it. Even if it's not finished. Even if it's messy. A commit is just a saved snapshot — you're not publishing anything, you're just putting a flag in the ground that says "it worked here."
Good descriptions: working: nav links all correct, working: contact form submits. You don't need Shakespeare — you need something you'll recognise at 11pm when everything's broken.
To undo to a previous commit: Run git log --oneline to see your history, then git checkout [commit-hash] to jump back to a working state. This is your safety net. Use it freely.
Slash commands in agentic IDEs — if you're using Claude Code or Cursor, type /help in the AI panel to see the full list of built-in shortcuts. Key ones to know: /clear — fresh context window, keeps your project files; /commit — generates and runs a commit message for you; /review — asks the AI to review the last change. These are faster than typing the long-form request every time, and they stack well with the checkpoint commit habit.
🛒 Model shopping — right tool, right job
By now you know that different AI models have different strengths. As you build more complex projects, knowing when to switch models mid-build becomes a genuine skill. You don't have to pick one and stick with it.
You are not locked in. Copy the relevant code, paste it into a different model with a clear question. The model doesn't care that you were using someone else five minutes ago. Use whichever one solves the problem in front of you.
Going further: Module 8 shows you how to build agents that combine several of these models in a single workflow. The Economics & Your Stack branch module covers which subscriptions are worth paying for and how to build a stack that doesn't overlap.
🌐 The open-source agent landscape
Since late 2024, GitHub has been flooded with open-source frameworks that try to make AI more "agentic" — able to browse the web, run code, use APIs, and complete multi-step tasks autonomously. Repos with names like AutoGPT, OpenHands, and various others have accumulated millions of stars.
They are worth knowing about. They are generally not worth building your practice around right now — at least not until you're comfortable with the fundamentals in this series. Here's an honest picture:
- The capabilities are real. These frameworks can do impressive things — autonomous research, multi-step coding tasks, web navigation.
- The setup overhead is high. Most require Python environments, API keys wired up correctly, and comfort with the terminal. If Module 4 was a stretch, these are a further stretch.
- They move fast and break things. Repos that were the hot thing six months ago may be abandoned or superseded. Documentation lags behind reality.
- The underlying models are what you're paying for. Most of these frameworks are calling Claude, GPT-4o, or Gemini under the hood — the same models you already have access to. The framework is a wrapper, not magic.
The honest path forward: Get comfortable with direct agentic tools like Claude Code, Cursor, or Cline before exploring the open-source frontier. Module 8 (Make Your Own Agent) will give you the understanding to evaluate these frameworks intelligently — rather than being impressed or overwhelmed by them arbitrarily.
✅ Technique tracker — which ones have you tried?
Before you move to the exercises, take stock. Tick any technique you have actually used — either today or in a previous session. You do not need to have mastered it. One real attempt counts.
Open the project from Module 5 or 6. Find something that never quite worked, or try to add one new feature. When (not if) something breaks, use the exact debugging loop from Section 4.
- Open your build from Modules 5 or 6 in your IDE or build space.
- Attempt to change one thing: a layout fix, a new section, a colour change, anything.
- When something breaks (or if something was already broken), paste the error + expected behaviour + relevant code using the exact 5-step script from this module.
- Apply the fix. Make a commit:
git add . && git commit -m "working: [what you fixed]"
No build yet? Use this pre-broken snippet instead →
This HTML has three intentional bugs. Paste it into a new file in your build space (or directly into AI Studio Build mode). Your goal: use the 5-step debugging loop to get the AI to identify and fix all three bugs without just rewriting the whole page.
Hints if you're stuck: there are CSS property typos, a missing semicolon in a CSS rule, and an unclosed HTML tag. But use the debugging loop first — let the AI find them.
Find something visually interesting — a website you admire, a poster on the wall, a page in a magazine. Screenshot or photograph it. Build a version from scratch using only that image as reference.
- Take a screenshot of any visual (phone screenshot, right-click "save image" on any web page, or photograph something physical).
- Open ChatGPT or Claude. Upload the image.
- Paste this prompt: "Build this as a clean, responsive HTML/CSS page. Match the layout and visual structure. Use placeholder text — do not copy any real text from the image."
- Paste the resulting code into a new file in your build space. Preview it.
- Make two steering edits using what you know: adjust the colour palette, add a section, change a font.
Module 7 done. You're dangerous now.
Context loading, screenshot-to-code, the debug loop, checkpoint commits — these are the habits that turn vibe-coding from a novelty into a practice. One module left: building your own agent.
Go deeper on what you just built: