Skip to documentation
oh-my-design
AI slop

A WORKING DEFINITION

Slop is what remains when product decisions disappear.

We do not guess who made a screen. We look for clusters of familiar defaults that replace choices tied to the audience, content, task, and evidence.

01 — A pattern is not a verdict

A rounded card, purple accent, centered hero, or short slogan can all be valid. A surface becomes slop when several defaults repeat without a product reason and begin to flatten hierarchy, trust, or brand character.

Authorship is unknown. The observable problem is decision debt: the screen cannot explain why this structure, wording, or visual treatment belongs to this product.

The rules behind every finding

  1. 01

    Read the product first

    Audience, task, existing behavior, and DESIGN.md outrank a generic anti-pattern list.

  2. 02

    Find clusters, not tells

    One pattern is rarely enough. Repetition, neighboring patterns, and visible impact determine the finding.

  3. 03

    Keep quality separate

    Contrast, focus, overflow, and broken states are quality failures. They are not aesthetic evidence of AI.

  4. 04

    Make the smallest honest fix

    Preserve behavior and content. Break the strongest cluster before proposing a new visual direction.

Ten lenses for reviewing generated UI

Treat these as design review questions, not a blacklist. Each lens shows the repeated default, the preference designers tend to protect, and the condition that can make the pattern valid.

01

Composition follows priority

Can a person tell what matters before reading every label?

Converging default
Every section receives the same heading, card count, alignment, and visual weight.
Designer preference
Let the primary task occupy the strongest position; make supporting information visibly quieter.
Still valid when
repetition represents a real sequence, comparison, or repeated entity type.
LAYOUT-01LAYOUT-05TYPE-01
02

Containers express boundaries

Does each box correspond to an object, action, selection, or layer?

Converging default
Cards wrap sections, then panels, then more cards because a container is the default unit.
Designer preference
Use whitespace, alignment, type, and dividers first. Add a container only when its boundary carries meaning.
Still valid when
the surface is movable, selectable, dismissible, or independently reusable.
LAYOUT-02LAYOUT-03VISUAL-03
03

Type reveals the reading mode

Is this a page to scan, read, compare, or operate?

Converging default
One fashionable face, similar sizes, repeated eyebrows, and display treatment everywhere flatten the page.
Designer preference
Tune measure, weight, leading, and contrast to the task; keep type roles stable inside each region.
Still valid when
a single family still provides a deliberate hierarchy and suits the product voice.
TYPE-01TYPE-02TYPE-03
04

Color and depth have jobs

Can every accent, surface, shadow, and radius explain its role?

Converging default
Gradient text, soft glow, glass, large radii, and diffuse shadows all signal importance at once.
Designer preference
Map color to brand, action, status, or selection; use one edge or elevation model per layer.
Still valid when
the material or palette belongs to the brand and preserves contrast and state clarity.
COLOR-01VISUAL-04VISUAL-05
05

Artifacts beat decoration

What on the screen proves the product claim?

Converging default
Generic icon tiles, fake metrics, blur orbs, and placeholder dashboards stand in for product substance.
Designer preference
Show a real workflow, asset, data shape, state transition, or cited constraint whenever possible.
Still valid when
illustration carries brand narrative or explains something the product cannot show directly.
EVIDENCE-01VISUAL-02VISUAL-06
06

Density follows the task

Are related items close and different groups separated?

Converging default
The same generous padding is applied to settings, tables, marketing copy, and mobile controls.
Designer preference
Use tight local groups and clear sectional breaks; optimize operational screens for comparison, not showroom whitespace.
Still valid when
generous space reduces cognitive load in a focused service flow or editorial moment.
LAYOUT-05DENSITY-01DENSITY-02
07

The product includes imperfect states

What happens before, after, and when the happy path fails?

Converging default
Only a polished success state exists; empty, loading, error, permission, and long-content states are absent.
Designer preference
Design state changes as part of the information architecture and give each state a useful next action.
Still valid when
the artifact is explicitly a static visual study and does not claim production readiness.
STATE-01STATE-02COPY-04
08

Responsive means reprioritized

What should move, stack, collapse, or disappear as space changes?

Converging default
Desktop columns merely shrink until copy clips, controls wrap randomly, and locale text breaks the frame.
Designer preference
Preserve reading order and task priority; change composition when the original relationship no longer fits.
Still valid when
horizontal overflow is a deliberate, labelled data or media browsing pattern.
LAYOUT-06RESPONSIVE-01LOCALE-02
09

Motion explains a change

Does movement clarify feedback, origin, continuity, or spatial relationship?

Converging default
Every item fades, floats, bounces, or staggers to make a static layout feel premium.
Designer preference
Choose one orchestrated moment and keep feedback fast, interruptible, and respectful of reduced motion.
Still valid when
ambient motion is part of the product experience and does not compete with reading or control.
MOTION-01MOTION-02MOTION-03
10

Controls keep a coherent contract

Does every control look, sound, and behave like the action it performs?

Converging default
Pills, badges, buttons, tabs, and modals multiply as visual variants without distinct behavior.
Designer preference
Name actions specifically, keep state in the URL when useful, and reserve modal depth for short contained tasks.
Still valid when
a variant communicates a tested state, permission, risk level, or repeated expert workflow.
COMP-01COMP-02COMP-03

Anti-slop is not a synonym for minimalism

Designers do not secretly prefer one visual style. They prefer a direction that is internally coherent, appropriate to the task, and executed beyond the template level.

Expressive editorial

Large type, unusual composition, imagery, and deliberate pacing can be right when the goal is discovery or storytelling.

Its signature comes from the subject, not from the current fashionable landing-page kit.

Dense product tool

Tables, compact controls, persistent navigation, and restrained type can be right when people compare and operate repeatedly.

Density is grouped, scan paths are stable, and states remain legible under real data.

Focused service flow

A quiet single column, familiar controls, and plain language can be right when trust and completion matter most.

Simplicity removes uncertainty rather than hiding missing product decisions.

Same intent, more product judgment

Switch between writing, localization, and interface structure. Each after state preserves the original task while replacing generic scaffolding with a specific decision.

Default pattern

Decoration chooses the layout

Gradient hero, icon tiles, nested cards, accent rails, and identical three-column sections all compete before the content has a role.

OmD direction

The task chooses the layout

One visual signature carries the brand. Steps become a sequence, comparisons become a split surface, and only independent objects remain cards.

LAYOUT-02LAYOUT-03VISUAL-01VISUAL-02

Why it changedThe after state removes containers that do not represent entities or actions; it does not replace one fashionable style with another.

Three labels, three different responses

Separating pattern convergence, product quality, and preference keeps the audit useful and prevents taste from masquerading as a standard.

SLOP

Context-free pattern cluster

Several defaults repeat without product evidence and weaken hierarchy, trust, or distinction.

QUALITY

A measurable defect

Accessibility, overflow, broken states, performance, or behavior fails a test or product contract.

PREFERENCE

A valid design choice

The choice fits the brief and DESIGN.md; another direction may exist, but it is not a defect.

Detect, revise, and verify without a style reset

The audit moves from evidence to the smallest useful change. It never starts by picking a more fashionable aesthetic.

  1. 01

    Read the real route

    Name the audience, task, protected behavior, and design source before scanning patterns.

  2. 02

    Collect deterministic signals

    Record DOM, CSS, repetition, line references, and browser evidence before making a contextual claim.

  3. 03

    Confirm the cluster

    Check frequency, neighboring patterns, DESIGN.md exceptions, and visible impact. Drop unsupported findings.

  4. 04

    Apply a focused correction

    Change the smallest set of containers, copy, or visual treatments that restores product hierarchy.

  5. 05

    Verify the same route

    Repeat desktop, mobile, behavior, accessibility, and locale checks against the original acceptance contract.

The research behind the definition

OmD uses an original taxonomy. These projects and style guides shaped its preservation, cluster, and evidence boundaries.

im-not-aiKorean translationese patterns and meaning-preserving edits.HumanizerCluster-based editing that preserves meaning instead of reacting to isolated tells.stop-slopFiller, formulaic contrast, vague claims, specificity, and reader trust.Impeccable Slop DetectorA public UI pattern catalog that separates slop from general quality.Taste SkillBrief-first visual direction and anti-default discipline.Anthropic frontend-designSubject-grounded direction, one justified signature, restraint, and critique before implementation.Vercel Web Interface GuidelinesProduction interaction, content handling, responsive, state, motion, and locale checks.Carbon Design SystemTask-aware density, spatial grouping, grid rhythm, and productive versus expressive typography.W3C CardsContent-first source order and accessible card boundaries rather than decorative containers.GOV.UK Design SystemReadable measure, small-screen-first composition, specific actions, and component use conditions.Apple Human Interface GuidelinesPriority, grouping, adaptable hierarchy, progressive disclosure, and platform context.Atlassian ElevationSurface depth tied to layering and interaction, with whitespace or borders preferred when lift is unnecessary.Microsoft language style guidesIndependent guidance for Korean, Japanese, Simplified Chinese, and Traditional Chinese.Primer Product UI PatternsReal product guidance for empty, loading, degraded, navigation, and saving states rather than detached component decoration.Carbon Data TableTask-specific row density, aligned headers, toolbar roles, and when dense data needs a table instead of cards.Fluent 2 CardCards represent one concept or object; their internal hierarchy and interaction mode follow that boundary.Fluent 2 ShapesRectangle, circle, pill, and popover shapes have component roles; corner radius changes with size and context.USWDS CardCards are modular summaries in collections, not decoration, simple CTAs, tables, or sequential prose.Primer Empty and Loading StatesState copy, recovery actions, progress scope, and loading timing are part of the product surface.