№ 01
Daily
Awwwards
awwwards.com · Site of the Day
The source. Browse "Sites of the Day" back six months. Look for hero typography moves, scroll interactions, and color restraint. Screenshot anything that lands.
Taste is pattern-matching. You can't prompt what you haven't seen. 5-10 min/day in these feeds, for four weeks, and your eye will sharpen measurably.
The source. Browse "Sites of the Day" back six months. Look for hero typography moves, scroll interactions, and color restraint. Screenshot anything that lands.
Weird, distinctive, maximalist, brutalist. The antidote when you catch yourself drifting toward safe Stripe-clone design. Where to look when the brief says "make it bold."
Better filters than awwwards. Scope to "type-focused," "minimal," "editorial," "agency." When you need reference for a specific aesthetic, this beats scrolling twitter.
Narrower scope than awwwards — product pages specifically. Your go-to when a brief needs conversion structure (hero, benefit, proof, CTA) without looking like every other SaaS.
The typography lens on web design. Weekly "Site of the Week" always notes the typeface choices. After a month of reading this, you'll start recognizing fonts in the wild.
Not just web — print, branding, signage. See how professionals pair type in context. Search any font you're curious about and see dozens of real projects using it.
Instead of skimming 100 portfolios, pick six and read all their case studies. Each one has a signature. After two weeks you'll recognize stylistic DNA at a glance.
Signature: scroll-as-narrative, big motion, editorial typographic rhythm. They built the library most sites use for smooth scroll. Study how they orchestrate page choreography.
Signature: wild, loud, brutalist leanings. Aggressive type, saturated color, no safety. Study how they make overwhelm feel deliberate instead of cluttered.
Signature: narrative-driven scroll journeys, film-grade production. When a site needs to feel like a short film rather than a document, this is the reference point.
Signature: calm, editorial, restrained motion. The opposite of Obys. Study how confidence comes from leaving things out, not adding more. Masters of negative space.
Signature: WebGL, game-like interactions, playful brand moments. When the brief wants a toy on the homepage, this is the reference. Study their microinteraction quality bar.
Signature: next-level WebGL, experimental brand experiences. Where the entertainment industry goes for digital flagship sites. Study for ambition, not to imitate directly.
Generic sites say "artisan coffee, expertly crafted." Distinctive sites say "twelve-kilo batches on a 1978 drum named Mabel."
Three references worth reading once and consulting often. Skip novels on design theory — these three will lift your floor more than any semester of art school.
The single best "how to make things look good" book for non-designers. Every chapter teaches one principle (hierarchy, spacing, color, type) with before/after examples. Read twice: once at Chapter 1 intensity, once for reference.
Butterick is a typographer who became a lawyer who became a typographer again. Opinionated. Punchy. Start with "Summary of Key Rules" — it's a cheat sheet for 90% of typographic decisions you'll ever make.
The blog for when you want to understand why a CSS trick works, not just copy it. Start with his posts on shadows, custom cursors, and animated gradients. Interactive writing at its best.
If you want before/after design fixes in 30-second doses, Steve's feed is the best free alternative to Refactoring UI. Bite-size, immediately actionable, visual. Scroll his last year.
After a week of feeds, write your own "how to prompt for distinctive sites" doc. List your banned fonts, favorite palettes, go-to motion tricks. Keep it in Notion. Paste it into every build.
Read the actual system prompt that ships with Claude Code's frontend-design skill. It tells you exactly what Claude tries to do when distinctive design is requested — so you can prompt the same things directly in claude.ai.
Vocabulary without practice is trivia. Two reverse-engineers per week, for four weeks. After twenty rounds, your prompts will be shorter and your output will be sharper.
From Awwwards' Sites of the Day or Godly's feed. Pick something distinctive — if it looks like Stripe, skip it.
Hero + one other (product, about, footer — whatever stood out). Paste into a Notion page.
Before looking at devtools: describe the aesthetic direction, palette, type choices, motion, and what to avoid. One paragraph.
Ask Claude to build it from your prompt. Open the result next to the original. Note the gap — precisely, not as a vibe.
What did Claude guess? What didn't you specify? Revise your prompt and re-run. Save the working prompt in your personal prompt library.
Twenty reps is the inflection point. You'll start composing prompts the way a musician composes — in idiom, shorthand, with confidence.
Bookmarks don't compound. Practice does. Tick one item today — any one — and you're already further than most people who read a guide like this.