design-patterns

Reference guide for detecting AI slop patterns in visual and UX design including generic gradients, cookie-cutter layouts, and buzzword-heavy copy. Use as reference when reviewing design quality.

Design Slop Patterns

This reference documents common "AI slop" patterns in visual and UX design that indicate generic, low-quality, AI-generated content.

Table of Contents

Visual Design Slop

Generic Gradient Backgrounds

High-Risk Patterns:

Better Approach:

Overused Visual Motifs

Common AI Design Clichés:

Detection Signal: If every section has floating 3D shapes or glass effects, it's likely slop.

Stock Photo Aesthetics

Red Flags:

Better: Use authentic, specific imagery that relates to actual content.

Color and Typography

Color Palette Slop

Generic Palettes to Avoid:

Better Approach:

Typography Slop

Overused Font Combinations:

Generic Font Choices:

Better:

Type Hierarchy Issues

Slop Indicators:

Layout Antipatterns

Generic Landing Page Structure

The AI Landing Page Template:

1. Hero with gradient background + "Empower Your Business"
2. Three feature cards with icons
3. Stats section with big numbers
4. Testimonials (often fake-looking)
5. Pricing cards (often generic)
6. FAQ section
7. CTA button "Get Started Today"

Better: Design layout based on user journey and actual content needs.

Spacing Slop

Red Flags:

Better:

Card Overuse

When Cards Become Slop:

Better:

Center-Alignment Everywhere

Slop Pattern:

Better:

Component Overuse

Button Slop

Generic Button Patterns:

Better:

Icon Slop

Red Flags:

Better:

Form Slop

Generic Form Patterns:

Better:

UX Writing Slop

Generic Microcopy

Overused Phrases:

Generic CTAs:

Better:

Empty State Messages

Generic Slop:

Better:

Animation and Interaction

Animation Slop

Overused Patterns:

Better:

Interaction Slop

Generic Patterns:

Better:

Platform-Specific Slop

Web Design

Mobile Design

Presentation Design

Detection Signals

High-Confidence Slop Indicators

  1. Design looks exactly like other AI-generated designs
  2. No clear visual hierarchy
  3. Generic color palette (purple/pink/cyan)
  4. Copy uses only buzzwords and generic CTAs
  5. Layout follows template exactly without customization

Medium-Confidence Indicators

  1. Overuse of glassmorphism or neumorphism
  2. All components have same visual weight
  3. Excessive use of trendy design patterns
  4. No clear information architecture
  5. Design ignores actual content needs

Cleanup Strategies

Visual Audit

  1. Remove decorative elements that don't serve purpose
  2. Simplify color palette to 2-3 main colors + neutrals
  3. Establish clear typographic hierarchy
  4. Ensure sufficient contrast for accessibility
  5. Remove excessive animations and effects

Content-First Redesign

  1. Start with actual content and user needs
  2. Design information hierarchy based on importance
  3. Choose visual style that matches content tone
  4. Create layouts that serve content, not templates
  5. Test with real content, not lorem ipsum

Accessibility Pass

  1. Check color contrast ratios (WCAG AA minimum)
  2. Ensure interactive elements are keyboard accessible
  3. Add proper ARIA labels where needed
  4. Test with screen readers
  5. Verify all text is legible at various sizes

Context Matters

Some patterns are appropriate in context:

The issue is thoughtless application of patterns without considering whether they serve the user's needs or your design goals.

Red Flags Checklist

Your design might be slop if: