AI tools are great at creating websites, but out of the box (even with a good amount of prompting) they often generate what is pretty obvious AI-design. That’s why it’s great if you can give it visual inspiration.
And what are good places for visual inspiration?
Every time I come across a site where I find something I like, I take a screenshot and drop it in a great design folder. Pretty basic, but it works for me. You do whatever works for you. And then sometimes when I don’t have something in there that I can use for a current project, I go hunting. And here are some of the sites that are good hunting grounds:
- onepagelove.com - great if you’re looking for beautiful websites with great usability for actual businesses
- saasframe.io - love these for homepage inspiration (It’s a paid product, but you can browse a bit for free, and that alone is worth it.)
- lapa.ninja - another great site for landing page aficionados
- land-book.com - lots of business website design inspiration here too, although I find the quality to be a bit more mixed
- pageflows.com - this is great if you’re looking for inspiration for well-designed user flows (like onboarding, account creation, password reset, ecom checkouts, claiming a profile, etc etc)
- ecomm.design - If you’re looking for design inspiration for your online shop, this is the place to go.
- baymard.com/ecommerce-design-examples - Another fantastic resource for e-commerce design.
The Awwwards Effect: Design for Acclaim vs Design for Utility
One thing that speaks to these amazing award-awarded website designs not always being good for business is that there is a high percentage of these websites that just a couple of months later are defunct and only exist in the archives of these awards sites.
All of these are in the category of great design inspiration by designers who love design but not necessarily the best design for usability and readability. So oftentimes these sites have great designs for the purpose of having a great design, but not so much for the purpose of fulfilling a specific business objective. So keep that in mind, but still you can often find great design inspiration in here, and then take elements of that into a site that you build with AI that has good usability, and oftentimes that is as simple as taking some elements and then adding them to a site that has a good usability structure. Skip the constant visual movement and parallax effects that cause motion fatigue, make the navigation clearly visible instead of hidden, go for familiarity rather than novelty. Think of it as the haute couture of web design, and look if you find a vibe you like, give that to your model of choice and ask it to then create a site that has that feel or vibe, but good usability.
The prompt
You can freestyle this, or if you want a prompt (this is multiple steps and I recommend you do it that way at least the first time):
You are the design lead at a small studio known for giving every client a visual
identity that couldn't be mistaken for anyone else's. I've attached screenshots of
sites whose LOOK I like. Your job is to extract the visual language from them and
apply it to a page that is structured for ordinary humans to use, not for a design
award.
Do not copy the layouts in the screenshots. Copy the taste.
=== THE BRIEF ===
Page type: [homepage / landing page / pricing / product page / signup flow]
Product: [what it is, in one plain sentence]
Audience: [who lands here and what they already know]
Primary action: [the ONE thing a visitor should do]
Secondary action: [the fallback for people not ready yet]
Content: [paste real copy, or say "write it" and I'll review]
Locked-in: [existing brand colors, fonts, logo, or "none, you choose"]
=== STAGE 1: READ THE REFERENCES (show me this before you build) ===
Write a short "design DNA" spec from the screenshots. Be specific and concrete:
"modern and clean" is a useless observation. For each reference, name:
- COLOR: approximate hex values, how many colors are actually in play, whether it's
light or dark, where the accent appears and how sparingly, is the palette warm,
cool, or desaturated
- TYPE: serif / sans / mono and in what combination, the weight contrast between
display and body, how big the largest element is relative to body text, letter
spacing, uppercase vs sentence case, is the type doing the heavy lifting or is it
neutral
- SPACE: dense and editorial, or airy and generous? How much room around the hero?
Is content centered, left-aligned, or on an asymmetric grid?
- SHAPE: corner radius (sharp? soft? mixed?), does it separate things with borders,
shadows, background shifts, or nothing at all
- TEXTURE: grain, noise, gradient, photographic treatment, illustration style, any
hand-made or physical-feeling element
- SIGNATURE: the ONE visual idea that makes each reference memorable: oversized
type, full-bleed photography, hairline rules, tiny caps labels, an unexpected
color, a strange grid. Name it in a sentence.
Then finish Stage 1 with:
"3 things I'm taking:" (the transferable visual decisions)
"3 things I'm leaving:" (what only works in an award-show context)
=== STAGE 2: WHAT TO LEAVE BEHIND ===
These references were made to be admired, not used. Take their surface, not their
behavior. Specifically, do NOT bring over:
- Scroll-jacking, parallax, or any effect that fights the user's scroll
- Constant ambient motion, drifting elements, or animation that never settles
- Hidden or minimal navigation on desktop: no hamburger-only menus, no nav that
only appears on scroll-up, no unlabeled icon navigation
- Custom cursors, click-and-drag galleries, horizontal scroll sections
- Intro animations or loading sequences that delay the content
- Text over busy imagery, low-contrast type, or thin weights at small sizes
- Novel interaction patterns where a familiar one exists
- Long scrolls where the value proposition is withheld until section four
If a reference's entire identity depends on one of these, extract its palette,
typography, and spacing instead, and tell me that's what you did.
=== STAGE 3: BUILD ON A CONVENTIONAL SKELETON ===
Structure is boring on purpose. The visual language is where the personality goes.
- Visible horizontal navigation with text labels. Logo left, links center or right,
primary action as the only button in the bar.
- Above the fold: what this is, who it's for, and why it's worth caring about,
readable in about five seconds without scrolling. One primary button, one
secondary text link. Not two competing buttons.
- Then, in order: proof (logos, numbers, a real quote), the core value in 2-4
sections that each make ONE point, how it works if the product needs explaining,
pricing or the offer, objection handling / FAQ, closing action.
- Repeat the primary action at natural decision points, not every 400 pixels.
- Footer with real navigation, not a lonely copyright line.
Every section gets a purpose. If you can't say what a section is doing for the
visitor, delete it rather than filling it.
=== STAGE 4: USABILITY FLOOR (non-negotiable) ===
- Body text 16px minimum, line length 60-75 characters, line height ~1.5
- Body text contrast at least 4.5:1 against its actual background
- Tap targets 44px minimum, with real spacing between adjacent ones
- Visible keyboard focus states: do not remove outlines without replacing them
- Motion: entrance transitions under 300ms, triggered once, never looping. Wrap all
of it in @media (prefers-reduced-motion: reduce) and disable it there.
- Content renders and is readable before any animation runs. Nothing appears only
on scroll.
- Real responsive behavior down to 360px. Test the hero, the nav, and any grid.
- Buttons say what happens: "Start free trial", not "Get started" or "Submit".
- Images have alt text; headings nest properly (one h1, no skipped levels).
=== STAGE 5: THINGS THAT MAKE IT LOOK AI-GENERATED (banned) ===
- Purple-to-blue or indigo-to-violet gradients, anywhere
- Cream background (#F4F1EA-ish) + high-contrast serif + terracotta accent (#D97757-ish)
- Near-black background with a single acid-green or vermilion accent
- Glassmorphism, frosted-glass cards, glowing orbs, mesh gradients, floating blurred blobs
- Three identical feature cards in a row with an icon, a two-word title, and a
sentence of filler, unless the content genuinely is three parallel things
- Emoji as interface icons
- 01 / 02 / 03 numbering on things that aren't a real sequence
- Inter, Poppins, or Montserrat as the display face
- Uniform rounded-2xl and drop shadows on every single element
- Everything center-aligned all the way down the page
- Headline copy in the shape of "Elevate/Transform/Unlock your [noun]", "The future
of X is here", "X, reimagined", or any sentence with "seamlessly" or "effortlessly"
- Fade-in-on-scroll applied indiscriminately to every section
Spend your boldness in ONE place: the signature element from Stage 1. Everything
around it stays quiet and disciplined.
=== STAGE 6: OUTPUT ===
1. The design DNA spec from Stage 1
2. A short token system before you code: 4-6 named hex values, the display face,
the body face, the type scale, and one sentence naming the signature element
3. Then the build: [single HTML file with Tailwind CDN / React component / whatever
your stack is]
4. A short "what came from where" note: which reference gave you the palette, which
gave you the typography, and what you deliberately didn't take
=== SELF-CHECK BEFORE YOU SHOW ME ===
Answer these honestly and fix anything that fails:
- If I removed the logo, could this be any other product's site? If yes, the visual
language isn't specific enough, go back to Stage 1.
- Does the token system read like something you'd produce for any brief, or like a
decision made from these specific screenshots?
- Can a first-time visitor find the primary action within three seconds?
- Does anything on this page require the visitor to learn a new interaction?
- Would this still work with animation fully disabled? (It must.)
- What's the one thing a designer would remember about this page?
=== END OF PROMPT ===Three things worth flagging about how it’s built
Stage 1 makes the model write out the design DNA before it codes. That is what separates “took the vibe” from “vaguely gestured at the vibe.” Models are much better at applying a spec they wrote themselves than at holding an image in mind while generating 800 lines of markup. It also gives you a cheap checkpoint: if the spec says “clean and modern,” you know the build will be generic and you can stop it there.
The banned list names specific tells, not vibes. “Don’t make it look AI-generated” does nothing. Naming the purple-blue gradient, the three-identical-feature-cards row, the “Elevate your workflow” headline shape, and the specific cream/serif/terracotta combination gives the model something it can actually check itself against. That list is also the part you’ll want to keep updating as the tells shift.
Stage 2 does the work the Awwwards section above describes. It separates surface (palette, type, spacing, texture, all portable) from behavior (scroll-jacking, hidden nav, ambient motion, not portable), and includes an explicit fallback: if a reference’s whole identity is the parallax, take its colors and typography and say so. That’s the mechanism behind “take some elements and add them to a site that has good usability structure.”
Notes on getting good results
Pick references that agree with each other. Three screenshots with three different personalities produces an average, and averages are exactly what you’re trying to escape.
Screenshot the part you actually like. If it’s the typography, crop to the typography. Feeding a full-page screenshot when you only wanted the color palette invites the model to copy the layout too.
Stage 1 is the checkpoint, not a formality. If the design DNA spec comes back vague (“clean, modern, minimal”), the build will be generic no matter what follows. Push back and ask for hex values and typeface names before letting it write any code.
Ask for the token system separately. Reviewing four hex values and two typeface choices is faster than reviewing 800 lines of HTML, and it’s where the design is actually decided.