Director mode: prompts that hit first try

Your mission

Write a “build order” prompt that gets Claude to build a working quiz page on the first try, then compare it with a lazy prompt to see why the difference matters.

Why it’s worth it

When Claude builds the wrong thing, it’s usually not because it’s bad at coding. It’s because it had to guess. “Make a cool quiz” leaves a hundred decisions open: what topic, how many questions, what happens at the end, one file or three? Claude picks something, and it’s rarely exactly what was in your head.

Directors don’t say “make a cool movie”. They say what happens in the scene, where, and how it should feel. Give Claude the same kind of brief and it nails it way more often. And every first-try win saves you a round of “no, not like that”.

The build order: four parts

A strong prompt answers four questions. You don’t need fancy words, just these parts:

Part	Answers	Example
Goal	What are we making?	“A 5-question quiz page about the solar system”
Context	Where does it go, what does it connect to?	“In a new file quiz.html in this folder”
Rules	What must it do, or not do?	“One question at a time, plain HTML/CSS/JS in one file, no libraries”
Done means	How do we know it works?	“It opens in a browser and the final score adds up correctly”

The last one is the secret weapon. When Claude knows what “done” looks like, it can check its own work against it, and fix problems before telling you it’s finished.

Build it

Start Claude in your speedrun-lab folder.

1. The lazy version first. Try this on purpose:

make a quiz

What you’ll see: Claude builds something. Maybe a general-knowledge quiz, maybe in three files, maybe it asks you a question first. Open it and notice how many decisions Claude made for you. Some might be fine. Some probably aren’t what you’d have picked.

2. Respawn. Press Esc twice and restore the code from before that prompt (lesson 1.3), so you’re back to a clean folder.

3. The build order. Now paste this, or adapt the topic to something you’re into:

Goal: a 5-question multiple-choice quiz page about the solar system.
Context: a new file quiz.html in this folder.
Rules: one question at a time with 4 answer buttons; the right answer turns
green and a wrong one turns red; show the score at the end with a
"Play again" button. Plain HTML, CSS and JavaScript in one file, no libraries.
Dark theme to match index.html.
Done means: it opens in a browser, you can play all 5 questions, and the
final score is correct.

What you’ll see: Claude reads index.html to match the style (because you told it to), builds quiz.html and often double-checks its scoring logic before finishing. Open it and play a round. It should match what you asked for almost exactly.

4. Make one precise tweak. Pick one thing you’d change and ask for exactly that:

Put the answer buttons in a 2x2 grid, and add a progress bar showing
which question I'm on.

What you’ll see: a focused edit, not a rewrite.

Look at you go. That’s the difference between hoping and directing.

Upgrades for your prompts

• Point at files with @. Type @ and pick a file from the list, like @index.html, to tell Claude exactly which file you mean. It’s faster than describing it.
• Show an example. “Questions like: Which planet is the hottest? Venus” tells Claude the style instantly.
• Say what NOT to do. “Don’t add any images” or “don’t change index.html” stops Claude being too helpful.
• One change per message when tweaking. Three changes at once makes it harder to tell which one broke something.

When Claude gets confused

• It built extra stuff you didn’t ask for (a timer, sound effects…). Claude sometimes tries to be extra helpful. Add a rule: “Only what I listed, nothing extra”, or just ask it to remove the extras.
• It changed a file you didn’t want touched. Say so and add the rule to your next prompts: “Don’t change index.html.” Rewind if needed.
• The quiz scores wrong. Describe the exact moment it goes wrong: “After a wrong answer on question 2, the score still goes up.” Specific symptoms get specific fixes.

Did it work?

• You tried a lazy prompt and a build-order prompt, and saw the difference
• Your quiz.html works and scores correctly
• You made a precise follow-up change
• You used @ to point at a file at least once