Your look, on file
Steal a look, keep it forever
Where: Claude Code · Folder: the same
my-contextfolder from Exercise 1.3Start a new Claude Code session
before you begin.
person.md taught the agent how you sound. This one teaches it how your work should look.
Everything you've built so far came out in the agent's default taste — grey boxes, system fonts, safe blue. That's what "no design brief" looks like. The fix is the same move as last exercise: describe it once, file it, never think about it again.
Fifteen minutes. Three prompts, one of which you've typed before.
Step 1 — Take a design apart
Prompt:
Fetch https://www.prosus.md/ and study the design: colours (give me the actual
hex values), fonts, sizes, spacing rhythm, how much white space it uses, how
buttons and links look, and the overall feel in one sentence.
Turn that into design.md in this folder — written so another agent can style
anything from it without seeing the original site. Rules, not adjectives.
Then show me the palette.
"Rules, not adjectives" is the important line. #0A21C0 is a rule. "Modern and clean" is an adjective, and adjectives produce grey boxes.
Step 2 — Wire it in, same as before
Prompt:
Import this design.md from my global CLAUDE.md at ~/.claude/CLAUDE.md, next to
the person.md import. Add one condition: whenever you build a webpage, slide,
document or anything else I will look at, style it from design.md unless I say
otherwise.
Step 3 — Watch it apply itself
Start a new Claude Code session in a fresh empty folder. Run the Exercise 1.2 snake prompt again — unchanged, no mention of design:
Prompt:
Create a HTML based snake game with the following features:
- Make at least three levels
- Add an onboarding flow
- Make sure it has a theme song on the main menu
Same words as Exercise 1.2. Different-looking game.
Stuck?Debrief — what should have happened
- A
design.mdsitting next to yourperson.mdwith real hex values in it. - A snake game that came out on-brand without the word "design" appearing in the prompt.
Compare the three snakes now: 1.1 (nothing), 1.2 (a spec in the prompt), 1.4 (a spec on file). The output improved twice, and the prompt got shorter the second time.
That's the shape of the whole course. You are not trying to write better prompts. You are trying to need fewer of them.
Stuck?FAQ for this exercise
Q: Can I point it at our real brand site instead? A: Yes — swap the URL for any site you like the look of. Your own product, a competitor, a site you admire. Some pages block automated fetching; if it comes back empty, take a screenshot and drag that in instead.
Q: The colours it pulled are wrong. A: Tell it. "The accent is #0A21C0, not blue-ish — reread the CSSCSSCascading Style Sheets — what makes a web page look the way it does: colors, fonts, spacing, layout. The styling layer on top of HTML. and fix design.md." Fetching a live page is guesswork at the edges; correcting the file once fixes it forever.
Q: Is a screenshot as good as the URL? A: For colour and feel, nearly. For spacing and font sizes, no — those live in the CSS, and the agent can only read them from the real page.
Q: Now everything looks the same. Is that good? A: That's the point of a brand and the enemy of a portfolio. Say "ignore design.md for this one" whenever you want to break out.
OptionalGo deeper
Two files, one collision:
Read person.md and design.md. Build me a single-page personal profile for
myself — written in my voice, styled in my design. Deploy it to Vercel.
Twenty seconds of typing produces something you'd normally brief an agency for. Neither file mentioned "personal profile"; you're now composing contextContextEverything Claude can see right now — the conversation so far, the files it has read, the tool results, the system instructions. A big text buffer the model reads end-to-end before every reply. instead of writing instructions.