Fix AI slop: give your AI real design references

What "AI slop" looks like

You can spot an AI-built website from across the room. A purple-to-blue gradient hero with a centred headline. "Supercharge your workflow" copy. Three identical feature cards with icons. A pricing table with a "Most popular" badge. Inter everywhere, the same rounded corners, the same soft shadows, and spacing that changes from section to section for no reason.

None of it is wrong — it's just the average of every website the model has seen. And when every vibe-coded product looks the same, yours is forgettable before anyone reads a word.

Why AI coding tools default to slop

Claude Code, Cursor, Lovable, Bolt and v0 are excellent at writing code. They are not designers. Give one a prompt like "build a landing page for my SaaS" and it has nothing to go on but your sentence, so it produces the most likely-looking page: the statistical middle.

Screenshots help a little, but a screenshot is a flat picture. The AI still has to guess the spacing scale, the type sizes, the grid, the breakpoints and how sections relate to each other.

The fix: give your AI real references

Designers don't work from a blank page — they collect references. Your AI should too. When it can read the real HTML and CSS of a few well-made websites, it stops guessing. It can see:

• The type scale — the actual font sizes, weights and line heights, and how headings step down.
• The spacing rhythm — the padding and gaps that make a page feel calm instead of cramped.
• Layout patterns — asymmetric heroes, editorial grids, how a good pricing or FAQ section is structured.
• Colour and contrast — how a restrained palette uses one accent instead of five gradients.
• Responsive behaviour — what changes on a phone, and what doesn't.

That's what Download Any Site gives you: a website as a ZIP of real HTML, CSS, fonts and images, captured as you see it — even sites built with JavaScript.

How to use references with Claude Code or Cursor

1. Pick 2–3 sites you admire — ideally in a different industry from yours, so you borrow ideas rather than a look. If you're redesigning your own site, include it too.
2. Download each one with the box above, and unzip them into a reference/ folder in your project.
3. Pull the design tokens with our free colour & font extractor and technology checker.
4. Ask your AI to learn the patterns — not copy the page. For example:

Study the HTML and CSS in ./reference. Don't reuse any text, images, logos or brand colours from it. Write down the type scale, spacing scale, grid and section patterns you find. Then design a landing page for [your product] using our brand colours and our copy, applying those principles so it feels considered rather than generic.

5. Iterate section by section. "Make our pricing section follow the hierarchy in reference/site-b/pricing.html, with our plans and our colours."

Learn from references — don't copy them

The goal is a site that looks like you, built with the craft of the best sites on the web. So:

• Do study layout, spacing, type scale, structure and interaction ideas.
• Do reuse your own sites freely — that's a migration, not a reference.
• Don't reuse other people's text, images, logos, illustrations or brand identity.
• Don't ship a page that's recognisably someone else's design.

Copying another company's content or design can break copyright and trademark law, and our Terms don't allow it. Inspiration is how good design has always worked; copying isn't.

A quick anti-slop checklist

Before you ship, ask your AI to check the page against your references:

• Is there one clear accent colour, not a rainbow of gradients?
• Do headings follow a consistent type scale?
• Is spacing based on a scale (4, 8, 16, 24, 32…) rather than random values?
• Does each section have one job, with a clear hierarchy?
• Is the copy specific to your product, with no "supercharge" or "unlock"?

Ready? Download your first reference above — it takes about a minute.