Slop | Impeccable

AI slop changes with the era and the model. Impeccable keeps up, so you don’t have to spot every new tell yourself.
Trends change, and models have their own defaults. Compare purple gradients, beige editorial layouts, and a GPT-style neobrutalist take on the same fictional product. Impeccable’s guidance and checks evolve with both.
These examples exaggerate habits from different eras and models. Switch tabs to see what Impeccable catches in each. Hover or tap an outlined element to read the finding. Page-wide findings appear in the top bar.
Open an example to inspect the page with the detector overlay. Each one deliberately exaggerates a design habit.
Purple-to-blue gradients compete across buttons, text, and backgrounds.
Glass panels, neon edges, and glowing orbs pile up without helping you use the page.
Buttons bounce, icons wiggle, and badges float. Everything asks for attention at once.
A colored stripe decorates every rounded card, without marking anything useful.
Five layers of cards add padding and shadows around the same content. Each layer leaves less room for the task.
The same hero, metrics, and feature grid repeat with different colors. The layout barely responds to the content.
Inter everywhere, paired with an interchangeable product pitch. Typography should help give this product a voice.
Oversized icon tiles make decoration more prominent than the feature it introduces.
Low-contrast text gets lost against its background, especially in small labels.
Four bits of text explain the same field. Repetition adds reading without helping you decide what to enter.
Three columns of settings crowd into a scrolling dialog. A dedicated page would give the task room.
Patterns to recognize, with examples and ways to improve them. AI slop covers familiar AI design habits. Quality covers problems that make an interface harder to use. Your design system checks choices against your project’s own standards.
The catalog includes 62 detector rules and 6 patterns for design review. A finding is a reason to look closer: consider the page, the task, and any intentional design choices.
With DESIGN.md in your project, Impeccable checks for fonts, colors, type sizes, and corner radii that fall outside your documented system. Set up design-system checks.
This font is not in your documented type system. Use an approved font, or update DESIGN.md if the addition is intentional.
This color falls outside your documented palette. Use a palette color, or add the new color to your design system.
This corner radius is not in your documented scale. Use an existing radius, or update the system to include the new shape.
This font size is not in your documented type scale. Use an existing size, or add a new step to the system.
A decorative grid adds lines without helping people use the page. Keep grids for canvases, maps, or tasks that need measurement.
A crisp, unblurred shadow pushed 4px or more is the neobrutalist default many AI tools reach for. Keep it when the style is deliberate, and add data-impeccable-ignore="hard-offset-shadow" to it so the detector skips it.
A thick colored border makes a rounded card’s outline compete with its content. Try a lighter border, or let the background define the card.
Blur effects, glass cards, and glow borders used as decoration rather than to solve a real layering problem.
A thick colored stripe turns an ordinary card into something that looks like an alert. Remove it when there is no status or warning to communicate.
A thin border and a broad shadow both define the same card. Choose the edge or the shadow to give the surface a clearer shape.
Repeating stripes fill empty space with visual noise. Use a plain surface, or a texture that belongs to the design.
Large corner radii can squeeze the content and make every card look alike. Reduce the curve to suit the card’s size and give its contents room.
A hastily drawn mascot or scene can make a finished page feel unfinished. Use a well-made illustration or photo, or leave it out.
A small label above a heading adds another line to read. Remove it if it repeats the heading, or work the useful words into the heading itself.
Navigation, links, and controls are hard to use when their text is too small. Increase the size so people can read them without zooming.
A paragraph that ends on a single word leaves a gap in the column. Rewrap it with text-wrap: pretty or adjust the measure.
A multi-line heading whose last line is a stub reads unfinished. Use text-wrap: balance so its lines even out.
Headings and body text look too similar, making the page hard to scan. Give them clearer differences in size, weight, or spacing.
An icon in a rounded square above a heading is a familiar AI feature-card pattern. Try placing the icon beside the heading, or remove its container.
An oversized italic serif headline is a familiar shortcut to an editorial look. Choose a type style that fits the product’s character, rather than borrowing the same one by default.
A small pill above the headline can look clickable and compete with the message. Remove it if it adds little, or put useful information in the headline or supporting text.
A long headline at display size can fill the first screen by itself. Shorten it or reduce the size so the page has room to explain the offer and show what to do next.