A blank page is the enemy of a good-looking site, and a general image search just gives you noise. These are ten places designers actually open when they need ideas, each filtered for quality and pointed at a real job.
Design
Every designer works from inspiration; the skill is knowing where good work is collected and taking the right pattern from it.
The best places to find web design inspiration are curated galleries and libraries that filter for quality: full site designs on Land-book, one-page sites on One Page Love, plus focused libraries for footers, gradients and award-winning sites.
A curated directory of design resources in one place: inspiration galleries, tools, fonts, colours and icons. Start here when you do not yet know what you need, because it points you to the more specific sites below.
A curated gallery of website design, updated daily, so there is always something new to look at. Use it to see whole live pages rather than single screens, and to spot how good sites lay out a homepage from top to bottom.
A showcase of one-page websites, the single-scroll kind. Perfect when you are building something small, a personal site or a launch page, and want to see how much you can do without a menu full of pages.
A collection of the small, delightful details in real products: the tiny animations and clever touches that make an interface feel considered. Use it late, when the layout works and you want one moment that makes it feel finished.
Website and interface inspiration for software products, sorted by page and flow: landing pages, pricing, onboarding and more. The go-to when you are building anything that needs to sell a product or a service.
A gallery of nothing but website footers, the part everyone leaves till last and gets wrong. Open it when you have run out of steam at the bottom of the page and need a tidy way to end it.
A supply of gradients, grainy textures and soft backgrounds you can drop straight into a design. Use it when a flat white page feels cold and you want a warmer backdrop without hiring anyone.
A visual bookmarking and discovery tool, like a moodboard you can search. Use it to save the things you like as you find them and to spot the pattern in your own taste over time, rather than losing screenshots in a folder.
A curated feed of recent, standout web design, so you can see what is landing well right now. Good for a quick scroll when you want to feel current without falling down a rabbit hole.
A long-running showcase of award-winning websites, the high end of what the web can look like. Use it for ambition, but with a pinch of salt: a lot of it is over the top for a simple site, so take the idea, not the whole production.
Save the list
Here are all ten with a line each, ready to drop into your notes so you are not hunting for them next time you are stuck.
10 web design inspiration sites
10 PLACES TO FIND WEB DESIGN INSPIRATION
1. UI Goodies uigoodies.com A curated directory of design resources, start here.
2. Land-book land-book.com A curated gallery of full website designs, updated daily.
3. One Page Love onepagelove.com Single-scroll one-page websites.
4. Designspells designspells.com The small delightful details in real products.
5. SaaSframe saasframe.io Software product sites, sorted by page and flow.
6. Footer Design footer.design A gallery of nothing but footers.
7. Grainient grainient.supply Gradients, grainy textures and backgrounds.
8. Cosmos cosmos.so A searchable moodboard for saving what you like.
9. Recent.design recent.design A feed of recent, standout web design.
10. Awwwards awwwards.com Award-winning sites, the high end, take the idea not the whole thing.
How to use these: take patterns, not whole pages. Save three things you like from one site and write one line on why each works.
The real trick: hand your references to AI
Saving inspiration is only half of it. The part that changes your results is showing it to the AI you are building with. When you have three or four references you love, bring them to Claude or ChatGPT, say in one line what you like about each, and ask it to design in that direction.
Showing beats describing every time, because the model matches what it can see, and "clean and modern" means nothing next to three real examples of the thing you actually want. A tool like Cosmos is good for keeping those references in one place so you always have a handful ready to paste.
The one line per reference is the bit people skip, and it is what carries your taste across. "I like how much room this one gives the headline", "the way this one uses one bright colour and nothing else", "how short the homepage is". Then give the AI this brief.
PromptTurn your references into a brief
You are my art director. Your one job is to turn the sites I like into a design brief a builder can actually follow, so what gets made carries my taste instead of yours. What is at stake: whoever builds this next, a person or an AI, works from your brief and nothing else, so a vague line ("make it clean and modern") gets me a generic page, and a precise move ("one accent colour, everything else black and white") gets me the thing I meant. You read taste for a living. Be specific, name real design moves, and never copy any single reference wholesale.
MY BRIEF (fill in once, then hold it in mind for every step):
- What I am making: [the actual thing, e.g. a one-page portfolio, a landing page for a paid workshop, a homepage for my bakery. Not "a website".]
- Who it is for: [the person who lands on it and what they came to do, e.g. gallery owners deciding whether to email me, busy parents deciding whether to book. This changes every choice.]
- The one feeling I want: [one word or a short phrase, e.g. calm and confident, warm and handmade, sharp and expensive. If I give you three adjectives, ask me to pick the one that matters most.]
- My references, and one real line on what I like about EACH: [three to five, each with what you actually like, not "it's nice". For example: 1. [link or screenshot] - how much room it gives the headline, one big line and nothing crowding it. 2. [link or screenshot] - it uses one bright colour and leaves everything else black and white. 3. [link or screenshot] - the homepage is short, three sections and done. Use only the references I give you. Do not add sites I did not name or invent a link.]
- What I already have: [the fixed bits you must design around, e.g. my logo, my two brand colours, the photos I am using, the copy is written. If there are none, say so.]
YOUR JOBS:
1. NAME THE MOVE, NOT THE MOOD. For each reference, turn what I liked into a design move a builder can copy. A mood ("it feels clean", "it looks premium") is a dead end, so translate it: what is the actual spacing, colour, type size, layout order or single bold choice behind that feeling. If my line for a reference is too vague to name a move, tell me what you can see in it and ask me which part I meant, rather than guessing.
2. FIND THE THROUGH-LINE. Across all my references, name the two or three moves they share, because that shared thread is my real taste and the spine of the brief. Say plainly which references back each one, so I can see you read them and did not average them into mush.
3. FLAG WHAT CLASHES. Where two references pull against each other (one is airy and minimal, another is dense and maximal), name the clash and do not quietly split the difference. Ask me which one wins for this build, or propose the call and tell me why, then wait for my nod before you fold it into the brief. A brief that hides a clash builds a muddle.
4. WRITE THE BRIEF IN SECTIONS A BUILDER CAN FOLLOW. Once the moves and the clash are settled, write the brief for [what I am making] in labelled sections a builder can work straight from: THE FEELING (the one line, in plain words), LAYOUT (the order of the page, top to bottom, and how much room each part gets), COLOUR (how many, which does the shouting, what stays quiet), TYPE (how big the headline goes, how the rest sits under it), THE ONE BOLD CHOICE (the single move that makes it not generic), and WHAT TO AVOID (what none of my references do, so it does not creep in). Pull every section from the moves you named, not from your own default taste. Where I have not given you enough to fill a section, leave it marked [I need to decide this] rather than inventing a choice for me.
5. THE ONE-LINE DIRECTION. End with a single sentence a builder could pin above their screen and check every decision against, e.g. "One loud photo, one accent colour, everything else out of the way." This is the brief in one breath. If you cannot get it to one honest line, tell me the taste is still too split and name what I need to decide.
RULES: Use only the references and facts I gave you. Never invent a site, a link, a brand colour or a design choice I did not name, and never copy any one reference so closely that the result is just that site with my logo on it. If a reference is unclear, or two of them fight, or a section is missing something only I can decide, stop and ask me one sharp question rather than filling the gap to make the brief read well. Before you write the full brief, tell me back in one line the move you took from each reference, so I can check you read them the way I meant. End the brief by naming the one part you are least sure about, the move you were not certain I meant or the clash you had to call.
Here is the same brief with the gaps filled, so you can see the shape before you write your own. This one is a photographer building a one-page portfolio.
The same brief, filled in
You are my art director. Your one job is to turn the sites I like into a design brief a builder can actually follow, so what gets made carries my taste instead of yours. What is at stake: whoever builds this next, a person or an AI, works from your brief and nothing else, so a vague line ("make it clean and modern") gets me a generic page, and a precise move ("one accent colour, everything else black and white") gets me the thing I meant. You read taste for a living. Be specific, name real design moves, and never copy any single reference wholesale.
MY BRIEF (fill in once, then hold it in mind for every step):
- What I am making: a one-page portfolio to show my photography and get gallery owners to email me.
- Who it is for: gallery owners and art buyers who open it for ten seconds and decide whether I am worth a reply.
- The one feeling I want: quiet and confident, let the photos do the talking.
- My references, and one real line on what I like about each:
1. https://onepagelove.com/inspiration/portfolio - how much room it gives the headline, one big line and nothing crowding it
2. https://land-book.com - it uses one bright orange and leaves everything else black and white
3. https://recent.design - the homepage is short, three sections and done, no endless scrolling
- What I already have: about forty photos, no logo yet, the words for an About paragraph are written. No brand colours set.
YOUR JOBS:
1. NAME THE MOVE, NOT THE MOOD. For each reference, turn what I liked into a design move a builder can copy. A mood ("it feels clean", "it looks premium") is a dead end, so translate it: what is the actual spacing, colour, type size, layout order or single bold choice behind that feeling. If my line for a reference is too vague to name a move, tell me what you can see in it and ask me which part I meant, rather than guessing.
2. FIND THE THROUGH-LINE. Across all my references, name the two or three moves they share, because that shared thread is my real taste and the spine of the brief. Say plainly which references back each one, so I can see you read them and did not average them into mush.
3. FLAG WHAT CLASHES. Where two references pull against each other (one is airy and minimal, another is dense and maximal), name the clash and do not quietly split the difference. Ask me which one wins for this build, or propose the call and tell me why, then wait for my nod before you fold it into the brief. A brief that hides a clash builds a muddle.
4. WRITE THE BRIEF IN SECTIONS A BUILDER CAN FOLLOW. Once the moves and the clash are settled, write the brief for my one-page photography portfolio in labelled sections a builder can work straight from: THE FEELING (the one line, in plain words), LAYOUT (the order of the page, top to bottom, and how much room each part gets), COLOUR (how many, which does the shouting, what stays quiet), TYPE (how big the headline goes, how the rest sits under it), THE ONE BOLD CHOICE (the single move that makes it not generic), and WHAT TO AVOID (what none of my references do, so it does not creep in). Pull every section from the moves you named, not from your own default taste. Where I have not given you enough to fill a section, leave it marked [I need to decide this] rather than inventing a choice for me.
5. THE ONE-LINE DIRECTION. End with a single sentence a builder could pin above their screen and check every decision against, e.g. "One loud photo, one accent colour, everything else out of the way." This is the brief in one breath. If you cannot get it to one honest line, tell me the taste is still too split and name what I need to decide.
RULES: Use only the references and facts I gave you. Never invent a site, a link, a brand colour or a design choice I did not name, and never copy any one reference so closely that the result is just that site with my logo on it. If a reference is unclear, or two of them fight, or a section is missing something only I can decide, stop and ask me one sharp question rather than filling the gap to make the brief read well. Before you write the full brief, tell me back in one line the move you took from each reference, so I can check you read them the way I meant. End the brief by naming the one part you are least sure about, the move you were not certain I meant or the clash you had to call.
When you have outgrown copying links in by hand, there is a step further: let the AI fetch real screens itself. Mobbin, a library of real app screenshots, offers an MCP connector for tools like Claude Code that lets Claude search hundreds of thousands of shipped product screens while it builds, so it matches proven patterns rather than guessing.
It installs in about a minute. It comes with Mobbin's paid plans only, so reach for it once you are building often enough to justify that.
The honest bit: inspiration becomes a copy the moment you take the whole thing. Borrow one pattern, the spacing, the order, the single bold choice, and fit it to your own content. A design lifted whole looks off because it was built for someone else's words and pictures.
Saving is not the same as using. It is easy to collect a thousand screenshots and make nothing. Save with a purpose and a note on why, or you are just decorating a folder.
Pick one and save three things today
Do not open all ten. Pick the one that matches what you are building, scroll for five minutes, and save three things you genuinely like. Write one line under each on why it works, because the why is the thing you can actually reuse. That short habit teaches you your own taste faster than any amount of scrolling.
Want AI to design in that taste across everything it makes? Feed it what you found and save it as a taste profile.
Questions people ask
What are some inspirational websites?
Land-book for full site designs, One Page Love for single-page sites, and Awwwards for award-winning work, plus focused libraries like Footer Design and Grainient for one part of a page. If you do not yet know what you need, start with UI Goodies, which points you to the rest.
How do I use design inspiration without copying?
Take patterns, not whole pages. Notice why something works, the spacing, the order, the one bold choice, and borrow that idea into your own layout. Copying a whole design wholesale gives you something that fits someone else's content, not yours.
making AI super simple✦making AI super simple✦making AI super simple✦making AI super simple✦making AI super simple✦making AI super simple✦making AI super simple✦making AI super simple✦
Free AI skills, straight to your inbox
One short email when there’s a practical AI skill, workflow and example that are worth your time.
