AI Slop Encyclopedia: Every Pattern, Every Fix, Every Tool
Prompt any LLM for "a SaaS landing page" and you get blue-600, Inter, rounded-2xl, three feature cards, and fade-up on scroll — every time. This catalogs all 87 of those patterns, why each happens, and the exact fix.
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. We have seen this exact page thousands of times, because we built Sailop to scan for it.
This is the reference we wished existed when we started: a single catalog of every AI slop pattern we found, why each one happens, how to detect it, and the exact fix. We scanned over 500 AI-generated websites, analyzed 12,000 components, and distilled it into this encyclopedia.
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. Bounce goes up, conversion goes down. Across 200 A/B tests, sites scoring Grade D or worse on Sailop converted 23% lower than sites scoring Grade B or better, controlling for copy and offer.
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 measure and fix this. After scanning 500 AI-generated sites, we found 94% rely on the same 12 core patterns. We catalogued 87 specific patterns across 7 dimensions, built a 0-100 score that maps to letter grades, and shipped tools — a CLI, an MCP server, and a Claude Code skill — that detect and fix them.
This encyclopedia documents all of it.
The AI Slop Scoring System
Sailop scores a site from 0 to 100. 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 score is computed across 7 dimensions, each weighted by its contribution to the "AI feel":
$ 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 patternEach 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-600 (#2563EB) because it appears most frequently in training data — about 34% of AI-generated sites use this exact shade. 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 in roughly 22% of AI sites, especially for gradients and dark backgrounds. 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. Always — we found this exact gradient in 41% of AI sites that use one. 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 — 47% of our sample. It is a good font, but when half the web 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 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. 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. One radius for everything: Named template areas make layouts readable and flexible. AI never uses them: 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. 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: The 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. 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. Tailwind's AI sets AI uses AI never writes When AI staggers, it uses linear delays — 0ms, 100ms, 200ms, 300ms — which cascades mechanically. Use exponential or jittered delays for an organic feel. The sticky nav with AI styles AI cards sit static. A subtle shadow change, a slight lift, or a border-color shift on hover makes them feel interactive. AI writes AI never wraps animation in 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. 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. A dark rectangle with three colored circles (red, yellow, green) top-left, then monospace text. This "terminal" appears in 61% 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. 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. 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. Click a question, reveal the answer — always with the same chevron rotation. Use native The primary button reads "Get Started" in 38% of AI sites; 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." Every container at "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. 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. A small badge atop the hero, often animated or labeled "New": "Announcing v2.0," "Trusted by 1000+ teams," with 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. 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. 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. 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. 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. 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. Everything is a AI never styles text selection. A branded selection color is one rule and reads as intentional design. AI leans on browser default focus rings or strips them entirely. Custom Covered under animation, but it is a structural tell too — the missing media query is a code-level slop signal. 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. Beyond divs, AI misuses elements: Interactive elements lack accessible labels. Icon buttons have no No "Skip to content" link for keyboard users — a basic requirement AI consistently omits: 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. No Spacing is the quiet dimension. Bad spacing does not scream — it whispers. But it adds up, and it is one of the most predictable. Every section gets 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. Related. AI never writes Padding should track importance — a key section deserves more room, a dense block needs less. AI treats every section the same. AI uses fixed breakpoints, which jump spacing abruptly at each one. AI applies the same spacing at every viewport, or at most one breakpoint ( Knowing the patterns is half the battle. Here is how to fix them, from fully automated to fully manual. If you run Claude Code with the Sailop MCP server, the fastest path is the 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. Install Sailop and use the three core commands: Stop slop before production by adding Sailop to your pipeline. A GitHub Action: If you cannot install Sailop, here are 20 changes you can make right now: Each takes under five minutes. All 20 can move your score 15-25 points — often a full grade. 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. How does Sailop compare to other tools that touch code quality and design? | Feature | Sailop | ESLint | Prettier | Lighthouse | Axe | |---|---|---|---|---|---| | Detects design patterns | Yes | No | No | Partial | No | | Detects color slop | Yes | No | No | No | Contrast only | | Detects typography slop | Yes | No | No | No | No | | Detects layout slop | Yes | No | No | No | No | | Detects animation slop | Yes | No | No | No | No | | Detects component patterns | Yes | No | No | No | No | | Detects structural issues | Yes | Yes | No | Yes | Yes | | Auto-fixes issues | Yes | Yes | Yes | No | No | | CLI | Yes | Yes | Yes | Yes | Yes | | MCP server | Yes | No | No | No | No | | Claude Code skill | Yes | No | No | No | No | | CI/CD integration | Yes | Yes | Yes | Yes | Yes | | Free | Yes | Yes | Yes | Yes | Yes | | Scores design quality | Yes | No | No | Performance only | Accessibility only | 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. 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. Everything you need to go deeper. Stop shipping AI slop. Your users can tell, and your conversion numbers prove it. Run it now. 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. Scan your frontend for AI patterns. Generate a unique design system. Stop shipping the same blue gradient as everyone else., , , , and no beyond the header. Semantic HTML communicates document structure to browsers and assistive tech for free.8. No Asymmetric Grids
9. No Off-Grid Spacing
10. No Varied Border Radius
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
.layout {
display: grid;
grid-template-areas:
"header header"
"sidebar main "
"footer footer";
grid-template-columns: 280px 1fr;
}12. No Subgrid
13. No Container Queries
.card {
container-type: inline-size;
}
@container (min-width: 400px) {
.card-content { flex-direction: row; }
}14. Everything in Divs
, , , , 15. No CSS Columns
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
1. Fade-Up on Everything
2. animate-pulse for Loading
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
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
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
@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
7. Backdrop-Blur Navigation
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
: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
10. transition-all as Default
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
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
Part 5: Component Patterns
1. Terminal Mockup with Three Dots
2. Identical Feature Cards
3. Stats Row
4. FAQ Accordion
5. "Get Started" CTA
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
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
9. Testimonial Grid
10. Badge with Pulse
animate-pulse or a glow. A reliable fingerprint. Remove it or replace it with a static announcement bar.11. "Built with Love" Footer
12. Feature Cards with Icon, Title, One Line
13. Dashboard Preview Cards
14. Pricing Three Equal Columns
15. Social Proof Logos Bar
Part 6: Structure Patterns
1. Div Soup
, , , or 2. No ::selection Styling
3. No :focus-visible Styling
:focus-visible improves accessibility and shows care::focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}4. No prefers-reduced-motion Respect
5. No CSS Custom Properties
6. Wrong Element for the Job
, instead of , . Correct elements deliver keyboard accessibility and screen-reader support for free.7. No aria-labels
aria-label, images lack meaningful alt text, and decorative images are not marked aria-hidden="true".8. No Skip Links
<a href="#main" class="sr-only focus:not-sr-only">
Skip to content
</a>9. className-Only (No Custom CSS)
10. No Modern text-wrap
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
1. Uniform py-20
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
3. No Off-Grid Values
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
6. No clamp() for Responsive Spacing
clamp() produces fluid spacing that scales between viewports:section {
padding-block: clamp(2rem, 5vw, 5rem);
}7. No Responsive Spacing Strategy
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
Using the Sailop Skill (/sailop)
/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)Using the CLI
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 componentsautotune 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
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
::selection styling in your global CSS.:focus-visible styling in your brand color.text-wrap: balance to h1, h2, h3.max-w-7xl to full bleed.grid-cols-3 with an asymmetric layout.transition-all with specific property transitions.prefers-reduced-motion media query.clamp() for at least one spacing value.:root.Tools Comparison Table
The Future of AI Slop
Resources
Blog Articles
Tools
Get Started
npx sailop install
sailop scan ./srcSHIP CODE THAT LOOKS INTENTIONAL