10/10 signs your website is AI slop, and the prompt rules that fix it

You can spot a vibecoded site from across the room now. AI can design fine. Everyone just lets it fall back to the same defaults, and the defaults are the average of every SaaS landing page from 2021 to 2024. Count how many of these are on your site, and be honest.

The signs

1. 1.The hero background is Tailwind slate-900 with a purple radial gradient blob, blurred, dead center. It's the single most common pixel arrangement on the internet right now.
2. 2.Every feature bullet has a Lucide icon trapped inside a rounded square badge. Zap, Shield, Sparkles. Always those three.
3. 3.The headline says "Supercharge your workflow with our seamless, AI-powered platform." Claude loves that sentence. It says nothing about what the product does.
4. 4.The three-tier pricing table where the middle card is 10 pixels taller, has a glowing border, and says Most Popular. Nobody has bought anything yet.
5. 5.A bento grid that contains zero real information. Four cards with static CSS charts and a toggle that bounces and does nothing.
6. 6.Testimonials from "Sarah, Head of Growth" using an Unsplash photo everyone has seen forty times. Sarah is not real, and everyone who lands on the page knows it.
7. 7.The dashboard preview tilted at a 15 degree 3D perspective with a 40 pixel blur drop shadow, so it looks premium from a distance and unreadable up close.
8. 8.A "Trusted by 10,000+ teams" bar with grayscale logos of companies that do not exist.
9. 9.Gradient text on exactly one word of the headline, purple to pink, on the word that matters least.
10. 10.A pill above the headline that says "Now with AI" with a sparkle emoji. On an AI product. Which is all of them.

Eight of these were in the video, and the last two got cut for time. If you hit five or more, a probability distribution designed your site, and every visitor can feel it even if they can't say why.

Why Claude does this

Claude actually has great design taste. It has read every design book, every case study, and every Dribbble takedown thread. Ask it to critique a slop site and it will tear the thing apart. So why does it build slop the second you say "make me a landing page"?

Because you gave it no constraints, and with no constraints a model gives you the most probable answer. The most probable landing page in its training data is a Tailwind SaaS template. Slate background, Inter, purple accent, three column feature grid, bento, logo bar. The model did exactly what you asked for, which was the average thing.

A designer with taste has a hundred things they refuse to do. Give Claude the same refusals and the taste shows up, because you've cut off the average and left it only the good options. That is all the rules block is, mostly a list of things it's not allowed to do.

How to use the rules

1. 1.Save the block below as DESIGN.md at the root of your project, and add one line to your CLAUDE.md: "Read DESIGN.md before touching any UI." On a fresh project, paste it straight into your first prompt instead.
2. 2.Give it one reference before you ask for anything. A URL, a screenshot, or a sentence about the feel. Fill in the three blanks at the top of the block.
3. 3.Read the design brief before it writes any code (the rules make it write one first). If the brief sounds like a template, reject it right there. Un-slopping code is expensive. Un-slopping a paragraph is free.
4. 4.After it builds, run the self-review at the bottom of the block. It will find its own slop. It always does.

The rules

# DESIGN.md — UI rules for this project. Read before touching any UI.

Reference: [one site, spread, object, or era this should feel like]
Tone in three words: [e.g. quiet, precise, warm]
Audience: [who, and what they are doing when they land here]

## Process

1. Before writing any UI code, output a design brief: the palette as
   named tokens with hex values, the two typefaces and why, the layout
   idea in two sentences, the one motion idea, and how the reference
   shows up. Wait for my approval. Do not build from an unapproved brief.
2. Build the whole page from that brief. If you drift from it, say so.
3. When done, run the self-review at the bottom and fix what it finds
   before showing me.

## Banned. Never, without me asking by name.

- Slate-900 or any near-black blue-gray page background.
- Radial gradient blobs, blurred glows, or "orbs" as backgrounds.
- Gradient text. Purple-to-pink, blue-to-cyan, any of it.
- Purple as a primary accent. If the brief needs purple, justify it.
- Icons inside rounded-square or circular badges. Icons in feature lists
  at all, unless the icon carries meaning a word cannot.
- Three-column feature grids with icon, title, two lines of copy.
- Bento grids, unless every cell shows real data from this product.
- Fake charts, fake sparklines, fake toggles, fake cursors, fake
  dashboards. If it isn't real, it doesn't ship.
- Tilted or 3D-perspective screenshots. Screenshots are flat, at 1x,
  and real.
- Drop shadows with a blur over 24px. Glowing borders. Border-beam
  effects.
- A taller, glowing, or "Most Popular" pricing card. All tiers equal;
  recommend with copy, not with height.
- Testimonials, logo bars, star ratings, or "Trusted by N" counts that
  are not literally true with named, real sources. No proof beats fake
  proof.
- Stock photos of people. No Unsplash headshots, ever.
- Pills above the headline. "Now with AI." "New." Sparkle emoji.
- Emoji anywhere in UI text.
- The words: supercharge, seamless, effortless, unlock, elevate,
  empower, revolutionize, next-generation, AI-powered, all-in-one,
  game-changing, unleash. Any headline that could sit on a
  competitor's site unchanged.
- Inter, Roboto, Open Sans, or the system font as the display face.
  Fine for body. Never for the words people read first.
- Bouncing, pulsing, or looping animations that exist to look alive.
- Marquees of anything.
- Rounded-2xl on everything. Pick one radius and mean it.

## Required

- One background color, one ink color, one accent. Tokens named for
  their job (bg, ink, accent), never Tailwind palette names.
- Two typefaces max: a display face with a point of view, and a body
  face built for reading at 17 to 19px. Real type scale: the hero is
  4 to 6 times body size, tight tracking on display, 1.5 to 1.7 line
  height on body.
- Whitespace is a feature. Sections breathe. Nothing is fighting for
  attention because only one thing on each screen deserves it.
- Asymmetry somewhere. A pulled-left headline, an offset image, a
  column that is narrower than the others on purpose.
- The headline names what the product does for whom, in words the
  customer would use. Specific beats clever.
- Every number on the page is true. Every quote has a real name and a
  real company. Otherwise the section does not exist.
- Motion: one idea, used consistently. Ease-out entrances under 400ms.
  Nothing loops. Nothing moves unless the user did something or the
  content just arrived.
- Screenshots and product imagery are real captures from this product,
  flat, with a 1px border or no border.
- Buttons look like buttons: one primary, one secondary, no gradients.
- Mobile is designed, not squeezed. Check it at 390px before showing me.

## Self-review before showing me

Go through the page and list every element that:
1. Appears on the banned list.
2. Could be deleted with zero loss of information.
3. Would look at home on a generic SaaS template.
4. Contains a claim you cannot prove.
5. Uses a color, radius, or shadow not in the brief.
Fix all of it, then show me the page and the list of what you changed.

What changes when you use this

The first thing you'll notice is the brief. Claude will propose a warm off-white page with a serif display face, or a hard black and white grid with one red, or something that belongs to your reference and nothing else, and that's the model showing you what it could do all along. Then it builds it, and the page has fewer things on it, and every one of them is real.

The second thing you'll notice is how much of the slop was covering for the fact that there was nothing to say. No proof, no numbers, no real screenshots. The rules won't let it paper over that, so you end up writing real copy and taking real screenshots yourself. That part is the job.