What is AI Slop? The 7 Dimensions of Generic Design

Every AI-generated website shares a secret: the same visual DNA. If you've ever looked at a site and thought "this feels like every other site," you've encountered AI slop. But what exactly makes it feel that way? It's not one thing. It's seven.

What AI Slop Actually Means

AI slop is the visual homogeneity that emerges when language models generate frontend code. It's not about quality in the traditional sense. The code works. It's valid HTML, valid CSS, perfectly functional React. The problem is deeper: every AI reaches for the same defaults, the same patterns, the same aesthetic choices. The result is a web where thousands of sites look like siblings from the same family.

The term "slop" captures something specific. It's not broken. It's not ugly. It's just... generic. Like gas station coffee. Technically coffee. Functionally adequate. But you'd never mistake it for something crafted with intention.

Sailop defines AI slop across 7 measurable dimensions, each with specific detection rules. For a deeper dive into each pattern, see our definitive list of 90+ AI design patterns to avoid. Let's walk through every one.

Dimension 1: Color

AI models love blue. Specifically, they love the blue-500 to indigo-600 range (HSL hue 200-270). Run any AI coding assistant ten times and ask it to build a landing page. Count how many times you get a blue primary color. The number will depress you.

Beyond the hue problem, AI-generated palettes tend to be mechanical. Pure black (#000000) on pure white (#ffffff). No warm tinting. No hue-shifted neutrals. The background is always #fff or slate-50, never a warm off-white like #f5f0eb.

Detection signals:

• Primary color hue between 200 and 290
• Background is pure #fff or #000
• No HSL variation in neutral tones
• Accent colors use Tailwind's default scale values

Dimension 2: Typography

Inter. That's it. That's the dimension.

Okay, there's more (we wrote an entire article about why Inter is killing your brand). AI models default to Inter, system-ui, or no font declaration at all. They never pair a serif display font with a humanist sans-serif body. They never use negative letter-spacing on headings. They never set text-wrap: balance.

The typography dimension measures:

• Font family diversity (serif + sans-serif pairing scores higher)
• Heading weight distribution (AI defaults to font-weight: 700 for everything)
• Line height variation (AI uses 1.5 everywhere, never 1.15 for headings and 1.62 for body)
• Letter spacing intentionality

Dimension 3: Layout

Three columns. Every time. grid-cols-3 gap-4. AI models have internalized Tailwind's grid system so deeply that they can't imagine alternatives. The hero is always centered. The features section is always a 3-column grid. The footer is always a 4-column grid.

Sailop measures layout originality through:

• Grid template diversity (5fr 3fr scores higher than repeat(3, 1fr))
• Asymmetric layouts (content-sidebar ratios that aren't 50/50)
• Section padding variation (AI uses the same padding top and bottom for every section)
• Max-width choices (AI defaults to max-w-7xl, never a specific value like 980px)

Dimension 4: Animation

transition-all duration-300 ease-in-out. This is the AI animation. Every element. Every interaction. The same timing function, the same duration, the same properties.

Real design uses:

• Custom cubic-bezier curves like cubic-bezier(0.22, 1, 0.36, 1)
• Different durations for different properties (color transitions at 700ms, transforms at 250ms)
• Non-standard easing (bouncy overshoots, springy returns)
• prefers-reduced-motion media queries (AI almost never includes these)

Dimension 5: Components

The AI component library: Card with rounded-lg and shadow-md. Button with bg-blue-500 hover:bg-blue-600. Badge with inline-flex items-center rounded-full. Modal with backdrop-blur. Every single time.

Sailop detects component homogeneity by checking:

• Border radius values (rounded-lg on everything vs. varied radii)
• Shadow patterns (shadow-md vs. intentional box-shadow declarations)
• Button styling diversity
• Card structure predictability

Dimension 6: Structure

AI-generated pages follow a rigid template: Navbar > Hero > Features > Testimonials > CTA > Footer. Always. The HTML structure is flat, predictable, and interchangeable between any two AI-generated sites.

Structure detection includes:

• Section ordering predictability
• Nesting depth and complexity
• Semantic HTML usage (AI rarely uses
  ,
• Content hierarchy beyond the obvious

Dimension 7: Spacing

This is the subtlest dimension. AI uses Tailwind's 4px grid exclusively: p-4, p-8, p-12. Every value is a multiple of 4. Real design uses intentional off-grid values. 5px. 14px. 22px. Values that create visual rhythm through irregularity.

Sailop checks:

• Whether spacing values follow a strict 4/8px grid (penalty for uniformity)
• Padding variation between sections (same padding everywhere = slop)
• Gap consistency vs. intentional variation
• Hero padding vs. content padding ratios

How Sailop Scores These Dimensions

Each dimension contributes to a 0-100 DNA score. A score of 0 means the code is completely unique. A score of 100 means it's maximally generic. Most AI-generated code scores between 60 and 85.

npx sailop scan ./src
# Output:
# DNA Score: 72/100 (Grade D)
# Color:      81  - blue-500 primary, pure white bg
# Typography: 68  - Inter only, no serif pairing
# Layout:     75  - grid-cols-3, centered hero
# Animation:  90  - transition-all duration-300 everywhere
# Components: 65  - rounded-lg shadow-md cards
# Structure:  58  - standard section ordering
# Spacing:    67  - strict 4px grid

Breaking Free

Understanding the 7 dimensions is the first step. For the full detection and prevention workflow, read our complete guide to anti-AI design in 2026. The next step is measuring your own code against them. Run npx sailop scan on any project to get your DNA score with a full dimension breakdown.

The goal isn't to be weird for weirdness' sake. It's to be intentional. Every design choice should be a choice, not a default. That's what separates craft from slop. Learn how to detect AI-generated code in 30 seconds using the Sailop CLI.

Try Sailop free at sailop.com and see where your code falls on the slop spectrum.

Try Sailop

Scan your frontend for AI patterns. Generate a unique design system. Ship code that looks intentional.