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 /impeccable38 rules
Anti-patterns
The full catalog of patterns /impeccable teaches against. 25 are caught by a deterministic detector (npx impeccable detect or the browser extension). 13 can only be flagged by /critique's LLM review pass. Want to see them live on real pages? Try Visual Mode.
How to read this
AI slop rules flag the visible tells of AI-generated UIs. Quality rules flag general design mistakes that are not AI-specific but still hurt the work. Each rule also 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 /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
7 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, Open Sans, Lato, Montserrat, and Arial are used on millions of sites. Choose a distinctive font 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
AI slop
LLM only
Syne as display font
Syne is the most overused "distinctive" display font and reads as an instant AI design tell. Pick something else.
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.