The Look Book.

Why a look book

Designers in fashion and film keep look books because you can't describe a vibe in words alone. "Confident but warm" means twenty different things to twenty different people. A folder of screenshots, paired with notes on what you like about each, makes the vibe specific.

For a website, the look book is the bridge between "the client wants something modern and warm" and "here's the actual hero treatment, type pairing, and animation pattern we're going to use." Without it, you and Claude are guessing.

"The look book is not a Pinterest dump. It's a curated set of references with reasons."

The four places you shop

I split my shopping into four categories. They answer different questions.

1. Beautiful sites — for the overall vibe

These are the awards-bait, designer-y sites where you scroll and feel something. You're shopping for tone, layout rhythm, animation pacing, the way images and type live together. You're not copying any one site — you're sampling the energy.

2. UI element sites — for specific components

Once you have a vibe, you start noticing specific elements: a button hover, an animated underline, a card with a glowing border. UI element sites give you copy-paste code and live previews so you can grab the exact treatment.

3. Type and text-on-page — for how words feel

This is the most overlooked category and often the difference between "looks fine" and "looks expensive." How big are the headlines? Do they sit on a grid or break it? Is body text generous or tight? Are pull quotes used? Is there a serif/sans pairing or all one?

4. Templates and wireframes — for practical layout ideas

You don't have to shop only fancy award-winning sites. Templates and wireframes are unpolished but practical: they show you how a card grid actually fits together, where a CTA usually lives in a hero, what a services-comparison table tends to look like. Use them to settle questions about structure rather than vibe.

How to actually save things

Don't just bookmark. Bookmarks are graveyards. Build a folder per project. Inside it, save:

1. The screenshot

   Cmd+Shift+4 on Mac. Capture the specific section you like, not the whole page. Crop tightly so when you look at the folder later, the thing you cared about is visible.

2. The URL

   In a text file or a Google Doc next to the screenshots. You'll want to re-visit later and may want to reference more sections.

3. The reason in one sentence

   "I like the way the headline overlaps the image without becoming illegible." "I like the soft shadow under each card." "I like how slow the scroll feels here." Specific.

I keep a doc per project called look-book. Three columns: screenshot, URL, why. By the time I finish shopping for a client, that doc has 15 to 25 entries. That's the design brief.

For UI elements: save the CSS too

When you're shopping on UIverse, Aceternity, or similar sites that give you the actual code, grab the CSS on the way. Don't just bookmark the page and tell yourself you'll come back. Copy the CSS (and HTML if it's not obvious) into your look book doc right next to the screenshot.

Why: when you sit down to build, you can paste the CSS straight to Claude with "this is the button effect I want — adapt it to my brand colors and use it for the donate button." Claude has a working starting point instead of trying to recreate the effect from a description. Saves time and gets closer to the look you actually liked on the first try.

Bonus: skim the CSS as you save it. You'll start picking up patterns — how rounded corners and soft shadows interact, what makes a hover feel "smooth" versus "snappy." Reading other people's CSS is one of the fastest ways to develop taste.

Pro tip: have Claude build the look book for you

You don't need Claude Code for this. Just open claude.ai in a browser and start a new chat. Tell Claude you're building a look book for a client and you want it saved as an HTML page (or a PDF — Claude can do either). Then as you find references, paste them in one at a time:

"Add this one: [URL]. Why I like it: the headline overlaps the image without becoming illegible, and the body type feels confident without being heavy."

Claude updates the file each time. When you're done, download the HTML or PDF, and you have a polished, designed reference document instead of a sad Google Doc with screenshots glued in. You can later drop the HTML into your repo and use it as part of the project's living documentation. (Putting things in a repo is covered in Chapter 04 and Chapter 09.)

Why this is better than a Doc:

• Claude does the layout work — you just pour in the raw references and reasons.
• You can ask Claude to group references by category, summarize themes, or pull out patterns ("which references mention warmth?"). The doc becomes interrogatable.
• The HTML version lives in a browser. You can open it next to your build later and reference it side by side.
• Claude can save a PDF if your client wants to review it without you having to remake the doc.

The only thing to watch: don't paste copyrighted screenshots into a public version of this look book. Reference URLs and your written reasons are fine. Screenshots are for your private reference doc.

The "why" rule

This bears repeating. Every reference needs a reason. If you can't articulate why, the reference isn't useful — it's just a thing you saw.

The reasons train you. After a few projects you'll start noticing patterns: you keep gravitating to sites with generous line-height, or with one bold accent color, or where the hero is half image / half type. Those patterns become your point of view.

Translating references into your build

You don't copy any single reference. You synthesize. The vibe is a blend. The button might come from one site, the type pairing from another, the scroll feel from a third. When you sit down with Claude in chapter 07, you'll paste references with their "why" notes and ask Claude to capture the same effect — not to copy.

Make the repeating decisions on purpose

Most of the "vibe" of a site comes from a handful of small decisions that repeat everywhere. They're easy to make accidentally — Claude picks defaults, you forget to look, and now your site has six different button shapes for no reason. Decide them deliberately, before you build.

The big ones to lock in from your look book:

• Corner radius — sharp, lightly rounded, or heavily rounded? Apply consistently to cards, images, buttons, inputs.
• Button shape — square, rounded, or pill? Filled or outlined? Solid or with an icon?
• Image treatment — plain, with an offset border, polaroid-tilted, in a circle, with a soft shadow, "floating" with a colored shape behind, framed by a gradient. Pick one or two and use them across the site.
• Hover effects — does stuff lift on hover? Scale? Glow? Or stay static? Whatever you pick, apply consistently.
• Animation pacing — snappy (200ms), smooth (400ms), or cinematic (700ms+)? Sites that mix all three feel chaotic.
• Spacing rhythm — tight and dense, or generous and breathy? Spacing between sections, between elements, between paragraphs.

You'll see your references answer most of these for you if you look. The reference site you loved with the polaroid testimonials? You're using polaroids. The site with the dramatic blue glow on the buttons? That's your CTA treatment. Pull the decisions out of your look book and write them down — even just one line each, in a doc somewhere. Then when you sit down with Claude, those decisions are already made.

Common mistakes

• Shopping forever. Set a timer. 2-3 hours is plenty for most projects. The 19th reference is rarely better than the 12th.
• Pasting references without "why." See above. Useless without reasons.
• Trying to combine too many sources. 3-5 strong vibe references, plus a handful of element-specific ones. More dilutes the direction.
• Showing the client the look book. Don't. The look book is for you. Showing clients raw references creates Frankenstein design discussions ("I want THIS hero with THAT navigation"). Translate it into a design first, then show them the design.

What's next

You have a sitemap, a content matrix, and now a look book full of references with reasons. You're ready to actually start building. Next chapter is the boring-but-critical setup work: getting Claude Code installed and your project folder ready.