# AI Slop Detection 2.0 + Design Anti-Pattern Catalog > Three-layer detection system: Visual, Structural, Interaction. Identifies 50+ characteristic fingerprints of AI-generated design, each with specific fix strategies. --- ## Detection Principles AI models have predictable aesthetic biases in design tasks. These biases come from statistical skew in training data, forming "AI slop" — a generic aesthetic you can spot instantly. This system divides detection into three layers, each scored independently then weighted and aggregated. **Weight Distribution**: Visual Layer 40% + Structural Layer 35% + Interaction Layer 25% --- ## Layer 1: Visual Detection ### 1.1 Purple-Blue Gradient **Pattern**: Any linear gradient from purple to blue, especially `#667eea → #764ba2` or `#6366f1 → #8b5cf6` **Why AI Slop**: This is AI's favorite color combo, appearing in >80% of AI-generated designs **Detection**: Check background gradients, button gradients, text gradients for purple-blue spectrum **Fix**: - Replace gradient with single color (boldly choose one pure color) - Or use same-spectrum micro-gradient (e.g. `#2563eb → #1d4ed8`, hue change < 15°) - Or replace gradient with texture/pattern ### 1.2 Dark + Cyan Neon **Pattern**: Dark background (#0a0a0a, #1a1a2e) with cyan/teal accents (#00f5d4, #06b6d4, #67e8f9) **Why AI Slop**: This is AI's default understanding of "tech feel", appearing in almost every AI-generated SaaS/Tech page **Detection**: Dark background + HSL hue 170-190 high-saturation accents **Fix**: - Bright background with low-saturation blue - Or keep dark but use warm accents (amber, coral) - Tech feel ≠ neon ### 1.3 Glassmorphism Overuse **Pattern**: `backdrop-filter: blur()` + `background: rgba(255,255,255,0.1)` + semi-transparent border **Why AI Slop**: 2022-2024 aesthetic hotspot in AI training data, now cliché **Detection**: Count `backdrop-filter` usage. >3/page = overuse **Fix**: - Max 1 element with glassmorphism (must have visual rationale) - Replace with solid surface + subtle shadow - Or use textured surface instead of transparency effects ### 1.4 Inter/Roboto Default Fonts **Pattern**: Inter, Roboto, Poppins, Montserrat as primary font **Why AI Slop**: These four fonts occupy >90% of AI-generated design, completely lacking personality **Detection**: font-family declaration contains these fonts **Fix**: - Alternatives (by personality): - Modern/Geometric: Instrument Sans, Manrope, Satoshi, General Sans - Humanist/Warm: Plus Jakarta Sans, Nunito Sans, DM Sans - Expressive/Display: Space Grotesk, Syne, Clash Display - Serif/Elegant: Fraunces, Playfair Display, Lora - Google Fonts free alternatives: Onest (→Roboto), Instrument Sans (→Inter) ### 1.5 Pure Black/White **Pattern**: `#000000` or `#ffffff` as background or text color **Why AI Slop**: Pure black/white doesn't exist in nature; real design uses tinted neutrals **Detection**: Color value is #000 or #fff **Fix**: - Replace pure black: `#0a0a0a` (dark mode) or `#1a1a1a` (neutral dark) - Replace pure white: `#fafafa` or `#f5f5f0` (warm tint) - Best practice: Use OKLCH to add micro brand hue to neutral grays ### 1.6 Neon Glow Effects **Pattern**: box-shadow with high-saturation color + large spread radius, e.g. `0 0 30px rgba(0,245,212,0.5)` **Why AI Slop**: Another AI misunderstanding of "modern feel" **Fix**: - Replace with subtle shadow: `0 1px 3px rgba(0,0,0,0.1)` - Or replace glow with border: `border: 1px solid var(--accent-200)` ### 1.7 3D Element Overuse **Pattern**: Spline/Three.js 3D objects as decoration, floating rotating geometry **Why AI Slop**: 2023-2024 AI design staple, now feels unprofessional **Fix**: Unless 3D is the product core (e.g. 3D modeling tool), use 2D illustration or photography ### 1.8 Gradient Text **Pattern**: `background: linear-gradient(...)` + `background-clip: text` + `color: transparent` **Why AI Slop**: AI's lazy approach to "visual impact" **Detection**: `background-clip: text` combo **Fix**: Use solid color text + size/weight contrast for impact --- ## Layer 2: Structural Detection ### 2.1 Three-Column Card Grid **Pattern**: `grid-template-columns: repeat(3, 1fr)` + identical-height cards + icon + title + description **Why AI Slop**: The only layout method for AI-generated "feature showcase" sections **Detection**: 3+ cards with same structure side-by-side **Fix**: - Use asymmetric layout: 1 large + 2 small, or staggered arrangement - Use list/table instead of cards (not all content suits cards) - Use tabs/collapsible panels to reduce simultaneously-displayed information ### 2.2 Hero Metric Layout **Pattern**: 3-4 large numbers + labels at top, like "10K+ Users / 99.9% Uptime / 50+ Countries" **Why AI Slop**: AI default landing page layout **Fix**: - Use narrative instead of numbers: one sentence stating value proposition - Or integrate numbers into design rather than standalone display - If metrics needed, at least use unique data visualization ### 2.3 Avatar Stack **Pattern**: Overlapping circular avatars + "Join 10,000+ others" text **Why AI Slop**: AI template for social proof section **Fix**: - Use real user reviews instead of avatar stack - Or use logos (partner companies/media) - Or omit entirely, build trust other ways ### 2.4 Excessive Border Radius **Pattern**: All elements `border-radius: 9999px` or `border-radius: 2rem` **Why AI Slop**: AI's superficial understanding of "friendly" **Detection**: border-radius value > 25% of element size **Fix**: - Small elements (buttons, tags): 8-12px - Medium elements (cards, panels): 12-16px - Large elements (sections, heroes): 16-24px - Only pill buttons use pill shape ### 2.5 Icon Per Feature **Pattern**: Every feature point paired with Lucide/Heroicons icon, icon area larger than content area **Why AI Slop**: AI's standard approach to filling space **Fix**: - Icons only when truly aiding comprehension (navigation, action buttons) - Feature descriptions don't need icons, good typography suffices - If icons needed, keep size restrained (16-20px, not 48px) ### 2.6 Uniform Spacing **Pattern**: All section spacing identical (e.g. each `py-20`) **Why AI Slop**: AI doesn't understand spatial rhythm **Fix**: - Build spacing gradient: tight → medium → generous → generous → medium → tight - Dense content areas use small spacing, sections use large spacing - Create breathing room: some areas use extra-large spacing (80-120px) ### 2.7 Symmetry Dependency **Pattern**: Page completely left-right symmetric, every "left-image right-text" followed by "right-image left-text" **Why AI Slop**: AI's result of pursuing "balance" **Fix**: Selectively break symmetry, use visual weight not position for balance ### 2.8 Formulaic Landing Page **Pattern**: Nav → Hero (title+subtitle+CTA) → Logos → Features (3 cards) → Testimonials → Pricing → Footer **Why AI Slop**: AI's only script for landing pages **Fix**: - Shuffle order: might start with pain point, might start with demo - Merge/omit sections: not every landing page needs testimonials - Create unique sections: interactive demo, visualized data, narrative --- ## Layer 3: Interaction Detection ### 3.1 Bounce/Elastic Easing **Pattern**: `cubic-bezier(0.68, -0.55, 0.265, 1.55)` or CSS `bounce` keyword **Why AI Slop**: AI thinks this is "playful and fun", actually a 2015 design trend **Detection**: Easing function has negative values or values > 1 **Fix**: - Alternative: `cubic-bezier(0.25, 1, 0.5, 1)` (ease-out-quart) - Or `cubic-bezier(0.16, 1, 0.3, 1)` (ease-out-expo) ### 3.2 Particle Effects **Pattern**: Floating particles in background, connected particle systems, starfield effects **Why AI Slop**: AI misunderstanding of "premium feel", actually distracts attention **Fix**: - Use subtle texture (dot grid, grid, noise) - Or use gradient blocks instead of particles - If animated background needed, use minimal geometric movement ### 3.3 Unnecessary Parallax **Pattern**: Multi-layer background scrolling at different speeds, usually in hero section **Why AI Slop**: Performance killer + motion sickness risk + outdated **Fix**: - Use CSS `scroll-driven animations` instead of JS parallax - Or use fixed visual hierarchy (z-index + opacity) for depth - Most cases: delete entirely, no loss ### 3.4 Auto-play Animations **Pattern**: Continuously playing animations after page load (rotate, pulse, float) **Why AI Slop**: AI thinks this is "dynamic", actually distraction **Fix**: - Animations triggered by user action (hover, click, scroll into view) - Continuous animations only for elements clearly needing attention (notifications, state changes) - Respect `prefers-reduced-motion` ### 3.5 Hover Overload **Pattern**: On hover, element transforms 3+ properties simultaneously (scale + rotate + shadow + color + translate) **Why AI Slop**: AI thinks complex = advanced **Fix**: - Hover only changes 1-2 properties - Recommended: scale(1.02) + shadow deepen, or translateY(-2px) + shadow deepen - Keep change restrained: scale ≤ 1.05, translate ≤ 4px ### 3.6 Unnecessary Transitions **Pattern**: `transition: all 0.3s` applied to all elements **Why AI Slop**: AI's "better to have than not" mentality **Fix**: - Only transition properties that need it: `transition: transform 0.15s, box-shadow 0.15s` - Don't use `transition: all` (poor performance + hard to debug) - Not every change needs transition ### 3.7 Missing Cursor Pointers **Pattern**: Clickable elements don't have `cursor: pointer` **Why AI Slop**: AI frequently ignores this detail **Fix**: - All `