AI Slop Encyclopedia: Every Pattern, Every Fix, Every Tool

Prompt Claude, ChatGPT, or v0 with "build a SaaS landing page" and you can predict the output before it renders: a centered hero with a gradient headline, three feature cards in a grid-cols-3, a three-column pricing table, a testimonial row, a backdrop-blur-md sticky nav. The primary color is blue-600 (#2563EB). The font is Inter. The corners are rounded-2xl. Everything fades up on scroll. It is the page the defaults add up to, and it is the page Sailop is built to flag.

This is the reference we wished existed when we started: a single catalog of the AI slop patterns, why each one happens, how to detect it, and the exact fix. It is built from the documented defaults of the tools (Tailwind, shadcn/ui, Next.js starters, v0, Lovable, Bolt) and from what the model vendors themselves say their models drift toward, not from a measured sample of sites.

If you ship AI-assisted frontends, bookmark this page. If you are a designer trying to explain why AI output feels off, send it to your team. If your landing page looks like everyone else's, this is the diagnosis and the prescription.

For a shorter introduction, start with What is AI Slop: The 7 Dimensions of Generic Design. For the manifesto version, read The Anti-Slop Manifesto: 73 Rules for Unique Design. This goes deeper than both.

What is AI Slop?

AI slop is the visual and structural homogeneity that emerges when large language models generate websites without deliberate design intervention. The term surfaced in early 2025 inside design communities who noticed AI output — from blog posts to landing pages — shared an uncanny sameness. By 2026, "slop" is the standard term for any digital output that looks, reads, or feels machine-generated in a generic way.

The problem is not that AI builds bad websites. It is that AI builds the same website over and over. The colors land on blue, indigo, or violet. The font is Inter or the system default. The radius is rounded-2xl. The animation is fade-up on scroll. Every single time.

This happens because LLMs are trained on the aggregate of the web. They learn what is most common and reproduce it, so the most common landing-page patterns become the default output. When millions of developers run the same tools with similar prompts, the web converges toward one aesthetic. We call it AI slop. Why Every AI-Generated Website Looks the Same traces the mechanism in full.

It matters for three reasons.

Trust. Users have built pattern recognition for AI output. When your site looks like every other AI site, visitors quietly register it as low-effort or even suspicious. When a page looks like a template, it has to work harder to show it is worth reading, and the visitor gives it less time to do so.

Brand. If your visual identity is indistinguishable from your competitors', you have no visual identity. Your brand exists in the gap between you and everyone else. When AI collapses that gap to zero, the brand disappears with it.

Quality. AI slop is not just generic — it is often broken. Missing focus states, no reduced-motion support, no semantic HTML, no skip links. The same laziness that produces generic visuals produces inaccessible code.

We built Sailop to name and fix this. We cataloged 87 specific patterns across 7 dimensions and designed a 0-100 score that maps to letter grades. Today the free web scan checks a live page for eight of the most common signatures and returns a fix kit; the CLI, MCP server and Claude Code skill described further down are not published yet.

This encyclopedia documents all of it.

The AI Slop Scoring System

Sailop scores a site from 0 to 100, on the web scan today and on the CLI once it ships. Lower is better — think golf. A 0 means your site shares no patterns with the AI default. A 100 means it is indistinguishable from raw ChatGPT output.

The score maps to letter grades:

• Grade A (0-19): Distinctive. A clear visual identity that could not be mistaken for AI output.
• Grade B (20-39): Good. Some common patterns remain, but the overall impression is intentional.
• Grade C (40-59): Mediocre. It works but feels familiar. A designer would spot the fingerprints.
• Grade D (60-79): Generic. It looks generated. Users will notice.
• Grade F (80-100): Full slop. Indistinguishable from the default.

The CLI's score is designed to run across 7 dimensions, each weighted by its contribution to the "AI feel" (the web scan uses a lighter eight-signature version):

$ sailop scan ./src
Score: 76/100  Grade: D
Dimensions:
  Color      ████████░░ 8/10
  Typography ██████████ 10/10
  Layout     ███████░░░ 7/10
  Animation  ████████░░ 8/10
  Component  █████████░ 9/10
  Structure  ██████░░░░ 6/10
  Spacing    ████████░░ 8/10

Top issues:
  [HIGH] color-blue-primary: Primary color is Tailwind blue-600
  [HIGH] typography-inter-only: Only font family is Inter
  [HIGH] component-card-uniformity: 3 identical card structures
  [MEDIUM] animation-fade-up-only: All animations are fade-up
  [MEDIUM] layout-grid-cols-3: Repeated grid-cols-3 pattern

Each dimension scores 0-10 (10 being most generic). The weighted sum produces the final number. Color and typography carry the heaviest weight because they are the most immediately visible signals. For how this runs in a pipeline, see CI/CD for Design: Catching AI Slop Before It Ships.

Part 1: Color Patterns

Color is the single most diagnostic dimension. When an LLM generates a site, the color choices betray its origin more reliably than anything else. Here are the 15 color patterns we detect.

1. Tailwind Blue Primary

The most common pattern. AI defaults to Tailwind's blue-500 and blue-600 (#3B82F6, #2563EB) because Tailwind is the framework the generators start from and those are its stock blues. The fix: pick a color that does not land on a default Tailwind swatch. Use an HSL value with an odd lightness like hsl(217 71% 48%) instead of the exact hex. See How to Pick an Accent Color That Is Not Tailwind Blue.

2. Indigo Everywhere

The second choice. indigo-500 and indigo-600 show up often, especially for gradients and dark backgrounds. The HTTP Archive's Web Almanac 2025 saw indigo-500 grow from 0.03% to 0.54% of all pages between 2022 and 2025. When the site is not blue, it is indigo. Break it with a warm primary: amber, rose, or a muted green.

3. Violet as Accent

Violet or purple is the default accent. AI pairs blue with violet the way fast food pairs burgers with fries — automatic and recognizable. If your primary is cool, make your accent warm. If your primary is warm, choose a different warm tone. Contrast in hue, not just lightness.

4. Pure Black Text

AI generates text-black or #000000 for body copy. Pure black on pure white is harsh and causes eye strain. Use a dark gray with a faint hue tint that matches your palette, like #1a1a2e or hsl(240 10% 10%).

5. Pure White Backgrounds

bg-white everywhere. Real design uses off-whites with subtle warmth or coolness: #fafaf8 for warm, #f8f9fb for cool. The shift is small but it changes the whole feel.

6. Slate Palette Domination

When AI does reach for grays, it uses Tailwind's slate scale exclusively: slate-50 backgrounds, slate-300 borders, slate-500 muted text, slate-900 headings. Every gray comes from one scale. Mix families instead — a warm gray for text, a cool gray for borders — or define custom grays in HSL that carry your brand hue at low saturation.

7. Single Accent Color

One accent for everything: buttons, links, highlights, icons. Real brands run a primary, a secondary, and often a tertiary. Add at least one more — a complementary or split-complementary color creates richness.

8. No Secondary Color

Related. AI generates a primary and then leans on grays for everything else, with no secondary palette. Define a secondary at least 60 degrees away on the color wheel from your primary.

9. No Hue Shift on Neutrals

In good palettes, neutrals carry a faint hue tied to the brand color. AI neutrals are pure grays at zero saturation. Adding 3-5% of your primary hue to your grays creates cohesion.

10. No CSS Custom Properties for Colors

AI hardcodes color values in utility classes. There is no :root with --color-primary, which means no theming, no dark-mode toggle, no easy palette swap. Define your palette as custom properties:

:root {
  --color-primary: hsl(217 71% 48%);
  --color-primary-light: hsl(217 71% 62%);
  --color-surface: hsl(220 10% 98%);
  --color-text: hsl(220 10% 12%);
}

11. Hardcoded Hex Values

Even off Tailwind, AI hardcodes hex: color: #2563eb. Hex is opaque — you cannot read the hue, saturation, or lightness at a glance. Use HSL or OKLCH for readability and easier manipulation.

12. No ::selection Color

AI never styles the text-selection highlight. One rule signals intentional design:

::selection {
  background-color: hsl(217 71% 48% / 0.2);
  color: hsl(217 71% 20%);
}

13. Gradients Always Blue-to-Purple

When AI generates gradients, they run blue to purple, so often that Anthropic's own frontend prompt tells Claude to avoid "purple gradients on white backgrounds". Use unexpected pairs: amber to rose, teal to lime, or single-hue gradients that shift in lightness only. See The Tailwind Blue-Purple Gradient: AI's Signature Move.

14. bg-gradient-to-r as Default

The direction is always left-to-right (bg-gradient-to-r). Real design uses radial and conic gradients, unusual angles (135deg, 200deg), or mesh gradients. Even switching to bg-gradient-to-br is an improvement.

15. No Dark Mode Consideration

AI ships light mode only: no dark: variants, no prefers-color-scheme, no toggle. In 2026, shipping without dark mode is like shipping without mobile in 2016. Not optional.

For how Sailop generates alternatives, read Procedural Design Systems: How Sailop Generates Infinite Palettes.

Part 2: Typography Patterns

Typography is the second most visible dimension and one where AI is remarkably predictable. Twelve patterns.

1. Inter as Default

Inter is the most common font in AI output: OpenAI's GPT-5 prompting guide recommends it for new frontends, and Anthropic's frontend prompt lists it among the "overused font families". It is a good font, but when every generated page uses it, it becomes invisible. It signals "I did not choose a font." Try Satoshi, General Sans, Outfit, or Source Serif. Full breakdown in The Typography Problem: Why Inter is Killing Your Brand. The newer twist is Geist — see Geist, the New Inter.

2. Roboto Fallback

When AI skips Inter, it reaches for Roboto — the Android system font, heavy with Material Design associations. Unless you are building for that ecosystem, it makes your site read as a Google product.

3. Poppins for "Friendly"

Prompt for "friendly" or "modern" and AI grabs Poppins. Geometric, round, and so overused it no longer reads as friendly — it reads as "AI picked this."

4. No Display Font

AI uses one font for everything. Real typography pairs a display face for headings with a text face for body. A serif heading over a sans body, or a geometric heading over a humanist body, creates contrast a single font cannot.

5. Single Font Weight

AI uses font-normal (400) and font-bold (700). That is the whole range. Professional type uses 300, 400, 500, 600, 700 at minimum — headings at 600, body at 400, captions at 300 build a hierarchy that guides the eye.

6. No Letter-Spacing Adjustment

AI never touches tracking. Large headings want tighter tracking (letter-spacing: -0.02em); small caps and uppercase want looser (letter-spacing: 0.05em). Invisible one by one, but their absence makes the page feel unpolished.

7. No text-wrap: balance

CSS supports text-wrap: balance, which kills awkward short last lines in headings. AI never uses it. A one-line fix that improves every page:

h1, h2, h3 {
  text-wrap: balance;
}

8. Same Font Size Scale

AI uses Tailwind's default type scale — text-sm, text-base, text-lg, text-xl, text-2xl — built on a 1.25 ratio. Every AI site shares the same progression. Define a custom scale on a different ratio (try 1.2 or 1.333) for a different rhythm.

9. No font-display: swap

AI omits font-display: swap from @font-face, causing invisible text during font load. Always include it:

@font-face {
  font-family: 'YourFont';
  src: url('/fonts/your-font.woff2') format('woff2');
  font-display: swap;
}

10. No Fallback Font Stack

AI writes font-family: Inter with no fallbacks. If the font fails to load, the browser picks its own default and your layout shifts. Specify a full stack: font-family: 'Inter', 'Inter Fallback', system-ui, sans-serif.

11. No Variable Fonts

Variable fonts give continuous weight and width from a single file. AI never uses them. A variable font with a 300-800 weight range gives you infinite flexibility at a smaller payload than three static weights.

12. No Italic as Variation

AI uses bold for emphasis and never italic. Real typography uses italic for titles of works, emphasis inside body text, and pull quotes. Its absence flattens the reading experience.

Part 3: Layout Patterns

Layout is where AI's template thinking shows most. These 15 patterns recur with depressing regularity.

1. Centered Hero with Tagline

Every AI landing page opens with a centered hero: big heading, subtitle paragraph, one or two buttons, dead center. The most predictable opening on the web. Try a split hero (text left, visual right), an off-center layout, or a hero that opens on a question. See 21 Anti-Slop Hero Compositions.

2. grid-cols-3 Everywhere

The three-column grid is AI's answer to every layout question. Features? Three columns. Pricing? Three columns. Testimonials? Three columns. We wrote a whole article on why three identical cards kill conversion. Use asymmetric grids (2/3 + 1/3), single columns at varied widths, or CSS Grid with named template areas.

3. 1fr 1fr for Everything

When AI writes CSS Grid explicitly, it writes grid-template-columns: 1fr 1fr — equal halves. Real layouts split unequally: 2fr 1fr, 3fr 2fr, or 1fr min-content.

4. max-w-7xl Container

Every AI site wraps content in max-w-7xl mx-auto — Tailwind's 80rem container — so every site feels the same width. Try max-w-5xl for tighter content, or break the container for full-bleed sections.

5. Hero-Features-Pricing Template

One page structure: Hero, Features (cards), Social Proof, Pricing, CTA, Footer. So predictable users auto-scroll through it. Break the order — put pricing before features, lead with a case study, or open with a demo.

6. Same Padding on Every Section

py-20 or py-24 on every section. The uniform vertical rhythm is metronomic; every section breathes identically. Vary it: py-12 for tight sections, py-32 for spacious ones, scaled to the content's importance.

7. No Semantic HTML

AI wraps everything in <div>. No <article>, <section>, <aside>, <figure>, or <main>, and no <nav> beyond the header. Semantic HTML communicates document structure to browsers and assistive tech for free.

8. No Asymmetric Grids

Every grid is symmetrical — equal columns, rows, gaps. Asymmetry creates focal points: a 60/40 split, a large image beside small text, a sidebar narrower than the main column.

9. No Off-Grid Spacing

AI pins everything to a strict grid. Nothing overlaps, breaks out, or sits offset. Real design occasionally lets a testimonial straddle two sections or an image bleed past the content column. That break adds dynamism.

10. No Varied Border Radius

One radius for everything: rounded-2xl or rounded-lg. Vary it by context — rounded-md for buttons, rounded-xl for cards, rounded-3xl for hero images, none for full-bleed sections.

11. No CSS Grid with Named Areas

Named template areas make layouts readable and flexible. AI never uses them:

.layout {
  display: grid;
  grid-template-areas:
    "header  header"
    "sidebar main  "
    "footer  footer";
  grid-template-columns: 280px 1fr;
}

12. No Subgrid

Subgrid lets nested elements align to the parent grid. AI skips it because most training data predates wide support. In 2026 it is solid and invaluable for card layouts where internal elements should align across cards.

13. No Container Queries

Container queries let a component respond to its container's size, not the viewport. AI still uses only viewport media queries. Container queries make components genuinely reusable:

.card {
  container-type: inline-size;
}
@container (min-width: 400px) {
  .card-content { flex-direction: row; }
}

14. Everything in Divs

<div> for navigation, <div> for lists, <div> for articles. Replace them with <nav>, <ul>, <article>, <section>, <header>, <footer>, <figure>, <details>.

15. No CSS Columns

The column-count property creates newspaper-style flowing columns. AI never reaches for it. For text-heavy content like post listings or feature copy, it produces a layout that is hard to mistake for AI output:

.features-list {
  column-count: 2;
  column-gap: 2rem;
}

Part 4: Animation Patterns

Animation is where slop becomes physically recognizable. The same motion patterns create a feel users register before they can name it. See Motion Slop: Fade-In-Up and the Scroll Animation Default.

1. Fade-Up on Everything

Elements slide up while fading in. The only entrance AI knows — headings, cards, images, buttons, all fade up. Replace with varied entrances: fade with no movement, scale up from 0.95, slide from the side, or clip-path reveals.

2. animate-pulse for Loading

Tailwind's animate-pulse is AI's answer to any loading or attention state — a gentle opacity oscillation now synonymous with skeleton screens. Write custom keyframes that match your brand's motion language.

3. duration-300 on Everything

AI sets transition-duration: 300ms on every transition. Small elements like buttons should move faster (150ms); large elements like page sections, slower (500ms). Scale duration with visual size.

4. ease-in-out as Only Easing

AI uses ease-in-out for everything — a symmetric curve that feels robotic. Use cubic-bezier(0.16, 1, 0.3, 1) for a fast start and gentle settle, and different easings for enter vs exit.

5. No Custom Keyframes

AI never writes @keyframes; everything is a utility-class transition. Custom keyframes give you brand-specific motion:

@keyframes subtle-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

6. Linear Stagger Delays

When AI staggers, it uses linear delays — 0ms, 100ms, 200ms, 300ms — which cascades mechanically. Use exponential or jittered delays for an organic feel.

7. Backdrop-Blur Navigation

The sticky nav with backdrop-blur-md over a semi-transparent background is in every AI site. Novel in 2023, a signature by 2026. Try a solid nav that changes on scroll, or one that hides on scroll-down and reappears on scroll-up. See Glassmorphism and backdrop-blur: The AI Tell.

8. No :active Feedback

AI styles :hover but never :active. The pressed state is crucial for tactile feedback — a simple transform: scale(0.98) on :active makes buttons feel alive.

9. No Hover Effects on Cards

AI cards sit static. A subtle shadow change, a slight lift, or a border-color shift on hover makes them feel interactive.

10. transition-all as Default

AI writes transition-all duration-300, which animates every property — including layout-triggering ones like width and height. Always target specific properties: transition-property: color, background-color, box-shadow, transform.

11. No prefers-reduced-motion

AI never wraps animation in prefers-reduced-motion. This is not just a slop issue — it is an accessibility failure. Always provide a reduced-motion path:

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

12. No Scroll-Driven Animations

CSS scroll-driven animations are well-supported in 2026 and tie motion to scroll position with zero JS. AI never uses them. A progress bar that fills as you scroll, or pure-CSS parallax, instantly separates a site from AI output.

Part 5: Component Patterns

Components are where slop is most countable — the specific UI elements that appear with mechanical regularity. For the full catalog, see 90+ AI Design Patterns to Avoid: The Definitive List.

1. Terminal Mockup with Three Dots

A dark rectangle with three colored circles (red, yellow, green) top-left, then monospace text. This "terminal" is a fixture of AI-generated developer-tool sites. We wrote a dedicated piece on it. Replace it with a real screenshot, a code block without the chrome, or an interactive demo.

2. Identical Feature Cards

Three or four cards with the same structure — icon, heading, one-line description, same padding, radius, and shadow. Differentiate by size, layout, or treatment. Make your most important feature twice the size of the rest.

3. Stats Row

A horizontal row of big numbers: "10K+ Users," "99.9% Uptime," "50ms Response." Usually unverifiable. If you must use stats, fold them into narrative content instead of isolating them in a row.

4. FAQ Accordion

Click a question, reveal the answer — always with the same chevron rotation. Use native <details>/<summary> for a simpler, accessible implementation, or present FAQs as a plain list.

5. "Get Started" CTA

The primary button reads "Get Started"; the runners-up are "Start Free Trial," "Try for Free," "Get Started Free." Not bad labels — just invisible from overuse. Be specific to the product: "Scan Your Site," "See Your Score," "Run Your First Audit."

6. Pill Buttons

rounded-full pills on every button. Vary the shapes: squarer buttons for actions, slight rounding for nav, pills reserved for tags and badges.

7. rounded-2xl Cards

Every container at rounded-2xl (1rem). The AI default. Use varied radii — or no radius at all on some elements. Mixing sharp and rounded corners creates contrast.

8. Numbered Steps Section

"How It Works" then "1. Install," "2. Configure," "3. Deploy," numbered in large text or circles. Generated so often it has lost all impact. Present your process as a narrative paragraph or a visual flow instead.

9. Testimonial Grid

Three testimonial cards in a row — avatar, name, title, quote, all the same size. Vary it: one large testimonial with a photo, then two smaller ones, or a single scrolling quote.

10. Badge with Pulse

A small badge atop the hero, often animated or labeled "New": "Announcing v2.0," "Trusted by 1000+ teams," with animate-pulse or a glow. A reliable fingerprint. Remove it or replace it with a static announcement bar.

11. "Built with Love" Footer

Footer text reading "Built with [heart] by [team]" or "Made with [heart] in San Francisco." A cliche AI reproduces faithfully. Write a real footer with useful links.

12. Feature Cards with Icon, Title, One Line

The minimal card: a Lucide or Heroicons glyph, a short title, exactly one line of vague copy — "Lightning fast performance," "Built for scale." Write descriptions that explain what the feature actually does.

13. Dashboard Preview Cards

Stat cards reading "Total Revenue: $12,345" or "Active Users: 1,234" with an up-arrow, sold as product "proof." Always fake data, always the same format. Show a real screenshot instead.

14. Pricing Three Equal Columns

Three equal tiers — Free, Pro, Enterprise — with the middle one "Most Popular" inside a highlighted border. The single most templated section on the web. If you run three tiers, make them visually distinct: different backgrounds, sizes, or a non-grid layout. See 15 Anti-Slop Pricing Layouts and, on why templates perpetuate it, Sailop vs ThemeForest vs Shadcn.

15. Social Proof Logos Bar

A row of grayscale logos under "Trusted by," usually fictional or placeholder. If you have real logos, build them into a story ("How Company X cut bounce 34%") rather than a silent bar.

Part 6: Structure Patterns

Structure patterns are invisible to the eye but visible in the source. They drive accessibility, maintainability, and performance. For reading them straight off the source, see Read the CSS: Audit Any Site for AI Tells.

1. Div Soup

Everything is a <div>. A page with 200 divs and zero <section>, <article>, <aside>, or <figure> is a structural slop signature. Screen readers cannot navigate it; search engines struggle to parse it.

2. No ::selection Styling

AI never styles text selection. A branded selection color is one rule and reads as intentional design.

3. No :focus-visible Styling

AI leans on browser default focus rings or strips them entirely. Custom :focus-visible improves accessibility and shows care:

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

4. No prefers-reduced-motion Respect

Covered under animation, but it is a structural tell too — the missing media query is a code-level slop signal.

5. No CSS Custom Properties

AI hardcodes values throughout. No tokens, no theming layer, no single source of truth for color, spacing, or type. Impossible to retheme, and a sign of zero design-system thinking.

6. Wrong Element for the Job

Beyond divs, AI misuses elements: <div> instead of <button>, <span> instead of <a>, <div> instead of <nav>. Correct elements deliver keyboard accessibility and screen-reader support for free.

7. No aria-labels

Interactive elements lack accessible labels. Icon buttons have no aria-label, images lack meaningful alt text, and decorative images are not marked aria-hidden="true".

8. No Skip Links

No "Skip to content" link for keyboard users — a basic requirement AI consistently omits:

<a href="#main" class="sr-only focus:not-sr-only">
  Skip to content
</a>

9. className-Only (No Custom CSS)

AI writes only Tailwind utilities and never authors custom CSS. When every style is a class, you lose the ability to express relationships and build components that cannot be flattened into a string. Why Tailwind Makes Every Site Look the Same digs into this.

10. No Modern text-wrap

No text-wrap: balance for headings, no text-wrap: pretty for body. Both improve layout at zero performance cost, and AI never generates them.

Part 7: Spacing Patterns

Spacing is the quiet dimension. Bad spacing does not scream — it whispers. But it adds up, and it is one of the most predictable.

1. Uniform py-20

Every section gets py-20 (5rem top and bottom), sometimes py-24, never anything else. Mechanical rhythm, no variation. Different sections should breathe differently by content and importance.

2. 4px Grid Only

AI sticks to Tailwind's 4px grid — every value a multiple of 4. A 4px grid is fine, but real design occasionally uses off-grid values for optical alignment. An element 2px "off grid" can look more aligned than one on it.

3. No Off-Grid Values

Related. AI never writes padding: 0.875rem or margin: 1.125rem. These fractional values are common where optical alignment matters more than mathematical neatness.

4. Same Gap Everywhere

gap-6 on every grid, gap-4 on every flex row. Vary it by relationship: tighter gaps for related items, wider for unrelated ones.

5. No Varied Section Padding

Padding should track importance — a key section deserves more room, a dense block needs less. AI treats every section the same.

6. No clamp() for Responsive Spacing

clamp() produces fluid spacing that scales between viewports:

section {
  padding-block: clamp(2rem, 5vw, 5rem);
}

AI uses fixed breakpoints, which jump spacing abruptly at each one.

7. No Responsive Spacing Strategy

AI applies the same spacing at every viewport, or at most one breakpoint (py-12 md:py-20). A py-20 that works on desktop is too much on mobile.

8. px-4 on Everything

px-4 (1rem) horizontal padding on every container, card, and section at mobile. Every edge aligns at the same point, which reads as monotony. Vary horizontal padding by context.

How to Fix AI Slop

Knowing the patterns is half the battle. Here is how to fix them, from fully automated to fully manual.

Using the Sailop Skill (/sailop), once published

The skill, the CLI and the CI integration below are not published yet; the install page tracks their status. If you run Claude Code with the Sailop MCP server, the fastest path is the /sailop skill. It scans the project, flags the worst offenders, and applies fixes in one command:

> /sailop

Scanning project...
Found 23 AI slop patterns across 7 dimensions.

Top 5 issues:
1. [HIGH] color-blue-primary (3 files)
2. [HIGH] typography-inter-only (global)
3. [HIGH] component-card-uniformity (2 files)
4. [MEDIUM] animation-fade-up-only (4 files)
5. [MEDIUM] spacing-uniform-py20 (6 files)

Would you like me to fix these? (yes/no)

The skill derives a design seed from your project name and applies consistent fixes across every file. It does not randomize — it builds one coherent design system and propagates it. Full walkthrough in Claude Code + Sailop: Building Unique Frontends.

Using the CLI

Install Sailop and use the three core commands:

npx sailop install

# Scan: analyze your project and get a score
sailop scan ./src
# Output: score, grade, dimension breakdown, top issues

# Transform: apply fixes to specific files
sailop transform ./src/components/Hero.tsx --dimensions color,typography
# Output: modified file with fixes applied

# Autotune: generate a complete design system
sailop autotune ./src --seed "my-brand-name"
# Output: CSS custom properties file + modified components

autotune is the most powerful. It generates a palette, type scale, spacing system, and animation set from a seed string. The same seed always produces the same output, so your design is reproducible. On how MCP servers plug into agents, see MCP Servers for Design: Sailop Integrates with Any AI Agent.

Using CI/CD

Stop slop before production by adding Sailop to your pipeline. A GitHub Action:

name: Design Quality
on: [pull_request]
jobs:
  sailop:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npx sailop install
      - run: sailop scan ./src --ci --max-score 50

--max-score 50 fails the build when the score exceeds 50 (Grade C). Add a pre-commit hook too:

# .husky/pre-commit
sailop scan ./src --ci --max-score 60 --quick

--quick runs only the fastest checks — color and typography — for a sub-second pre-commit. Full setup in CI/CD for Design: Catching AI Slop Before It Ships.

Manual Techniques: 20 Quick Fixes

If you cannot install Sailop, here are 20 changes you can make right now:

• Replace your primary color with a non-Tailwind-default hue — any HSL value that misses the swatches.
• Add a second accent at least 60 degrees away on the color wheel.
• Add ::selection styling in your global CSS.
• Add :focus-visible styling in your brand color.
• Change your body font off Inter/Roboto/Poppins to something less common.
• Add a display font for headings that contrasts with the body.
• Adjust tracking: tighter on large headings, looser on small caps.
• Add text-wrap: balance to h1, h2, h3.
• Break at least one section out of max-w-7xl to full bleed.
• Replace at least one grid-cols-3 with an asymmetric layout.
• Use at least three different section-padding values across the page.
• Replace transition-all with specific property transitions.
• Add a prefers-reduced-motion media query.
• Replace at least one <div> with a semantic element.
• Add a "Skip to content" link.
• Remove the three-dot terminal mockup if you have one.
• Make CTA copy specific to your product, not "Get Started."
• Add a hover state to your cards.
• Use clamp() for at least one spacing value.
• Define your colors as CSS custom properties in :root.

Each takes under five minutes, and together they remove most of what a scan flags. Building from scratch instead? See How to Build a Unique Landing Page in 2026. Already shipped a v0/Lovable/Bolt site? Start with De-AI Your Lovable, v0, or Bolt Site.

Tools Comparison Table

How does Sailop compare to other tools that touch code quality and design?

ESLint catches code-quality issues. Prettier formats code. Lighthouse measures performance and basic accessibility. Axe audits accessibility deeply. None of them tell you your site looks like every other AI-generated site. Sailop fills that gap. Detailed comparison in Sailop vs ESLint: Why Design Needs Its Own Linter.

The Future of AI Slop

AI slop is not going away. As the tools improve, the default output gets more polished — and more uniform. The gap between "AI default" and "intentionally designed" is not closing; it is shifting. In 2025 the default was rough. In 2026 it is polished but identical. The slop is not ugly anymore. It is beautiful and boring.

The fix is not to stop using AI. It is to constrain it — with design systems, custom rules, and tools like Sailop that enforce uniqueness. The future belongs to constraint-based design, where AI generates inside boundaries you define, not the ones it learned from the average of the web.

Resources

Everything you need to go deeper.

Blog Articles

• What is AI Slop: The 7 Dimensions of Generic Design — the foundational explainer
• 90+ AI Design Patterns to Avoid: The Definitive List — every pattern in a catalog
• The Anti-Slop Manifesto: 73 Rules for Unique Design — the philosophy
• Complete Guide to Anti-AI Design in 2026 — the step-by-step guide
• From Grade F to Grade A: A Before-After Case Study — see the transformation
• Why Every AI-Generated Website Looks the Same — the root-cause analysis
• How to Detect AI-Generated Code in 30 Seconds — the quick test

Tools

• Sailop web scan: scan any live page and get a fix kit
• Sailop CLI and MCP server: not published yet, launch list on that page

Get Started

Stop shipping AI slop. Your users can tell.

Run the free web scan on your live page. See your score. Then use this encyclopedia to fix every pattern, one by one, until your site looks like nobody else's. The goal is not perfection. It is distinction.

Revision note

Updated 18 October 2026. Removed figures we could not support: a scan of "over 500" sites and "12,000 components", "94% rely on the same 12 core patterns", per-pattern frequencies (34%, 22%, 41%, 47%, 61%, 38%) and "200 A/B tests" showing a 23% conversion gap. None of them came from data we hold. The defaults are now tied to their public sources, and the tooling sections say which parts of Sailop exist today (the web scan) and which are not published yet (CLI, MCP server, skill).