Anti-Patterns

The frontend-design skill includes explicit guidance on what not to do. These are the fingerprints of generic AI-generated work from 2024-2025. Avoiding these patterns is critical for creating distinctive interfaces.

The AI Slop Test

Critical quality check: If you showed this interface to someone and said “AI made this,” would they believe you immediately? If yes, that’s the problem.

A distinctive interface should make someone ask “how was this made?” not “which AI made this?” Every DON’T guideline below represents a pattern that AI models default to without guidance. They’re not always wrong in every context—but they’re overused to the point of being generic markers of AI output.

Typography Anti-Patterns

Overused Fonts

DON’T use overused fonts: Inter, Roboto, Arial, Open Sans, system defaults. These fonts are everywhere, making designs feel generic.

These fonts became the AI default because they’re safe and widely available. But safety creates invisibility.

Monospace as Shorthand

DON’T use monospace typography as lazy shorthand for “technical/developer” vibes.

Monospace fonts signal “code” or “tech” but don’t create meaningful differentiation. Unless you’re showing actual code, choose a more distinctive path.

Icon Headers Everywhere

DON’T put large icons with rounded corners above every heading. They rarely add value and make sites look templated.

<!-- Generic AI pattern -->
<div class="feature">
  <div class="icon-wrapper">
    <svg>...</svg>
  </div>
  <h3>Feature Name</h3>
  <p>Description...</p>
</div>

This pattern appears in nearly every AI-generated feature section. Break it.

Color Anti-Patterns

The AI Color Palette

DON’T use the AI color palette:

Cyan-on-dark backgrounds
Purple-to-blue gradients
Neon accents on dark backgrounds

This specific palette combination has become the signature of AI-generated interfaces. It’s recognizable at a glance.

Gradient Text for Impact

DON’T use gradient text for “impact”—especially on metrics or headings. It’s decorative rather than meaningful.

/* Avoid this common AI pattern */
.hero-title {
  background: linear-gradient(to right, #a855f7, #3b82f6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Gradient text is hard to read, fails accessibility checks, and screams “AI made this.”

Dark Mode by Default

DON’T default to dark mode with glowing accents—it looks “cool” without requiring actual design decisions.

Dark mode is easier for AI to make look interesting (glows, neon, contrast effects). But it’s become a crutch that avoids real design thinking.

Gray on Color

DON’T use gray text on colored backgrounds—it looks washed out. Use a shade of the background color instead.

/* Bad: gray on blue looks lifeless */
.card-on-blue {
  background: oklch(50% 0.15 250);
  color: oklch(70% 0 0); /* gray */
}

/* Good: darker blue on blue looks intentional */
.card-on-blue {
  background: oklch(50% 0.15 250);
  color: oklch(20% 0.10 250); /* tinted with blue */
}

Pure Black and White

DON’T use pure black (#000) or pure white (#fff). Always tint—pure black/white never appears in nature.

Layout Anti-Patterns

Cards Everywhere

DON’T wrap everything in cards. Not everything needs a container.

AI defaults to card-based layouts because they’re easy to structure. But overuse creates visual noise.

Nested Cards

DON’T nest cards inside cards—it creates visual noise and flattens hierarchy.

<!-- AI loves this pattern, but it's wrong -->
<div class="card">
  <div class="card"> <!-- Nested card -->
    <div class="card"> <!-- Triple nested -->
      Content
    </div>
  </div>
</div>

Use spacing, typography, and subtle dividers instead.

Identical Card Grids

DON’T use identical card grids—same-sized cards with icon + heading + text, repeated endlessly.

This is the most common AI layout pattern:

<!-- Generic AI grid -->
<div class="grid grid-cols-3">
  <div class="card"><Icon /><h3>Feature 1</h3><p>Text</p></div>
  <div class="card"><Icon /><h3>Feature 2</h3><p>Text</p></div>
  <div class="card"><Icon /><h3>Feature 3</h3><p>Text</p></div>
</div>

Every card looks identical. Break the pattern—vary sizes, remove some containers, use asymmetry.

Hero Metric Layout

DON’T use the hero metric layout template: big number, small label, supporting stats, gradient accent.

This specific pattern appears constantly in AI-generated dashboards and landing pages.

Center Everything

DON’T center everything. Left-aligned text with asymmetric layouts feels more designed.

Centering is safe. Safety is forgettable.

Uniform Spacing

DON’T use the same spacing everywhere. Without rhythm, layouts feel monotonous.

Visual Details Anti-Patterns

Glassmorphism Everywhere

DON’T use glassmorphism everywhere—blur effects, glass cards, glow borders used decoratively rather than purposefully.

Glassmorphism was trendy in 2021-2022 and became an AI crutch. Use it sparingly and intentionally, or avoid it entirely.

Lazy Border Accents

DON’T use rounded elements with thick colored border on one side—a lazy accent that almost never looks intentional.

/* This pattern is everywhere in AI output */
.card {
  border-radius: 12px;
  border-left: 4px solid var(--accent);
}

Decorative Sparklines

DON’T use sparklines as decoration—tiny charts that look sophisticated but convey nothing meaningful.

If the chart doesn’t communicate real data, don’t include it.

Generic Shadows

DON’T use rounded rectangles with generic drop shadows—safe, forgettable, could be any AI output.

/* AI default shadow */
.card {
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

This exact shadow appears on millions of AI-generated cards.

DON’T use modals unless there’s truly no better alternative. Modals are lazy.

AI defaults to modals because they’re easy to implement. But they interrupt flow and hide context. Consider inline expansion, slide-out panels, or page transitions instead.

Motion Anti-Patterns

Animate Layout Properties

DON’T animate layout properties (width, height, padding, margin). Use transform and opacity only.

Layout animations cause performance issues. AI often generates them because they’re intuitive but wrong.

Bounce and Elastic Easing

DON’T use bounce or elastic easing—they feel dated and tacky. Real objects decelerate smoothly.

/* Avoid these AI-common easings */
transition: transform 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55); /* bounce */
transition: transform 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275); /* elastic */

These were trendy in 2015 but now feel amateurish.

Interaction Anti-Patterns

Information Repetition

DON’T repeat the same information—redundant headers, intros that restate the heading.

<!-- AI loves redundancy -->
<section>
  <h2>Our Features</h2>
  <p>Here are our features:</p> <!-- Redundant -->
  <div class="features">...</div>
</section>

All Primary Buttons

DON’T make every button primary. Use ghost buttons, text links, secondary styles—hierarchy matters.

AI defaults to making everything equally prominent, which destroys hierarchy.

Responsive Anti-Patterns

Hide Critical Functionality

DON’T hide critical functionality on mobile. Adapt the interface, don’t amputate it.

AI often solves responsive design by removing features on mobile. That’s not responsive design—it’s abandonment.

Why These Patterns Persist

Every LLM learned from the same training data—millions of similar templates, tutorials, and codebases. Without explicit guidance to avoid these patterns, AI naturally converges on:

Familiarity: Patterns seen thousands of times
Safety: Choices that work but lack distinction
Ease: Solutions that are easy to code but generic

The solution: Explicit anti-patterns + design principles + diverse reference material. That’s what the frontend-design skill provides.

Breaking the Patterns

Avoiding these anti-patterns isn’t enough. You must replace them with intentional choices:

Choose a distinctive aesthetic direction

Commit to a bold tone that avoids generic neutrality

Use unexpected fonts and colors

Avoid defaults and AI-common palettes

Vary layouts and compositions

Break grids, use asymmetry, embrace white space

Apply motion purposefully

Focus on one high-impact moment rather than scattered animations

Run the AI Slop Test

If it looks AI-generated, iterate until it doesn’t

Design Principles

Learn the positive design principles that replace these anti-patterns

Skill System

Understand how the skill system delivers this guidance

Get Started

Core Concepts

Integration Guides

Usage

The AI Slop Test

Typography Anti-Patterns

Overused Fonts

Monospace as Shorthand

Icon Headers Everywhere

Color Anti-Patterns

The AI Color Palette

Gradient Text for Impact

Dark Mode by Default

Gray on Color

Pure Black and White

Layout Anti-Patterns

Cards Everywhere

Nested Cards

Identical Card Grids

Hero Metric Layout

Center Everything

Uniform Spacing

Visual Details Anti-Patterns

Glassmorphism Everywhere

Lazy Border Accents

Decorative Sparklines

Generic Shadows

Motion Anti-Patterns

Animate Layout Properties

Bounce and Elastic Easing

Interaction Anti-Patterns

Information Repetition

All Primary Buttons

Responsive Anti-Patterns

Hide Critical Functionality

Why These Patterns Persist

Breaking the Patterns

Design Principles

Skill System

​The AI Slop Test

​Typography Anti-Patterns

​Overused Fonts

​Monospace as Shorthand

​Icon Headers Everywhere

​Color Anti-Patterns

​The AI Color Palette

​Gradient Text for Impact

​Dark Mode by Default

​Gray on Color

​Pure Black and White

​Layout Anti-Patterns

​Cards Everywhere

​Nested Cards

​Identical Card Grids

​Hero Metric Layout

​Center Everything

​Uniform Spacing

​Visual Details Anti-Patterns

​Glassmorphism Everywhere

​Lazy Border Accents

​Decorative Sparklines

​Generic Shadows

​Modal Overuse

​Motion Anti-Patterns

​Animate Layout Properties

​Bounce and Elastic Easing

​Interaction Anti-Patterns

​Information Repetition

​All Primary Buttons

​Responsive Anti-Patterns

​Hide Critical Functionality

​Why These Patterns Persist

​Breaking the Patterns

​Related

Design Principles

Skill System

The AI Slop Test

Typography Anti-Patterns

Overused Fonts

Monospace as Shorthand

Icon Headers Everywhere

Color Anti-Patterns

The AI Color Palette

Gradient Text for Impact

Dark Mode by Default

Gray on Color

Pure Black and White

Layout Anti-Patterns

Cards Everywhere

Nested Cards

Identical Card Grids

Hero Metric Layout

Center Everything

Uniform Spacing

Visual Details Anti-Patterns

Glassmorphism Everywhere

Lazy Border Accents

Decorative Sparklines

Generic Shadows

Modal Overuse

Motion Anti-Patterns

Animate Layout Properties

Bounce and Elastic Easing

Interaction Anti-Patterns

Information Repetition

All Primary Buttons

Responsive Anti-Patterns

Hide Critical Functionality

Why These Patterns Persist

Breaking the Patterns

Related