8 reference sites that make Claude design like a designer

Claude writes decent layouts until you ask for something beautiful. Then you get the site everyone has: a gradient, three cards, a centred button. The easiest way to give it taste is a reference. A screenshot of one block plus a short prompt, and the result changes immediately.

Below are eight sites where I grab those screenshots, and the prompt I use to hand them over.

Why a reference beats a description

Claude reads “modern minimal design” the same way a million people before you did. So it gives you the average.

A screenshot is specific: how much space sits between blocks, how big the heading is, where the button lives, how the grid lines up. Things that take a paragraph to describe and a second to see.

Give it one block, not the whole page. A full page spreads its attention, and Claude starts averaging everything at once.

8 reference sites

1. motionsites.ai

3D websites and the prompts behind them. Useful when the first screen needs depth and motion instead of a flat picture. Look at how the scene is built and how little text sits on top.

2. navbar.gallery

Navbars. Looks like a detail, but the header is on every page and sets the level right away. Easy to compare dozens of options: logo placement, number of menu items, the button on the right.

3. footer.design

Footers. Usually done at the last minute, and it shows. Good for seeing how to split links into columns and where contacts go so the footer doesn’t look like a dump.

4. cta.gallery

Buttons and call-to-action blocks. The exact spot where a site either sells or doesn’t. Watch the button size, the copy next to it and the empty space around it.

5. 404s.design

Error pages. A small thing that shows whether anyone thought the site through. Also a good example of how to make a joke without losing the visitor.

6. unsection.com

Ready-made sections: pricing, testimonials, FAQ, feature blocks. When you assemble a landing page from blocks, you’ll find a structure for almost any section here.

7. bentogrids.com

Bento grids, where cards of different sizes fit into one tile. Beautiful when the grid holds. Shows exactly how space is divided and where the main thing goes.

8. 60fps.design

Micro-animations: taps, transitions, elements appearing. A screenshot won’t help here; describe what you saw to Claude in words or link to the specific example.

Some of these sites have a premium section, but browsing is free.

How to hand a reference to Claude

Take a screenshot of the block you need, attach it and write:

Build a [navbar / footer / pricing block] for a website about [topic].
Reference in the screenshot: take its structure, grid, spacing,
type hierarchy and animations, but don't copy the copy, logo or brand colours.
My colours: [...], font: [...]. Stack: [React + Tailwind].
First list what you're taking from the reference, then write the code.

What matters here:

• What to take. Structure, grid, spacing and type hierarchy. That is the taste you’re borrowing.
• What not to take. Copy, logo and brand colours. Otherwise you get a clone of someone else’s site.
• Your colours and font. Without them Claude reuses the colours from the screenshot.
• The last line. Claude says what it saw first. You immediately know if it’s looking in the right place and can correct it before it writes a hundred lines.

Common mistakes

• A screenshot of the whole page. Claude tries to repeat everything and nails nothing. One block at a time.
• Five references in one message. You get the average. One strong reference is better.
• No colours of your own. Then don’t be surprised the site looks like someone else’s.
• Straight to code. Without the “list what you take” step, mistakes only show up at the end.

Bottom line

A reference plus a short prompt beats any description in words. Save these eight sites and try them on your next block; the difference shows on the first attempt.

New lists appear first in the Telegram channel @vaykord_dev.