The visible tells of AI design
46 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. 41 rules run deterministically (npx impeccable detect or the browser extension), 4 of them opt-in provider tells behind --gpt / --gemini; 5 need /impeccable critique's LLM review pass.
Every wave of AI-generated UIs converges on a recognizable aesthetic. The detector catches both. The patterns just change.
Hover or tap any outlined element to see which rule fired. Toggle the era to see how the patterns shifted.
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.
The AI color palette: purple-to-blue gradients on everything. Buttons, text, backgrounds, orbs. The new "make it pop."
Glassmorphism, neon glows, blurred orbs, monospace everything. Looks like a hackathon project, not a product.
When in doubt, animate everything. Bouncing buttons, wiggling icons, gradient text, floating badges. Motion without meaning.
A thick colored border on one side of a rounded card. The single most recognizable tell of AI-generated UI.
Cards inside cards inside cards. Five levels of nesting, each with its own padding and shadow.
The same hero-metric-features template repeated with different colors. When every section looks the same, nothing stands out.
One font for everything. Headings, body, labels, buttons. No typographic hierarchy, no personality, no design.
Icon containers larger than the content they introduce. When the decoration is bigger than the message, priorities are backwards.
Gray text on colored backgrounds, low-contrast labels, unreadable combinations. Looking good and being readable should not conflict.
Label, sublabel, helper text, and hint text all saying the same thing in slightly different words. Say it once, say it well.
Complex settings crammed into a modal. If it needs a scroll bar and three columns, it deserves its own page.
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.
Each rule shows how it is detected:
npx impeccable detect on files, no browser required.--gpt or --gemini.7 rules
Thick accent border on a rounded card. The border clashes with the rounded corners. Remove the border or the border-radius.
See in /impeccableBlur effects, glass cards, and glow borders used as decoration rather than to solve a real layering problem.
See in /impeccableThick 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 /impeccableA hairline border paired with a wide, diffuse shadow is a recurring generated-UI signature. Commit to one: a defined edge or a soft elevation, not both at once.
See in /impeccableRepeating-gradient stripes used as surface decoration are a recurring generated-UI signature. Reach for a deliberate texture, or leave the surface plain.
See in /impeccableOver-rounding cards, sections, and inputs (24px and up on a small card) rounds everything into the same soft blob. Cards top out around 12 to 16px; reserve full-pill for tags and buttons.
See in /impeccableHand-coded SVG illustrations of scenes or mascots read as amateur doodles, not whimsy. If you cannot render it with real assets, ship no illustration rather than a sketchy fallback.
See in /impeccable10 rules
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 /impeccableA 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 /impeccableOversized italic serif as the primary hero headline reads as taste in isolation but has become the universal AI-startup landing page hero. Set it roman, or move to a non-serif display face. Editorial registers may legitimately want it; judge by context.
See in /impeccableA tiny uppercase letter-spaced label sitting immediately above an oversized hero headline, or the same shape rendered as a pill chip, is the default AI SaaS hero. Drop the eyebrow, fold the kicker into the headline, or run it as a breadcrumb instead.
See in /impeccableRepeating tiny uppercase tracked labels above section headings turns a brand page into AI editorial scaffolding. Replace them with stronger structure, artifacts, imagery, or a deliberate brand system.
See in /impeccableA full-sentence headline set at display size dominates the viewport, leaving no room for anything else above the fold. A punchy one or two-word headline at that size is fine; the problem is a long headline blown up too large. Set long headlines smaller, or tighten the copy.
See in /impeccableLetter spacing pulled tighter than the point where characters keep their own shapes costs legibility. Tighten display type optically, not destructively.
See in /impeccableInter, Geist, Space Grotesk, and the newest reflex, Instrument Serif, 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 /impeccableOnly 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 /impeccableLong 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 /impeccable5 rules
Purple/violet gradients and cyan-on-dark are the most recognizable tells of AI-generated UIs. Choose a distinctive, intentional palette.
See in /impeccableDark 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 /impeccableGradient text is decorative rather than meaningful. A common AI tell, especially on headings and metrics. Use solid colors for text.
See in /impeccableGray text looks washed out on colored backgrounds. Use a darker shade of the background color instead, or white/near-white for contrast.
See in /impeccableA warm cream or beige page background has become the default "tasteful" AI surface, reached for by reflex. Choose a background that comes from a deliberate palette, not the safe warm off-white.
See in /impeccable8 rules
Big number, small label, three supporting stats, gradient accent. Used everywhere, trusted nowhere.
See in /impeccableSame-sized cards with icon + heading + text repeated endlessly. The default AI homepage layout.
See in /impeccableThe same spacing value used everywhere. No rhythm, no variation. Use tight groupings for related items and generous separations between sections.
See in /impeccableCards inside cards create visual noise and excessive depth. Flatten the hierarchy: use spacing, typography, and dividers instead of nesting containers.
See in /impeccableNumbered display markers as section labels are the AI editorial scaffold one tier deeper than tracked eyebrow chips. Numbers earn their place only when the section actually is a sequence.
See in /impeccableText 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 /impeccableContent renders wider than its container, spilling out or forcing a horizontal scrollbar. Let text wrap, constrain widths, or give the region a deliberate scroll affordance.
See in /impeccableA clipping container (overflow hidden or clip) wrapping an absolutely-positioned child cuts off tooltips, menus, and popovers that need to escape. Let the overflow be visible, or move the positioned layer out of the clip.
See in /impeccable3 rules
Bounce and elastic easing on interface elements (a dialog that springs in, a card that overshoots) feels dated and tacky. Reserve spring physics for things that are actually physical; ease interface motion out smoothly (ease-out-quart/quint/expo).
See in /impeccableAnimating 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 /impeccableScaling or rotating an image on hover is a recurring generated-UI signature. Let imagery sit still, or use a subtler, purposeful interaction.
See in /impeccable4 rules
More than a couple of em-dashes in body copy is an AI cadence tell. Use commas, colons, periods, or parentheses instead.
See in /impeccableGeneric SaaS phrases (streamline, empower, supercharge, world-class, enterprise-grade) are instant AI tells. Pick a specific verb and noun that says what the product literally does.
See in /impeccableSections landing on a short rebuttal or a manufactured-contrast aphorism read as AI cadence, not voice. Once is fine; the repeated pattern is the tell.
See in /impeccableDismissing something as "theater" is a recurring generated-copy tic. Say plainly what the thing does or does not do.
See in /impeccable1 rule
<img> tags with empty src, missing src, or placeholder values ship as broken-image boxes. Use real images, generated assets, or remove the tag.
See in /impeccable8 rules
Text is too close to the edge of its container. Add at least 8px (ideally 12-16px) of padding inside bordered or colored containers.
Body paragraphs render flush against the left or right viewport edge with no container padding. Wrap content in a container with at least 16px of horizontal padding, or apply max-width with mx-auto.
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.
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.
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.
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.
Body text below 12px is hard to read, especially on high-DPI screens. Use at least 14px for body content, 16px is ideal.
Letter spacing above 0.05em on body text disrupts natural character groupings and slows reading. Reserve wide tracking for short uppercase labels only.
Inside /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
'/%3E%3Ccircle%20cx='80'%20cy='20'%20r='10'%20fill='%23f0e6c8'/%3E%3C/svg%3E)
npx impeccable liveStarts 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
One-click activation on any tab. Install from Chrome Web Store →