Tell me I'm not the only one tired of this. AI websites, AI design, AI videos: they all look the same. AI can make almost anything, and we keep getting the same thing.
The problem isn't the AI. The problem is we give it nothing to look at. Below is the full system: where to find references, what exactly to take from them, and how to prompt so the result is yours, not the average.
Part 1
Why AI output looks the same
AI isn't lazy. It just defaults to the average. A model learned from millions of websites, posters and videos. When you type "make a modern landing page", it gives you the most likely answer, which is the middle of everything it has seen. And the middle is the purple gradient, the centered headline and the smiling stock person.
References are your three dishes. Without them you get the average. With them you get direction.
Part 2
The six sites, in detail
For each one: what it is, what to steal, and a prompt you can adapt. Attach the screenshot or still to your AI along with the prompt.
Daily jury awards for the most ambitious websites online.
Steal
Layout, scroll storytelling, navigation ideas, type scale. Open Site of the Day and study how one section hands over to the next.
Layout only prompt
I am attaching 2 screenshots of Awwwards Site of the Day winners.
From screenshot 1, take ONLY the layout: an asymmetric grid where oversized type breaks out of the columns.
From screenshot 2, take ONLY the way sections transition on scroll.
Ignore their colors, images and copy.
Design a homepage for [my brand in one line] that uses these two ideas in an original way.
List your layout decisions before you write any code.
Naming exactly what to take stops the AI from cloning the whole site.
7,300+ curated landing pages with full page screenshots, sorted by category.
Steal
Section order: how the hero, proof, features and pricing are stacked. CTA wording, pricing tables. Search your own niche first.
Section order prompt
Here are 3 full page screenshots of landing pages in my niche.
Map the section order of each one (hero, proof, features, pricing, FAQ, CTA).
Then propose an ORIGINAL section order for my offer: [offer in one line].
For every section, tell me which reference inspired it and where you broke the pattern on purpose.
You borrow the logic of a page that converts, not its look.
A web awards gallery that scores UI, UX and innovation. Your second opinion next to Awwwards.
Steal
Micro interactions, hover states, cursor effects, small UI details that make a site feel expensive.
Details only prompt
From this CSSDA winner I want three details only:
1. a magnetic cursor on buttons
2. headline text that reveals line by line on scroll
3. thin 1px dividers between sections
Add these to my existing page: [paste code or describe it].
Do not change my layout or colors. Keep every animation under 600ms and subtle.
Details are where AI pages feel cheap. Three good ones change the whole impression.
A library of visual techniques for film and video. Every technique has a name, a short definition and examples.
Steal
The technique names. Slit scan, echo printing, step printing, scale shift, pass through. The name itself is the prompt.
Video technique prompt
Product shot of a perfume bottle on a black surface.
Technique: echo printing, the bottle leaves a short trail of itself for a moment before the frame catches up.
Slow push in, 50mm lens, hard side light, deep shadows.
No text on screen. 5 seconds.
Video models understand a technique name far better than "make it look cool".
The biggest searchable library of film stills, each tagged by light, lens, framing, color and location. Built by cinematographer Lawrence Sher. Two week free trial, then about $13 a month. No budget? Use FILMGRAB from the library below.
Steal
Light. Search "hard light", "practical light", "silhouette", then read the tags under each still. That's ready made vocabulary.
Light and framing prompt
Reference still: one hard key light from the side, deep black shadows, a warm practical lamp in the background, wide 24mm framing, subject small in frame.
Use ONLY the lighting and framing.
New scene: [your scene].
Write an image prompt that names the light source, direction, color temperature, lens and composition explicitly.
Light is the fastest way out of the flat, glossy AI look.
A gallery of motion videos made with Claude, each with the prompt or skill that produced it.
Steal
The structure of the prompts, plus motion vocabulary: kinetic type, shape morphing, particles, Swiss style.
Structure, not copy
Below is the prompt behind a motion video I like. Do not copy it.
Extract its structure: timing, how the type behaves, transitions, rhythm.
Then write a NEW prompt with the same structure for my own 15 second video about [topic], in my brand colors [colors], with my own copy.
[paste the prompt here]
You learn how good motion prompts are built, then you build your own.
Part 3
The reference library
The six sites are the start. Here is a bigger library. Every site was checked: live, useful, and free or with a real free tier. Paid ones are marked.
Web and UI design
GodlyFree Sites shown as short videos, so you see scroll and interaction, not just a screenshot.
SiteinspireFree Calm, curated gallery. Filter by style, type and subject.
ReferoFree tier · Pro paid Real screens and flows from live products. For UI that has to work, not only look good.
Graphic design and typography
Fonts In UseFree 27,000+ real examples indexed by typeface. Find a font, then see it on posters, books and brands.
TypewolfFree A site of the day with the exact fonts named. Perfect for font pairing prompts.
Letterform ArchiveFree Thousands of hi res items from type and graphic design history, every Emigre issue included.
Film, cinematography and color
FILMGRABFree Curated film stills you can browse by film, director and cinematographer.
FlimFree tier with daily limits AI search across film, series, ad and music video stills. Search by color and mood.
Frameset10 free searches a day Strong on commercials and music videos. Your go to for ad references.
Motion and video effects
MotionographerFree The motion design community's showcase since 2006.
Art of the TitleFree Film and TV title sequences with designer interviews. Type in motion at its best.
Codrops Creative HubFree Open source web demos with code: scroll animations, WebGL, grid effects.
Fashion and styling
Vogue RunwayFree 20,000+ shows, runway images going back to 1988.
TagwalkFree A search engine for runway looks. Type "red" and "dress" and get every look.
Europeana FashionFree 800,000+ objects from European museums and archives: garments, sketches, catwalk photos. Search "fashion".
The Public Domain ReviewFree Strange and beautiful public domain finds. Best for references nobody else uses.
Moodboard and curation platforms
Are.naFree up to 200 blocks Calm, ad free, channels instead of boards. Great for long research.
CosmosFree · Premium paid Ad free visual search by color and similarity. Pinterest without the noise.
SaveeFree with limits · paid plans Designer moodboards, no ads, no algorithm.
PureRefPay what you want for personal use Desktop app: drop every reference on one canvas next to your AI tool.
Part 4
The Reference Method
Five steps. This is how references turn into something original instead of a copy.
01
Collect
Three to five references from at least two categories. A website alone gives you another website. A website plus a film still plus a 1920s poster gives you something new.
02
Name what you like
In precise words. Not "nice vibe". Instead: "hard side light", "asymmetric 12 column grid", "condensed grotesk at 180px", "echo printing". Can't name it? Look it up on Eyecandy, Fonts In Use or in the ShotDeck tags.
03
Combine
Take one thing from each reference. Layout from one, light from another, motion from a third. Never two things from the same source. That's exactly how copying starts.
04
Ask for an original
Say it out loud in the prompt: do not reproduce any reference, propose your own version, explain every decision.
05
Critique and iterate
Run the Slop Test below. Tell the AI what failed. Ask for 3 variations that push one decision further.
Full example: four categories, one page
Role: You are an art director and front end designer.
Task: Design the hero and first two sections of the homepage for [Studio name], a small ceramics studio in Yerevan.
References (all 4 attached):
1. Awwwards site: take ONLY the layout, an asymmetric grid where the headline breaks out of the columns.
2. ShotDeck film still: take ONLY the light, one hard window light from the left, deep shadows, warm color temperature. Use it as the art direction for the product photos.
3. Bauhaus poster from the Harvard collection: take ONLY the type logic, a heavy geometric sans, red as the single accent, type set at an angle.
4. Eyecandy technique: step printing. Use it for the hero video, a stuttered slow motion shot of clay on the wheel.
Rules:
Do not reproduce any reference.
No purple or blue gradients, no centered hero, no stock people, no generic 3D.
One bold decision must dominate the page. Tell me which one.
Output: first list your design decisions and which reference each one comes from. Then write the HTML and CSS.
Four sources, one thing from each, a ban list and a demand for one bold decision. That's the whole method in one prompt.
Part 5
The AI Slop Test
Run this on every AI result before you publish. Tick everything you see.
In short
AI gives you the average of everything it has seen. References give it direction.
Take one thing from each reference, and name it precisely.
Taste · Guide