AI Slop Encyclopedia: Every Pattern, Every Fix, Every Tool
The definitive 5000+ word reference on AI slop: 87 patterns across 7 dimensions, detection techniques, fix examples, tool comparisons, and the scoring system that grades your site from A to F. The only resource you need.
This is the article we wish existed when we started building Sailop. A single, comprehensive reference that catalogs every AI slop pattern we have found, explains why each one happens, shows how to detect it, and provides the exact fix. We have scanned over 500 AI-generated websites, analyzed 12,000 components, and distilled everything into this encyclopedia.
If you are a developer shipping AI-assisted frontends, bookmark this page. If you are a designer trying to explain why AI output feels off, send this to your team. If you are a founder wondering why your landing page looks like everyone else's, this is your diagnosis and your prescription.
For a shorter introduction to the topic, 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 article goes deeper than both.
What is AI Slop?
AI slop is the visual and structural homogeneity that emerges when websites are generated by large language models without deliberate design intervention. The term originated in early 2025 within design communities who noticed that AI-generated content -- from blog posts to landing pages -- shared an uncanny sameness. By 2026, "slop" has become 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. The problem is that AI builds the same website over and over. When you prompt ChatGPT, Claude, or Gemini to "build a SaaS landing page," you get a hero section with a gradient headline, three feature cards in a grid, a pricing table with three columns, a testimonial section, and a CTA. The colors will be blue, indigo, or violet. The font will be Inter or the system default. The border-radius will be rounded-2xl. The animation will be 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. The most common landing page patterns become the default output. When millions of developers use the same AI tools with similar prompts, the result is a web that converges toward a single aesthetic. We call that aesthetic AI slop.
Why does this matter? Three reasons.
First, trust. Users have developed pattern recognition for AI-generated content. When your site looks like every other AI site, visitors unconsciously register it as low-effort or even suspicious. Bounce rates increase. Conversion drops. We measured this across 200 A/B tests: sites scoring Grade D or worse on Sailop had 23% lower conversion than sites scoring Grade B or better, controlling for copy and offer.
Second, brand. If your visual identity is indistinguishable from your competitors', you have no visual identity. Your brand exists in the space between you and everyone else. When AI collapses that space to zero, your brand disappears.
Third, accessibility and quality. AI slop is not just ugly -- 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 that 94% use the same 12 core patterns. We identified 87 specific patterns across 7 dimensions. We built a scoring system that grades sites from A to F. And we built tools -- a CLI, an MCP server, and a Claude Code skill -- that detect and fix these patterns automatically.
This encyclopedia documents all of it.
The AI Slop Scoring System
Sailop scores websites on a scale of 0 to 100, where lower scores mean more unique and higher scores mean more generic. Yes, lower is better -- think of it like golf. A score of 0 means your site shares no patterns with the AI default. A score of 100 means your site is indistinguishable from raw ChatGPT output.
The score maps to letter grades:
- Grade A (0-19): Distinctive. Your site has 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 and differentiated.
- Grade C (40-59): Mediocre. The site works but feels familiar. A designer would notice the AI fingerprints.
- Grade D (60-79): Generic. The site looks like it was generated. Users will notice.
- Grade F (80-100): Full slop. Indistinguishable from default AI output.
The score is computed across 7 dimensions, each weighted by its contribution to the overall "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 score. Color and typography are weighted highest because they are the most immediately visible signals. For more on how this scoring works in a CI/CD context, see CI/CD for Design: Catching AI Slop Before It Ships.
Part 1: Color Patterns
Color is the single most diagnostic dimension of AI slop. When an LLM generates a website, the color choices betray its origin more reliably than any other factor. Here are the 15 color patterns we detect.
1. Tailwind Blue Primary
The most common pattern. AI defaults to Tailwind's blue-600 (#2563EB) as the primary color because it appears most frequently in training data. About 34% of AI-generated sites use this exact shade. The fix is to pick any color that is not a default Tailwind palette value. Use an HSL value with an odd lightness like hsl(217 71% 48%) instead of the exact blue-600 hex.
2. Indigo Everywhere
The second most popular choice. Indigo-500 and indigo-600 appear in about 22% of AI sites, especially for gradients and dark backgrounds. When your site is not blue, it is indigo. Break this by choosing a warm primary -- amber, rose, or even a muted green.
3. Violet as Accent
Violet or purple is the go-to accent color. AI pairs blue with violet the way fast food pairs burgers with fries. It is automatic and it is recognizable. If your primary is cool, make your accent warm. If your primary is warm, make your accent a different warm tone. Contrast in hue, not just lightness.
4. Pure Black Text
AI generates text-black or #000000 for body text. Pure black on pure white creates excessive contrast that causes eye strain and looks harsh. The fix: use a dark gray like #1a1a2e or hsl(240 10% 10%) that has a slight hue tint matching your palette.
5. Pure White Backgrounds
bg-white or #ffffff everywhere. Real design uses off-whites with subtle warmth or coolness. Try #fafaf8 for warm or #f8f9fb for cool. The difference is subtle but it changes the entire feel.
6. Slate Palette Domination
When AI does use grays, it uses Tailwind's slate palette exclusively. Slate-50 for backgrounds, slate-300 for borders, slate-500 for muted text, slate-900 for headings. Every gray is from the same scale. Fix: mix gray families. Use a warm gray for text and a cool gray for borders. Or define custom grays with HSL that include your brand hue at low saturation.
7. Single Accent Color
AI sites use one accent color for everything: buttons, links, highlights, icons. Real brands have a primary, a secondary, and often a tertiary color. Add at least one more accent. A complementary or split-complementary color creates visual richness.
8. No Secondary Color
Related to the above. AI generates a primary and then uses shades of gray for everything else. There is no secondary palette. Define a secondary color that is at least 60 degrees away on the color wheel from your primary.
9. No Hue Shift on Neutrals
In sophisticated palettes, neutral colors carry a faint hue that relates to the brand color. AI neutrals are pure grays with zero saturation. Adding 3-5% saturation of your primary hue to your grays creates cohesion.
10. No CSS Custom Properties for Colors
AI hardcodes color values directly in utility classes. There is no :root with --color-primary. This means no theming, no dark mode toggle, no easy palette swaps. Always define your palette as CSS 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 when AI does not use Tailwind classes, it hardcodes hex values: color: #2563eb. Hex values are opaque -- you cannot tell at a glance what hue, saturation, or lightness they represent. Use HSL or OKLCH for readability and easier manipulation.
12. No ::selection Color
AI never styles the text selection highlight. This is a small detail that instantly signals intentional design. Add it:
::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 go from blue to purple. Always. We found this specific gradient direction in 41% of AI sites with gradients. Fix: use unexpected gradient pairs. Amber to rose. Teal to lime. Or use single-hue gradients that shift in lightness only.
14. bg-gradient-to-r as Default
The gradient direction is always left-to-right (bg-gradient-to-r). Real design uses radial gradients, conic gradients, gradients at unusual angles (135deg, 200deg), or even mesh gradients. A bg-gradient-to-br alone is an improvement.
15. No Dark Mode Consideration
AI generates light mode only. There are no dark: variants, no prefers-color-scheme media queries, no theme toggle. In 2026, shipping without dark mode is like shipping without mobile support in 2016. It is not optional.
For a deep dive into how AI handles color and 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. We identified 12 patterns.
1. Inter as Default
Inter is the most common font in AI-generated sites. It appears in 47% of our sample. Inter is a good font, but when half the web uses it, it becomes invisible. It signals "I did not choose a font." Consider alternatives like Satoshi, General Sans, Outfit, or Source Serif for a different feel. Read our full analysis in The Typography Problem: Why Inter is Killing Your Brand.
2. Roboto Fallback
When AI does not use Inter, it uses Roboto. This is the Android system font and it carries strong associations with Google's Material Design. Unless you are building for that ecosystem, it makes your site look like a Google product.
3. Poppins for "Friendly"
When the prompt says "friendly" or "modern," AI reaches for Poppins. Poppins is geometric, round, and has become the "friendly startup" font. It is used so widely that it no longer communicates friendliness -- it communicates "AI picked this."
4. No Display Font
AI uses one font for everything. Real typography pairs a display font for headings with a text font for body copy. The contrast between a serif heading and a sans-serif body, or a geometric heading and a humanist body, creates visual interest that a single font cannot.
5. Single Font Weight
AI uses font-normal (400) and font-bold (700). That is it. Professional typography uses 300, 400, 500, 600, 700 at minimum. A heading at 600 with body text at 400 and captions at 300 creates a weight hierarchy that guides the eye.
6. No Letter-Spacing Adjustment
AI never adjusts letter-spacing. Headings in large sizes benefit from tighter tracking (letter-spacing: -0.02em). Small caps and uppercase text need looser tracking (letter-spacing: 0.05em). These micro-adjustments are invisible individually but their absence makes the whole page feel unpolished.
7. No text-wrap: balance
CSS now supports text-wrap: balance which prevents awkward short last lines in headings. AI never uses it. Adding text-wrap: balance to your headings is 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. Every AI site shares the same size progression. Define a custom scale using a different ratio. Instead of the default 1.25 ratio, try 1.2 or 1.333 for a different visual rhythm.
9. No font-display: swap
AI does not add font-display: swap to @font-face declarations, causing invisible text during font loading. 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. Always specify a full stack: font-family: 'Inter', 'Inter Fallback', system-ui, sans-serif.
11. No Variable Fonts
Variable fonts allow continuous weight and width adjustments from a single file. AI never uses them. A variable font with weight range 300-800 gives you infinite typographic flexibility at a smaller file size than loading three static weights.
12. No Italic as Variation
AI uses bold for emphasis but never italic. Real typography uses italic for titles of works, for emphasis within body text, and for pull quotes. The absence of italic in AI output creates a flat, monotone reading experience.
Part 3: Layout Patterns
Layout is where AI's template thinking is most visible. These 15 patterns appear with depressing regularity.
1. Centered Hero with Tagline
Every AI landing page starts with a centered hero: big heading, subtitle paragraph, one or two buttons, centered horizontally. This is the most predictable opening on the web. Try a split hero (text left, visual right), an off-center layout, or a hero that starts with a question instead of a statement.
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 an entire article about this problem. Use asymmetric grids (2/3 + 1/3), single columns with varied widths, or CSS Grid with named template areas.
3. 1fr 1fr for Everything
When AI does use CSS Grid explicitly, it writes grid-template-columns: 1fr 1fr. Equal halves. Real layouts use unequal splits like 2fr 1fr, 3fr 2fr, or even 1fr min-content.
4. max-w-7xl Container
Every AI site wraps content in max-w-7xl mx-auto. This is Tailwind's 80rem container and it makes every site feel exactly the same width. Try max-w-5xl for tighter content, or break the container entirely for full-bleed sections.
5. Hero-Features-Pricing Template
AI follows one page structure: Hero, then Features (cards), then Social Proof, then Pricing, then CTA, then Footer. This sequence is so predictable that users auto-scroll through it. Break the mold: 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 creates a metronomic feel where every section has exactly the same breathing room. Vary your section padding: py-12 for tight sections, py-32 for spacious ones. The rhythm should follow the content's importance.
7. No Semantic HTML
AI wraps everything in Every grid is symmetrical. Equal columns, equal rows, equal gaps. Real layouts use asymmetry to create focal points. A 60/40 split, a large image next to small text, or a sidebar that is narrower than the main content all create visual interest. AI places everything on a strict grid. Nothing overlaps, nothing breaks out, nothing is offset. Real design occasionally lets elements overlap, bleed outside containers, or sit at unexpected positions. A testimonial that overlaps two sections, or an image that breaks out of the content column, adds dynamism. AI uses one border-radius for everything: CSS Grid supports named template areas that make layouts readable and flexible. AI never uses them: CSS subgrid lets nested elements align to the parent grid. AI does not use it because most training data predates widespread subgrid support. In 2026 it is well-supported and invaluable for card layouts where internal elements should align across cards. Container queries let components respond to their container's size rather than the viewport. AI still uses only viewport-based media queries. Container queries make components truly reusable: AI uses The Animation is where AI slop becomes physically recognizable. The same motion patterns create a "slop feel" that users register before they can articulate it. Elements slide up while fading in. This is the only entrance animation AI knows. It applies to headings, cards, images, buttons -- everything fades up. Replace with varied entrances: fade-in without movement, scale-up from 0.95, slide from the side, or clip-path reveals. Tailwind's AI sets AI uses AI never writes @keyframes. Everything is a utility class transition. Custom keyframes let you create brand-specific motion: When AI does stagger animations, it uses linear delays: 0ms, 100ms, 200ms, 300ms. This creates a mechanical cascading effect. Use exponential or random stagger for a more organic feel. The sticky nav with AI styles AI cards have no hover state. They sit static on the page. A subtle shadow change, a slight lift, or a border color shift on hover makes cards feel interactive and inviting. AI writes AI never wraps animations in a CSS scroll-driven animations are well-supported in 2026 and create engaging experiences tied to scroll position. AI never uses them. A progress bar that fills as the user scrolls, or a parallax effect driven purely by CSS, immediately distinguishes a site from AI output. Components are where AI slop is most countable. These are the specific UI elements that appear with mechanical regularity. For the full catalog of 90+ patterns, see 90+ AI Design Patterns to Avoid: The Definitive List. A dark rectangle with three colored circles (red, yellow, green) in the top-left corner, followed by monospace text. This "terminal" component appears in 61% of AI-generated developer tool sites. We wrote a dedicated article on this pattern. Replace it with an actual 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, same radius, same shadow. Differentiate cards by varying their size, layout, or visual treatment. Make the most important feature twice the size of the others. A horizontal row of big numbers: "10K+ Users," "99.9% Uptime," "50ms Response." Every AI site has this. The numbers are often meaningless or unverifiable. If you must use stats, integrate them into narrative content instead of isolating them in a row. An accordion where clicking a question reveals the answer. AI always implements this with the same open/close chevron animation. Use The primary button says "Get Started" in 38% of AI sites. Other common labels: "Start Free Trial," "Try for Free," "Get Started Free." These are not bad labels, but their ubiquity makes them invisible. Be specific: "Scan Your Site," "See Your Score," "Run Your First Audit." Buttons with Every container uses "How It Works" followed by numbered steps: "1. Install," "2. Configure," "3. Deploy." The numbering is in large text or inside circles. This layout has been generated so many times it has lost all impact. Present your process as a narrative paragraph or a visual flow diagram instead. Three testimonial cards in a row with avatar, name, title, and quote. Same format, same size. Vary testimonials: feature one large testimonial with a photo, then two smaller ones. Or use a single scrolling testimonial with a large quote. A small badge at the top of the hero section, often with an animation or a "New" label: "Announcing v2.0" or "Trusted by 1000+ teams." It uses Footer text that says "Built with [heart emoji] by [team name]" or "Made with [heart emoji] in San Francisco." This is a cliche that AI reproduces faithfully. Write a real footer with useful links and information. The minimal feature card: an icon from Lucide or Heroicons, a short title, and exactly one line of description. The description is always vague: "Lightning fast performance" or "Built for scale." Write real descriptions that explain what the feature actually does. Stat cards showing "Total Revenue: $12,345" or "Active Users: 1,234" with an up-arrow indicator. These appear in SaaS sites as "proof" of the product. They are always fake data and always the same format. Show actual product screenshots instead. Three pricing tiers in equal columns: Free, Pro, Enterprise. The middle one is "Most Popular" with a highlighted border. This is the single most templated section on the web. If you must use three tiers, make them visually distinct. Different background colors, different sizes, or a non-grid layout. For more on how templates perpetuate this problem, read Sailop vs ThemeForest vs Shadcn: Why Templates Need a Score. A row of grayscale company logos with "Trusted by" above them. The logos are always generic: fictional companies or obvious placeholders. If you have real logos, make them part of a story ("How Company X reduced their bounce rate by 34%") rather than a silent bar. Structure patterns are invisible to the eye but visible in the source code. They affect accessibility, maintainability, and performance. Everything is a AI never styles the user's text selection. Adding a branded selection color takes one CSS rule and immediately signals intentional design. AI relies on browser default focus indicators or removes them entirely. Custom Covered in the animation section but it is also a structural issue. The absence of this media query is a code-level slop signal. AI hardcodes values throughout the codebase. No design tokens, no theming layer, no single source of truth for colors, spacing, or typography. This makes the site impossible to retheme and signals zero design system thinking. Beyond divs, AI misuses elements: Interactive elements lack accessible labels. Icons used as buttons have no aria-label. Images lack meaningful alt text. Decorative images are not marked There is no "Skip to content" link for keyboard users. This is a basic accessibility requirement that AI consistently omits: AI writes only Tailwind utility classes and never creates custom CSS. When every style is a utility class, you lose the ability to express relationships and create components that cannot be represented as a string of classes. No use of Spacing is the quiet dimension. Bad spacing does not scream -- it whispers. But it adds up, and it is one of the dimensions where AI is most predictable. Every section gets AI uses Tailwind's default 4px grid: all spacing values are multiples of 4px. While a 4px grid is not bad, real design occasionally uses off-grid values for optical alignment. An element that is technically "off grid" by 2px can look more aligned than one on the grid. Related to the above. AI never uses values like Section padding should relate to content importance. A key section deserves more space. A dense information section needs less. AI treats every section identically. CSS AI uses fixed breakpoints with media queries instead. The result is jarring spacing jumps between breakpoints. AI applies the same spacing at every viewport. A Knowing the patterns is half the battle. Here is how to fix them, from fully automated to fully manual. If you use Claude Code with the Sailop MCP server, the fastest workflow is the The skill generates a unique design seed based on your project name and applies consistent fixes across all files. It does not just randomize -- it creates a coherent design system and applies it everywhere. For a detailed walkthrough, see Claude Code + Sailop: Building Unique Frontends. Install Sailop globally and use the three core commands: The Prevent AI slop from reaching production by adding Sailop to your pipeline. Here is a GitHub Action: The The If you cannot install Sailop or want to fix things manually, here are 20 changes you can make right now: Each fix takes under 5 minutes. Doing all 20 can move your score by 15-25 points, often enough to jump a full grade. For more on building unique landing pages from scratch, see How to Build a Unique Landing Page in 2026. How does Sailop compare to other tools that touch on 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 that your site looks like every other AI-generated site. Sailop fills that gap. For a detailed comparison with ESLint specifically, read Sailop vs ESLint: Why Design Needs Its Own Linter. AI slop is not going away. As AI tools get better, the default output gets more polished -- but also more uniform. The gap between "AI default" and "intentionally designed" is not closing. It is shifting. In 2025, the default was rough. In 2026, the default is polished but identical. The slop is not ugly anymore. It is beautiful and boring. The solution is not to stop using AI. The solution is to constrain AI with design systems, custom rules, and tools like Sailop that enforce uniqueness. The future belongs to constraint-based design where AI generates within boundaries you define, not the boundaries it learned from the average of the web. Everything you need to go deeper: Stop shipping AI slop. Your users can tell. Your conversion numbers prove it. And now you have the tools to fix 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. That is the goal. Not perfection. Distinction. Scan your frontend for AI patterns. Generate a unique design system. Ship code that looks intentional., no , no , no , no beyond the header. Semantic HTML communicates document structure to both browsers and assistive technology.8. No Asymmetric Grids
9. No Off-Grid Spacing
10. No Varied Border Radius
rounded-2xl or rounded-lg. Real design varies radius by context: small radius for buttons (rounded-md), medium for cards (rounded-xl), large for hero images (rounded-3xl), and 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 CSS property creates newspaper-style flowing columns. AI never uses it. For text-heavy content like blog post listings or feature descriptions, CSS columns create a layout that is impossible 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 the go-to for any loading or attention state. It is a gentle opacity oscillation that has become synonymous with skeleton screens. Use custom keyframes for loading states that match your brand's visual language.3. duration-300 on Everything
transition-duration: 300ms for every transition. In reality, small elements like buttons should transition faster (150ms) and large elements like page sections should transition slower (500ms). Scale duration with the element's visual size.4. ease-in-out as Only Easing
ease-in-out for everything. This is a symmetric curve that feels robotic. Use cubic-bezier(0.16, 1, 0.3, 1) for a fast start with a gentle settle. Use different easings for enter vs exit animations.5. No Custom Keyframes
@keyframes subtle-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}6. Linear Stagger Delays
7. Backdrop-Blur Navigation
backdrop-blur-md and a semi-transparent background is in every AI site. It was novel in 2023. In 2026 it is a slop signature. Try a solid background nav that changes on scroll, or a nav that hides on scroll-down and shows on scroll-up.8. No :active Feedback
:hover but never :active. The active state (when a button is being pressed) is crucial for tactile feedback. A simple transform: scale(0.98) on :active makes buttons feel responsive.9. No Hover Effects on Cards
10. transition-all as Default
transition-all duration-300 which transitions every property including layout-triggering properties like width and height. Always transition specific properties: transition-property: color, background-color, box-shadow, transform.11. No prefers-reduced-motion
prefers-reduced-motion media query. This is not just a slop issue -- it is an accessibility failure. Always provide a reduced-motion alternative:@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 creating pill shapes. AI uses this for every button. Vary your button shapes: square buttons for actions, slightly rounded for navigation, pills only for tags or badges.7. rounded-2xl Cards
rounded-2xl (1rem border-radius). This has become the AI default. Use varied radii, or no radius at all for some elements. A mix of sharp and rounded corners creates visual contrast.8. Numbered Steps Section
9. Testimonial Grid
10. Badge with Pulse
animate-pulse or a subtle glow effect. This pattern has become a reliable AI fingerprint. Remove it entirely 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 styles improve accessibility and show design care::focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}4. No prefers-reduced-motion Respect
5. No CSS Custom Properties
6. No Semantic HTML Elements
, instead of , . Correct element usage is not just semantic -- it provides keyboard accessibility and screen reader support for free.7. No aria-labels
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 text-wrap
text-wrap: balance or text-wrap: pretty. These modern CSS properties improve text layout with 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. The result is mechanical rhythm with no variation. Different sections should breathe differently based on their content and importance.2. 4px Grid Only
3. No Off-Grid Values
padding: 0.875rem or margin: 1.125rem. These fractional values are common in professional design where optical alignment matters more than mathematical precision.4. Same Gap Everywhere
gap-6 on every grid. gap-4 on every flex container. The gap never varies. Use different gaps based on the relationship between elements: tighter gaps for related items, wider gaps for unrelated ones.5. No Varied Section Padding
6. No clamp() for Responsive Spacing
clamp() creates fluid spacing that scales between viewport sizes:section {
padding-block: clamp(2rem, 5vw, 5rem);
}7. No Responsive Spacing Strategy
py-20 that works on desktop is too much on mobile. AI either does not adjust or uses a single breakpoint: py-12 md:py-20.8. px-4 on Everything
px-4 (1rem) horizontal padding on every container, card, and section at mobile breakpoints. This creates visual monotony where every edge aligns at the same point. Vary horizontal padding by context.How to Fix AI Slop
Using the Sailop Skill (/sailop)
/sailop skill. It scans your project, identifies the worst offenders, and applies fixes in a single 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
npm install -g sailop
# 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 command is the most powerful. It generates a unique palette, typography scale, spacing system, and animation set from a seed string. The same seed always produces the same output, so your design is reproducible. For more on how MCP servers integrate with AI 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: npm install -g sailop
- run: sailop scan ./src --ci --max-score 50--max-score 50 flag fails the build if the slop score exceeds 50 (Grade C). You can also add a pre-commit hook:# .husky/pre-commit
sailop scan ./src --ci --max-score 60 --quick--quick flag runs only the fastest checks (color and typography) for a sub-second pre-commit experience. Read the full CI/CD setup guide 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 with your brand color.text-wrap: balance to h1, h2, h3 elements.max-w-7xl container 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
npm install -g sailop
sailop scan ./srcTry Sailop