Where to Find Design Inspiration Before You Prompt Claude

Where to find design inspiration before you prompt Claude

Claude can build a good-looking website, but it doesn't actually know what great design looks like. Models like Fable 5.1 and Opus were trained on millions of websites, so when you ask for something "modern," what you get back is roughly the average of everything they've seen. The fix isn't a better prompt. It's giving the model something visual to aim at, then letting it iterate against that reference until it clears the bar. Claude can't read your mind, and describing a style in words is a much weaker signal than just showing it examples.

I use six kinds of sources most often. Here's what's actually in each one.

Design award galleries

Sites built around design competitions are the first stop. Awwwards is the best-known one: it collects some of the best web design on the internet and lets you filter by category, so if you're building for a specific industry, you can browse real work in that exact space. Open one of the featured sites and you get the full experience, animations, typography, layout, spacing, live in the browser instead of a static screenshot.

Once you find a layout worth referencing, a full-page screenshot tool (GoFullPage is a free Chrome extension that does this well) scrolls through the entire page and stitches it into one image. Drop that image into Claude and it becomes part of the context for whatever you're asking it to build. For a single component rather than a whole layout, a smaller, targeted screenshot works better than the full page.

Two more galleries worth knowing: Site Inspire, which filters by style, subject, or platform, useful when you're designing for a specific kind of audience; and Lapa Ninja, focused specifically on landing pages, with filters for color scheme, industry, and even motion, handy if animation is the thing you're actually trying to reproduce.

Real-world app libraries

Award galleries show you the best of the best. Real-world app libraries show you what's actually shipped and in production. Mobbin is the biggest one I use, over 600,000 real UI screens from real companies, both apps and full websites, browsable by category or by a specific type of page, like pricing pages, if that's the exact piece you're redesigning. Most of it is free to browse, but the deeper filtering sits behind a roughly $10-a-month plan, which is worth it even for a single design sprint.

There are similar tools that break things down by screen and by flow instead, useful when you're not just after a static layout but a whole interaction pattern, like how a product handles invites or replies. Some can export something like a design specification file you hand directly to your coding agent. In my own testing, that kind of export wasn't a perfect match for the real site on its own, so I still pair it with a full-page screenshot rather than relying on the file alone.

Component libraries

The first two categories are top-down: whole flows, whole screens. Component libraries are the opposite. They let you zoom into a single piece, an animated hero section, a pricing card, a navigation menu, and drop it straight into your project. 21st.dev is the one I reach for most: a lot of its components ship with the prompt already written, so you copy it, paste it into Claude, and it has everything it needs to recreate that one piece. React Bits is another, built specifically around background animations and small interactive effects that are hard to describe in words but instantly recognizable once you see them.

Typography

One of the fastest ways to spot an AI-generated site is the font. If everything defaults to the same safe sans-serif (Inter shows up constantly), it reads as generic immediately. Spending time choosing a font that actually fits what you're building is a cheap way to make something feel considered instead of templated.

Most font galleries, including Google Fonts, show you the same sample text on a plain background, which makes it hard to actually judge a typeface. Fonts In Use takes a different approach: it shows fonts in real, applied context, on a bottle label, on a badge, in a real layout, since a font that looks unremarkable in isolation can look completely different once you see it used properly. Some of what you'll find there is commercial and needs a license, but Google Fonts alone has plenty of free, high-quality options that are easy to embed directly.

Color

Color is another place AI output tends to default to the generic. Colors.co, with more than 10 million palettes, is worth bookmarking here, especially its trending and most-popular sections, mostly so you know which palettes to avoid. Popular palettes are popular because they're the safe, average choice, which is exactly the outcome you're trying to escape. Pick something more specific and hand it to your agent so the primary and accent colors actually reflect it.

Brand guideline archives

Once you land on a visual style you want to reuse consistently, it's worth writing it down properly as a design system rather than re-explaining it every time. brandingstyleguides.com is a free archive of real brand guideline documents from well-known companies. Coca-Cola's runs to 67 pages covering design principles, color usage, approved logo variations, and more. You don't need anything close to that scale, but skimming a document like that is a genuinely useful model for what a real brand system covers.

You can ask Claude to generate a design system document directly from a style you've established, covering colors, typography, and core components like buttons and cards, and then reuse that same document for every new piece you generate afterward so everything stays visually consistent instead of drifting.

Everywhere else

Not every source of inspiration is a curated design gallery. Plain image search works fine too. Pinterest, for instance: searching something as simple as a physical place or object, a lakeside cabin, say, can hand you a mood and a color story you'd never have arrived at from a text prompt alone. tools.design is another one worth knowing, a directory that rounds up design tools and resources as they show up, a decent way to stay current without going looking every time.

The common thread across all of it: don't describe the look you want. Show it. Grab the screenshot, note what you like and, just as important, what to avoid, and let the model iterate from something concrete instead of guessing at an adjective.