Lesson 19 · Vibe Mastery boss · about 60 minutes

🎬 VIBE BOSS: Direct the AI Like a Movie Director

A movie director doesn't hold the camera. But the director decides EVERY shot — and rejects the bad takes. Today you direct the AI through THREE real features on your landing page. This is the boss level of everything you've learned.

🎬 Watch first (90 seconds)

You don't hold the camera anymore

Think about how a movie gets made. The director doesn't operate the camera, doesn't hold the microphone, doesn't do the stunts. The crew does all that. So what does the director do?

You + AI works exactly the same way. The AI is your super-fast camera crew: it types the code. But YOU decide what gets built, YOU review every take, and YOU reject the bad ones. A director who accepts every take makes a terrible movie. A vibe coder who accepts every AI answer makes a terrible website.

💡 The one idea of this lesson: the Director's Loop Every feature you build with AI goes through these five steps, in order:
  1. PLAN 📝 — Before you prompt anything, write down what you want in plain words. What does it look like? What happens when you click? Which section of the page does it live in? No plan = mystery movie.
  2. PROMPT 🎯 — Ask for ONE small feature at a time, using your 5-ingredient order from Lesson 16 (what, where, look, behavior, rules). Never "build me everything" — that's ordering the whole menu and getting soup on your ice cream.
  3. REVIEW 🔍 — Detective method from Lesson 17, BEFORE the code touches your file. Skim it. Name every id and class the AI invented. Find the thread: which button connects to which element? Never paste in code you haven't skimmed.
  4. TEST 🖱️ — Paste it in, save, refresh, and click EVERYTHING. Console open (Lesson 18) so silent bugs can't hide from you.
  5. COMMIT or REJECT ✅❌ — If the take is about 80% right, keep it and ask for the missing 20%: "Great — now make only the button bigger." If it's confusing garbage, say CUT: delete it and re-prompt with a better order. Takes are FREE. You're the boss.
Plan → Prompt → Review → Test → Commit or Reject. Loop it for every feature. That's the whole job of a vibe boss.
⚠️ The one rule you may never break NEVER accept code you can't explain. If a line looks like alien writing, ask the AI: "Explain line 4 like I'm 10." Keep asking until you could explain it to your little cousin. Code you don't understand is a stranger living in your house.

🛠️ The mission: three features, three director's loops

🧪 Your mission Upgrade your practice/landing.html with THREE AI-built features. Run the full Director's Loop for each one. By the end, your landing page has an FAQ, a dark mode, and one dream feature YOU chose — and you can explain every line of all three.
  1. PLAN feature 1 — the FAQ. On paper (or in a comment at the top of your file), write: "An FAQ section with 3 questions. Clicking a question shows or hides its answer." Decide where it goes on your page. You already know the secret engine: classList.toggle!
  2. PROMPT it. Give your AI teacher a 5-ingredient order. Something like: "Add an FAQ section to my landing page. 3 questions about my product. Clicking a question shows/hides its answer using classList.toggle. Match my page's colors. Plain HTML/CSS/JS, no libraries, and explain each part."
  3. REVIEW like a detective — before pasting! Read the take. Say OUT LOUD every id and class the AI invented (faq-item? open? question?). Follow the thread: which click listener toggles which class on which element? Can't find the thread? Ask "explain line X like I'm 10" until you can.
  4. TEST it. Paste, save, refresh — Console open. Click all 3 questions. Click them twice (does hiding work too?). Then demand one small change to prove you're the director: "Make only the question text bold when its answer is open."
  5. Feature 2 — dark mode. PLAN + PROMPT. The plan: "A 🌙 button in my header. Clicking it toggles a class called dark on the body, and my CSS has .dark rules for dark colors." Prompt exactly that — you've already decided HOW it should work, so the AI can't wander off.
  6. REVIEW + TEST dark mode. Find the toggle thread: button → listener → classList.toggle("dark") → .dark CSS rules. Test it: does EVERYTHING go dark, or did the AI forget your cards or your footer? If something stays light, that's your 20% fix: "The footer stays white in dark mode — fix only that." Then one director's demand: "Make only the moon button bigger." (Watch that it doesn't resize other buttons — AIs love to over-change!)
  7. Feature 3 — YOUR dream. Full loop, solo. A photo gallery? A countdown to your birthday? A button that plays a sound? Dream it, PLAN it in words, order it small, review it, test it, demand one change. This one is 100% directed by you.
  8. The director's cut review. Scroll through everything the AI added to your file. For each id and class, say what it does. Find one you can't explain? You know the drill: "explain this like I'm 10" — and don't stop until it clicks. Somewhere in these three features, at least ONE take should have been rejected or fixed. If every take was "perfect," you weren't watching closely enough. 🎬

🕹️ Try it right here — the director's cut

An AI just delivered this dark-mode take. It WORKS — click the button in the preview and watch the colors flip! But working is not the same as done. You're the director, and you have notes.

📋 Your director's notes — demand these 3 changes
  1. The button just says "Toggle". Boring take! Make the button show 🌙 (or at least the word dark) so visitors know what it does.
  2. Dark mode forgot the headline — the <h1> keeps its bright color on a dark page. Add a .dark h1 rule to the CSS with a color that glows nicely on dark (try gold or #7fd4ff).
  3. The AI named the button id="btn1". Vague names are how bugs hide! Rename it to something readable like moon-btn — in BOTH places (the button AND the script), or the thread snaps and the button dies.

🏆 You are now a VIBE BOSS

Check every box honestly — this is your boss-level scorecard:

🎓 Earn your learning record Show your teacher the finished page and tell the story: which take did you REJECT, and why? "The AI's first FAQ used weird names and I couldn't find the thread, so I said CUT and re-prompted" — THAT story is what earns your learning record. Directors are remembered for their cuts, not just their keeps.

What's next? Your page lives on your computer... for now. Next adventures: publishing it to the REAL internet so friends can visit it from anywhere, and making it look great on phones. Your movie is ready for the big screen. 🍿

🎮 Quiz time

No peeking at the notes above — trying to remember is what makes it stick!

📚 Want more?

⭐ Best thing to read next MDN: Publishing your website — your pages deserve the real internet! This official guide shows how a website goes from "on my computer" to "anyone in the world can visit." Read it with a parent — publishing means picking real internet accounts together. And keep the Glossary handy for any word you meet.