The Generic AI Look (AI Slop)

Ask AI to build a page with no design direction and you tend to get the same page everyone else got: rounded cards, a purple-blue gradient hero, an emoji on every heading, and copy like "Empower your journey." People call this look AI slop.

Here is why it happens. A model has no taste of its own. When you leave the design decisions to it, it reaches for whatever tends to look impressive in a thumbnail: gradients, glows, badges, cards. Any one of these can work on its own. Stacked together with nothing edited out, they turn into a page you have seen a thousand times.

We audited our own sites for this in Week 5, using the course website as the first exhibit (it had most of these). This guide collects the class checklist, the full catalog of the patterns with examples, and a workflow for stripping them out.

You may notice this guide has no emoji in its headings. That is on purpose.

The Quick Checklist from Class

Eight things AI reaches for by default. Open your deployed site next to this list and be honest:

• Rectangular cards everywhere. Does each section really need a box?
• Large rounded corners on cards, and pill-shaped buttons.
• Generic fonts. AI rarely picks an intentional one.
• Yellowish "paper" background you did not choose.
• Cookie-cutter hero: centered title, subtitle, two buttons, purple-blue gradient.
• Empty marketing copy like "Empower your journey."
• Pages that drift apart over many build rounds, because each prompt restyled one page.
• Emoji as icons (this one depends on the brand).

The data backs this up: one analysis ranked these across 3.2M posts (vibecoded-design-tells).

First, a Demonstration

Every design choice in the box below is an AI default. It commits at least a dozen of the tells from the catalog. Read the catalog, then come back and count.

Nothing in that box is broken. Every piece works. The problem is that nobody chose any of it.

The Full Catalog: 23 Tells

killaislop.com documents each of these with visual examples and fixes; it is worth a full read. Here is the whole list, with what to look for and what to do instead.

Color and style

1. Indigo-to-violet gradient. The #6366f1 to #a855f7 diagonal on buttons and hero backgrounds; the house color of AI demos. Instead: pick one accent color you can defend. If you keep a gradient, be able to say why.
2. Gradient headline text. Headings filled with a rainbow via background-clip: text, which costs legibility. Instead: solid-color headings; build hierarchy with size, weight, and spacing.
3. The warm "cozy" palette. Amber and orange washes on soft beige, the lazy translation of "friendly." Instead: a neutral base plus one restrained accent. Warmth belongs in the writing.
4. Default semantic palette. Blue info box, amber tip, green success, red error, straight from the framework: bg-blue-50 with text-blue-600 and friends. Instead: build states from your own palette, and color only states that truly differ.
5. One-hue status box. border-red-500 + text-red-500 + bg-red-500/10: the same red at three opacities. Instead: lead with the word ("Error", in bold) on a neutral surface, with one muted accent.
6. Gradients as atmosphere. A near-black navy page with soft glows and cards that fade lighter at the top, for unearned "premium" feel. Instead: flat background; get depth from hairline borders and small shadows.

Typography

7. Serif-italic on one word. "Ship faster" with that one word swapped to a serif italic for cheap drama. Instead: emphasize with weight, position, or a line break, in one typographic voice.
8. Serif where sans belongs. Playfair, Lora, or Cormorant as the body text of a dashboard or SaaS page. Instead: one legible sans for UI text; reserve serifs for a deliberate editorial voice.
9. Decorative strikes and highlights. Strikethroughs, underlines, and highlighter marks on words that were never edited. Instead: strikethrough only for real edits, underline only for links.

Copy

10. Highlighted keywords. Scattered colored or bolded words mid-paragraph, as if a highlighter ran over it. When everything is emphasized, nothing is. Instead: at most one accent per paragraph; let sentence structure carry the weight.
11. The AI copywriting voice. "It's not just a website — it's an experience." "Say goodbye to clutter." Punchy triads and heavy em dash use. Instead: real numbers, concrete nouns, plain claims. "Loads in under a second" beats "blazing fast."
12. Emoji everywhere. A rocket for launch, a lightning bolt for speed, a lock for security, on every heading and button. Instead: cut decorative emoji; keep one only where it genuinely carries information.

Components

13. Glowing status dot. A saturated green dot in a pale pulsing halo, decorating a plain on/off state. Instead: a small flat dot plus a text label. No halo, no pulse.
14. Rounded card with a colored left border. The pale rounded box with a 4px accent bar, copied onto every list item. Instead: format lists with alignment and spacing; reserve the callout box for genuine asides.
15. Pastel icon tiles. Every feature gets a rounded-square chip with a line icon, tiled into a grid of visual filler. Instead: keep an icon only if it carries meaning; a clear label plus one sentence usually does more.
16. Max radius and glassmorphism. Everything pill-shaped; every card a translucent backdrop-blur pane. Instead: choose one small radius and hold it site-wide; build depth with solid surfaces and space.
17. Oversized drop shadow. A small card casting a huge soft shadow: big blur, low opacity, no offset, floating in fog. Instead: tight blur, small offset, and never a shadow larger than the thing casting it. Often a hairline border is enough.
18. Corners that do not nest. The same border radius on a box and the box inside it, so the inner corners poke out. Instead: inner radius = outer radius minus padding, or leave the inner element square.
19. Badge and pill spam. "✨ New," "β Beta," "🔥 Popular" manufacturing urgency nobody asked for. Instead: badge only genuine status, like a version number.
20. AI-drawn SVG icons. The round blob with two dot eyes; the logo that is a rounded square with a face. Instead: use a real icon set, or refine generated art until it is crisp and on brand.
21. Icon in a tint of itself. A blue icon on faint blue, a green icon on faint green: text-blue-500 on bg-blue-500/10. Instead: let icons inherit the text color, with no container.

Layout

22. The all-caps card grid. AN ALL-CAPS LABEL, a number or icon, repeated across six interchangeable cards. Instead: show the one thing that matters at full size, and rank the rest.

Evolved slop

23. The "tasteful terminal." Monospace everywhere, near-black background, one warm accent, ASCII art. It looks sophisticated, and it is still a default that thousands of sites picked the same week. Instead: monospace for code; terminal styling only where it serves the product.

How to Fix It

The theme across every fix is the same: decide before you decorate. A tell is bad because nobody chose it. If you can say why an element is there, it can stay.

• Pick one accent color and use it sparingly. Drop the framework defaults.
• Build hierarchy with size, weight, and space instead of color changes and font swaps.
• Subtract first. Remove decoration until something breaks, then put that one thing back.
• Write concrete copy. Specific numbers and nouns beat marketing intensity.
• Keep one voice and one system across pages. After each build round, check that the new page still looks like it belongs to the site.

🤖 AI tip: The strongest move is to hand AI a real reference. Find a site whose look you admire, give it to the AI, and say "match this direction." Specific prompts get specific results; vague prompts get the average of the internet, and the average is slop.

Key takeaway: None of these patterns is forbidden. A gradient you chose for a reason is design; a gradient the model reached for is slop. The difference between the two is whether you can explain it.

References

• killaislop.com, the catalog this guide summarizes, with rendered examples of every tell. Also available as an agent skill, kill-ai-slop, that scans a project and helps remove them.
• vibecoded-design-tells, the 3.2M-post analysis behind the class checklist.

Last updated: Friday, 7/10/2026