Use design-anti-slop when:

• ✓ Reviewing AI-generated designs before implementation
• ✓ Conducting design audits for generic patterns
• ✓ Catching "template syndrome" in landing pages
• ✓ Ensuring brand authenticity in visual design
• ✓ Teaching design quality standards to teams
• ✓ Detecting the "AI startup aesthetic"

Do NOT use when:

• Following specific brand guidelines that happen to use common patterns
• Working with established design systems (different context)
• Intentionally using templates for rapid prototyping

Before (AI Design Slop):

• Purple/pink/cyan mesh gradient hero
• "Empower Your Business" headline
• Three feature cards with generic icons
• Floating 3D geometric shapes
• Stats section with big numbers
• Generic testimonials
• "Get Started Today" CTA

After (Authentic Design):

• Brand-specific color palette
• Specific value proposition headline
• Content-driven layout based on user needs
• Visual elements that serve purpose
• Real customer data/quotes with context
• Clear, action-oriented CTA

What changed:

• ✓ Removed generic gradient background
• ✓ Replaced buzzword headline with specific value
• ✓ Designed layout for actual content, not template
• ✓ Eliminated decorative 3D elements
• ✓ Used authentic customer proof
• ✓ Specified the action, not generic "get started"

1. Visual audit - Scan for generic patterns

   Check for:
   - Generic gradients (purple/pink/cyan mesh)
   - Floating 3D geometric shapes
   - Glass morphism overuse
   - Stock photo aesthetics
   - Same font for everything (usually Inter)
   

2. Layout audit - Check structure

   Red flags:
   - Cookie-cutter landing page template
   - Everything in cards
   - Center-aligned everything
   - Identical spacing everywhere
   - Template-driven, not content-driven
   

3. Copy audit - Review microcopy

   Buzzword alerts:
   - "Empower your business"
   - "Take control of your future"
   - "Unlock your potential"
   - "Seamless experience"
   - Generic CTAs ("Get Started", "Learn More")
   

Design slop indicators:

• Purple/pink/cyan gradient background
• Floating 3D shapes (cubes, spheres, toruses)
• Glass morphism on every element
• Stock photo aesthetics (diverse workplace, people pointing at screens)
• Inter for all text
• Everything in cards
• Everything center-aligned
• "Empower your business" type headlines
• Generic three-column feature layout
• Stats section with big numbers but no context
• Fake-looking testimonials
• Generic pricing cards
• "Get Started Today" CTA

Context: Reviewing a landing page for generic AI patterns.

Steps:

1. Check hero section

   Red flags:
   - Gradient mesh background (purple/pink/cyan)
   - "Empower/Transform/Revolutionize Your Business"
   - Generic stock photo or 3D shapes
   - Center-aligned everything
   
   Better:
   - Brand-specific colors
   - Specific value prop: "Process 10k transactions/sec"
   - Real product screenshot or authentic imagery
   - Strategic alignment
   

2. Check features section

   Red flags:
   - Exactly three cards
   - Generic icons (rocket, shield, chart)
   - "Feature 1" "Feature 2" "Feature 3" layout
   - All cards identical size regardless of content
   
   Better:
   - Content-driven layout (2, 4, 5 items if that's what you need)
   - Specific icons or remove them
   - Vary presentation based on feature importance
   - Size cards based on content
   

3. Check social proof

   Red flags:
   - Generic testimonials with stock photos
   - "10k+ users" "99% satisfaction" without context
   - Logo wall of companies you can't verify
   
   Better:
   - Real customer quotes with full names, roles, companies
   - Specific metrics: "Reduced support tickets 40% in Q3 2024"
   - Verifiable customer relationships
   

4. Check CTA

   Red flags:
   - "Get Started"
   - "Learn More"
   - "Try for Free"
   - Gradient button with excessive shadow
   
   Better:
   - Specific action: "Start 14-Day Trial" "Download Whitepaper"
   - "See Live Demo" "Request Pricing"
   - Simple, clear button styling
   

Expected outcome: Landing page that reflects actual product/brand

Context: Checking for generic dashboard patterns.

Steps:

1. Check color usage

   Red flags:
   - Purple accent color (generic SaaS palette)
   - Pastel everything
   - Pure black (#000) and pure white (#FFF)
   
   Better:
   - Brand-specific palette
   - Functional color system (success, warning, error)
   - Accessible contrast ratios (WCAG AA minimum)
   

2. Check layout patterns

   Red flags:
   - Every section in a card
   - Cards within cards
   - Everything spaced identically
   - Floating elements with excessive shadows
   
   Better:
   - Vary visual treatment based on content type
   - Group related data visually
   - Use spacing to create hierarchy
   - Subtle shadows where needed for depth
   

3. Check data visualization

   Red flags:
   - Default chart library colors
   - Gradients on every chart
   - 3D charts (rarely useful)
   - Decorative animations
   
   Better:
   - Purpose-driven color choices
   - Simple, readable charts
   - 2D charts (easier to read)
   - Animation only for state changes
   

Expected outcome: Dashboard that prioritizes data clarity over aesthetics

Context: Checking mobile UI for generic patterns.

Steps:

1. Check navigation

   Red flags:
   - Generic bottom tab bar with 5 items
   - Icons without labels
   - Hamburger menu for everything
   
   Better:
   - Navigation based on user flow
   - Most important actions surfaced
   - Labels for clarity
   - Consider alternatives to hamburger
   

2. Check components

   Red flags:
   - Fully rounded buttons (pill shape)
   - Gradient buttons everywhere
   - Ghost buttons as primary CTAs
   - Every input has an icon inside
   
   Better:
   - Appropriate border radius (4-8px usually)
   - Style hierarchy (primary solid, secondary outline)
   - Icons in inputs only when helpful
   

3. Check typography

   Red flags:
   - Same font family for everything
   - Body text < 16px
   - Insufficient line height (< 1.5)
   - Center-aligned paragraphs
   
   Better:
   - Clear hierarchy with font sizes/weights
   - Readable body text (16px+)
   - Comfortable line height (1.5-1.8)
   - Left-aligned body text
   

Expected outcome: Mobile UI that serves users, not trends

These are almost always AI-generated or template-derived:

• Purple (#7F5AF0) + Cyan (#2CB67D) + Pink (#FF6AC1) palette - The "AI startup" gradient
• Floating 3D geometric shapes - Cubes, spheres, toruses with no purpose
• Glassmorphism on everything - Blurred backgrounds, frosted glass effects overused
• Stock workplace diversity photos - Generic "people collaborating" imagery

• Exact three-column feature cards - The universal AI template
• Everything in cards - Cards within cards within cards
• Hero → 3 features → stats → testimonials → pricing → CTA - The AI landing page formula
• Center-aligned everything - Lazy symmetry without purpose

• Inter for everything - The default modern font choice
• Montserrat + Open Sans - The generic pairing
• Excessive font variation - 5+ fonts trying to look "designed"

• "Empower your business" - Generic value prop
• "Seamless experience" - Meaningless modifier
• "Get Started" CTA - Vague action
• "Trusted by industry leaders" - Unverifiable claim

Not all patterns are always slop:

• Brand guidelines - If brand actually uses purple, it's authentic
• Industry standards - Some patterns are conventions (e.g., ecommerce layouts)
• Accessibility - Some "generic" patterns exist for good UX reasons
• Established systems - Material Design, iOS HIG have reasons for patterns

The issue is thoughtless copying without considering if it serves your specific users and content.

• reference/visual.md - Complete visual design pattern catalog
• reference/layout.md - Layout antipatterns and alternatives
• reference/ux-writing.md - Microcopy and button text patterns

• text/anti-slop - For cleaning up design copy and documentation
• humanizer - For making design copy sound human

Design audit workflow:

1. Screenshot key sections
2. Compare against generic AI patterns
3. Identify specific slop instances
4. Redesign based on content/brand needs

Design anti-slop focuses on pattern detection. It doesn't teach design principles.

For learning design:

• Study design systems: Material Design, iOS HIG, Polaris
• Learn accessibility: WCAG guidelines
• Study color theory, typography, layout principles

This skill helps you avoid generic AI output once you know what you're doing.