Before you begin
Ready to build?
One file called index.html, in your
personal-site folder — that's the whole deliverable, and it's small on
purpose. A good version introduces you clearly, shows selected work, gives a recruiter
one next action, works at laptop and phone widths, and contains nothing private. No framework,
no account, no deployment — putting it on the internet is next session. Check these first;
they prevent the two most common stalls.
Check
Pace yourself against the clock
Time left on the room timer — not the time of day.
Step 1 of 2
Let Claude interview you
before it builds
The move worth stealing from today: make it extract the brief before it generates anything. A vague desire becomes an explicit brief — on the record, where you can correct it.
Help me build a one-page personal website as a single self-contained index.html. Before coding, interview me one question at a time — no more than four — about the audience, the impression I want to leave, the evidence I should show, and the visual direction. Summarize the brief and wait for my approval. After approval: create or replace index.html in this folder. Tell me when it's written — I'll open it myself.
Paste it into the box where you type in the Code tab — the same box you used in setup, with
personal-site open — and press Enter. Answer its questions one at a
time; rough answers are fine. Then approve the brief, and approve the edit when Claude asks:
in Manual mode nothing is written to your folder until you say yes.
What should happen
Done when
If something's wrong
I pasted it and nothing is happening
Look for an approval prompt in the chat and accept it — in Manual mode Claude waits for you before it writes anything. If there's no prompt and no reply, press Enter once more in case the paste didn't send.
Still nothing after two minutes? Raise your hand — show us the screen, don't start over. Don't retype the prompt.
It skipped the interview and just built something
Say: "Stop — you skipped the interview. Ask me the four questions one at a time before changing anything else." Then keep going. Redirecting mid-flight is normal.
Its questions are generic, or it asks all four at once
Push back in the same sentence you answer with: "One at a time, please — and ask me something you couldn't have asked anyone else in this room."
I don't know what to say about "visual direction"
Name two adjectives and a reference. "Quiet and serious, like a consulting firm's about page" is a complete answer. Or ask it to propose three directions and pick one — choosing is faster than inventing.
The first version looks bad
Good — that's the exercise starting, not failing. Don't say "make it better." Name the observed problem and protect what works: "The headline is too small and the spacing is cramped. Keep the colours and the structure."
Step 2 of 2
Build in three passes
One concern per pass. Finish a pass before adding features — features multiply, passes converge.
The passes
- Content — name, story, evidence Ask yourself: is the story clear? Nothing else matters until it is.
- Direction — type, colour, layout Ask yourself: does it feel like me?
- Polish — links, widths, wording Ask yourself: does everything actually work?
If a pass doesn't pass — example prompts
One fix per message, and say what to protect. These are examples: describe what you saw on your page.
A stranger can't tell what I do or why it matters. Rewrite the opening so the first two lines say who I am and the one thing I want to be remembered for. Keep the sections and the design exactly as they are.
It doesn't feel like me — it reads corporate and generic. Change only the type, the colours and the spacing to something warmer and simpler, two colours at most. Don't touch the words or the section order.
Two things don't work: the LinkedIn link goes nowhere, and at phone width the name overlaps the photo. Fix those two only, then tell me what you changed. Everything else stays as it is.
Done when
If something's wrong
Every change breaks something else
You're asking for too much at once. Make one change per message, and say what to protect: "Change only the header. Leave everything else exactly as it is."
If it's badly tangled: "Go back to the version before my last three changes."
I'm polishing colours and the story still isn't clear
Very common, and worth catching in yourself. Pass 2 is more fun than pass 1 — which is exactly why pass 1 gets skipped. A clear unstyled page beats a beautiful vague one, and the debrief will show it.
I've run out of things to ask for
Ask Claude: "What's the weakest part of this page for a recruiter who has eight seconds?" Then fix that one thing.
I'm out of time
Stop building. When the swap is called, the four questions are on the screen at the front — trade laptops and bring whatever you have. A half-finished page that a real person has read beats a better page nobody has seen.
The folder isn't going anywhere — you can keep going after class.
You built something.
You turned a vague intention into a written brief, approved it, watched a file appear on your own disk, and steered it with specific corrections. That loop — observe, describe, change, check — is the entire job.
Next: the same loop, pointed at something that exercises judgment instead of following instructions.