AI slop CLI
Border accent on rounded element
Thick accent border on a rounded card. The border clashes with the rounded corners. Remove the border or the border-radius.
See in /impeccableThe visible tells of AI design
Slop
37 patterns that mark an interface as AI-generated, and the detection overlay that catches them in place. Watch it flag them live, try it on 11 synthetic specimens, or browse the full catalog. 25 rules run deterministically (npx impeccable detect or the browser extension); 12 need /impeccable critique's LLM review pass.
01 See it
Every wave of AI-generated UIs converges on a recognizable aesthetic. The detector catches both. The patterns just change.
Purple gradients, glassmorphism, neon glow
Hover or tap any outlined element to see which rule fired. Toggle the era to see how the patterns shifted.
02 Try it live
These 11 synthetic slop pages ship with the detector script baked in. Click any to see the overlay running on a real page, then hover the outlined elements.
Purple Gradients Everywhere
The AI color palette: purple-to-blue gradients on everything. Buttons, text, backgrounds, orbs. The new "make it pop."
Lazy "Cool"
Glassmorphism, neon glows, blurred orbs, monospace everything. Looks like a hackathon project, not a product.
Lazy "Impact"
When in doubt, animate everything. Bouncing buttons, wiggling icons, gradient text, floating badges. Motion without meaning.
Side-Tab Cards
A thick colored border on one side of a rounded card. The single most recognizable tell of AI-generated UI.
Cardocalypse
Cards inside cards inside cards. Five levels of nesting, each with its own padding and shadow.
Copy-Paste Layouts
The same hero-metric-features template repeated with different colors. When every section looks the same, nothing stands out.
Inter Everywhere
One font for everything. Headings, body, labels, buttons. No typographic hierarchy, no personality, no design.
Massive Icons
Icon containers larger than the content they introduce. When the decoration is bigger than the message, priorities are backwards.
Bad Contrast Choices
Gray text on colored backgrounds, low-contrast labels, unreadable combinations. Looking good and being readable should not conflict.
Redundant UX Writing
Label, sublabel, helper text, and hint text all saying the same thing in slightly different words. Say it once, say it well.
Modal Abuse
Complex settings crammed into a modal. If it needs a scroll bar and three columns, it deserves its own page.
03 The catalog
Every pattern /impeccable teaches against. AI slop rules flag the tells of AI-generated UIs; Quality rules flag general design mistakes that hurt regardless of who wrote them.
How to read this
Each rule shows how it is detected:
- CLI
- Deterministic. Runs from
npx impeccable detecton files, no browser required. - Browser
- Deterministic, but needs real browser layout. Runs via the browser extension or Puppeteer, not the plain CLI.
- LLM only
- No deterministic detector. Caught by /impeccable critique during its LLM design review.
Visual Details
6 rules
AI slop LLM only
Glassmorphism everywhere
Blur effects, glass cards, and glow borders used as decoration rather than to solve a real layering problem.
See in /impeccable AI slop LLM only
Reaching for modals by reflex
Modals interrupt the user and are lazy as a design default. Use them only when there is truly no better place for the interaction.
See in /impeccable AI slop LLM only
Rounded rectangles with generic drop shadows
The safest, most forgettable shape on the web. Could be the output of any AI. Commit to a stronger visual treatment.
See in /impeccable AI slop CLI
Side-tab accent border
Thick colored border on one side of a card. The most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.
See in /impeccable AI slop LLM only
Sparklines as decoration
Tiny charts that look sophisticated but convey no meaningful information. If the data matters, give it room.
See in /impeccableTypography
6 rules
AI slop CLI
Flat type hierarchy
Font sizes are too close together. No clear visual hierarchy. Use fewer sizes with more contrast (aim for at least a 1.25 ratio between steps).
See in /impeccable AI slop CLI
Icon tile stacked above heading
A small rounded-square icon container above a heading is the universal AI feature-card template. Every generator outputs this exact shape. Try a side-by-side icon and heading, or let the icon sit in flow without its own container.
See in /impeccable AI slop LLM only
Monospace as "technical" shorthand
Using a monospace typeface to signal "developer / technical" vibes. Reach for real type choices instead of a lazy stereotype.
See in /impeccable AI slop CLI
Overused font
Inter, Roboto, Fraunces, Geist, Plus Jakarta Sans, and Space Grotesk are used on so many sites they no longer feel distinctive. Each new wave of AI-generated UIs converges on the same handful of faces. Choose a face that gives your interface personality.
See in /impeccable AI slop CLI
Single font for everything
Only one font family is used for the entire page. Pair a distinctive display font with a refined body font to create typographic hierarchy.
See in /impeccable Quality CLI
All-caps body text
Long passages in uppercase are hard to read. We recognize words by shape (ascenders and descenders), which all-caps removes. Reserve uppercase for short labels and headings.
See in /impeccableColor & Contrast
6 rules
AI slop CLI
AI color palette
Purple/violet gradients and cyan-on-dark are the most recognizable tells of AI-generated UIs. Choose a distinctive, intentional palette.
See in /impeccable AI slop CLI
Dark mode with glowing accents
Dark backgrounds with colored box-shadow glows are the default "cool" look of AI-generated UIs. Use subtle, purposeful lighting instead, or skip the dark theme entirely.
See in /impeccable AI slop LLM only
Defaulting to dark mode for "safety"
Defaulting to light mode to be safe is the inverse of defaulting to dark mode to look cool. Either way you are retreating from a decision.
See in /impeccable AI slop CLI
Gradient text
Gradient text is decorative rather than meaningful. A common AI tell, especially on headings and metrics. Use solid colors for text.
See in /impeccable Quality CLI
Gray text on colored background
Gray text looks washed out on colored backgrounds. Use a darker shade of the background color instead, or white/near-white for contrast.
See in /impeccable Quality CLI
Pure black background
Pure #000000 as a background color looks harsh and unnatural. Tint it slightly toward your brand hue (e.g., oklch(12% 0.01 250)) for a more refined feel.
See in /impeccableLayout & Space
7 rules
AI slop CLI
Everything centered
Every text element is center-aligned. Left-aligned text with asymmetric layouts feels more designed. Center only hero sections and CTAs.
See in /impeccable AI slop LLM only
Hero metric layout
Big number, small label, three supporting stats, gradient accent. Used everywhere, trusted nowhere.
See in /impeccable AI slop LLM only
Identical card grids
Same-sized cards with icon + heading + text repeated endlessly. The default AI homepage layout.
See in /impeccable AI slop CLI
Monotonous spacing
The same spacing value used everywhere. No rhythm, no variation. Use tight groupings for related items and generous separations between sections.
See in /impeccable AI slop CLI
Nested cards
Cards inside cards create visual noise and excessive depth. Flatten the hierarchy: use spacing, typography, and dividers instead of nesting containers.
See in /impeccable AI slop LLM only
Wrapping everything in cards
Not every piece of content needs a bordered container. Spacing and alignment create visual grouping without the overhead of a card.
See in /impeccable Quality Browser
Line length too long
Text lines wider than ~80 characters are hard to read. The eye loses its place tracking back to the start of the next line. Add a max-width (65ch to 75ch) to text containers.
See in /impeccableMotion
2 rules
AI slop CLI
Bounce or elastic easing
Bounce and elastic easing feel dated and tacky. Real objects decelerate smoothly. Use exponential easing (ease-out-quart/quint/expo) instead.
See in /impeccable Quality CLI
Layout property animation
Animating width, height, padding, or margin causes layout thrash and janky performance. Use transform and opacity instead, or grid-template-rows for height animations.
See in /impeccableInteraction
2 rules
Quality LLM only
Every button is a primary button
When every button looks equally important, nothing reads as the primary action. Use ghost buttons, text links, and secondary styles to build hierarchy.
See in /impeccable Quality LLM only
Redundant information
Intros that restate the heading. Section labels that repeat the page title. Cards that echo their own caption. Make every word earn its place.
See in /impeccableResponsive
1 rule
Quality LLM only
Amputating features on mobile
Hiding critical functionality on mobile because it is inconvenient. Adapt the interface to the context, do not strip it.
See in /impeccableGeneral quality
7 rules
Quality Browser
Cramped padding
Text is too close to the edge of its container. Add at least 8px (ideally 12-16px) of padding inside bordered or colored containers.
Quality CLI
Justified text
Justified text without hyphenation creates uneven word spacing ("rivers of white"). Use text-align: left for body text, or enable hyphens: auto if you must justify.
Quality CLI
Low contrast text
Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.
Quality CLI
Skipped heading level
Heading levels should not skip (e.g. h1 then h3 with no h2). Screen readers use heading hierarchy for navigation. Skipping levels breaks the document outline.
Quality CLI
Tight line height
Line height below 1.3x the font size makes multi-line text hard to read. Use 1.5 to 1.7 for body text so lines have room to breathe.
Quality CLI
Tiny body text
Body text below 12px is hard to read, especially on high-DPI screens. Use at least 14px for body content, 16px is ideal.
Quality CLI
Wide letter spacing on body text
Letter spacing above 0.05em on body text disrupts natural character groupings and slows reading. Reserve wide tracking for short uppercase labels only.
04 Run it yourself
Inside /impeccable critique
/impeccable critique
The design review command opens the overlay automatically during its browser assessment pass. Deterministic findings highlighted in place while the LLM runs its separate heuristic review.
Standalone CLI
npx impeccable live
Starts a local server that serves the detector script. Inject it into any page via a <script> tag to see the overlay. Works on your own dev server, a staging URL, or anyone's live page.
Easiest
Chrome extension
One-click activation on any tab. Install from Chrome Web Store →