66 patterns that expose AI defaults and production defects. Watch the overlay, try it on 11 synthetic specimens, or browse the catalog. The detector now covers 61 rules across source and rendered pages, all enabled by default. Five broader judgments remain in /impeccable critique.
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.With a DESIGN.md in your project, Impeccable catches visual choices that drift from your own fonts, colors, type scale, and corner radii. See how personalized detection works.
4 rules
A font falls outside the documented type system. Use an approved face or update DESIGN.md.
Inspect the detectorA literal color falls outside the documented palette. Use a token or make the addition intentional.
Inspect the detectorA corner radius falls outside the documented shape scale. Use a token or update the system.
Inspect the detectorA font size falls between documented type steps. Use the scale or add a deliberate new step.
Inspect the detector8 rules
A decorative grid covers a surface without supporting a canvas, map, or measurement task. Use product structure or a plain field.
See in /impeccableThick 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 /impeccable11 rules
A tracked uppercase label above a heading borrows editorial authority it has not earned. Delete it, or work the words into the heading.
See in /impeccableFunctional text under 11px fails on small and high-density screens. Keep links, labels, and table cells at a readable size.
Inspect the detectorFont 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 /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 /impeccable7 rules
A saturated radial glow on a dark page is a familiar generated-UI shortcut. Use a deliberate surface instead.
See in /impeccableA faint accent haze sits behind a section as a spotlight. Light the composition with real material, or let the surface stand on its own.
See in /impeccablePurple/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 /impeccable12 rules
Tiny numbers repeated beside headings imitate editorial structure without adding it. Let hierarchy and rhythm sequence the page.
See in /impeccableScroller cards lose one edge because the panel has no matching inset. Keep both gutters consistent.
Inspect the detectorAn opaque layer covers readable text. Move the layer or give the text clear space.
See in /impeccableOne opening column runs far past its neighbor, leaving dead space. Balance the columns or continue below the row.
See in /impeccableA heading sits closer to the previous block than its own content. Give it more space above than below.
See in /impeccableBig 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 /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 /impeccable6 rules
A decorative pulse makes static status look live. Animate only when the data is changing.
See in /impeccableA fake caret makes non-editable hero copy look like a terminal. Let real inputs own the cursor.
See in /impeccableContinuous auto-scroll demands attention and hides content. Let people read at their own pace.
See in /impeccableBounce 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 /impeccable5 rules
The same label appears in several slots of one card. Keep it once, where it matters.
Inspect the detectorMore 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 /impeccable4 rules
Hero art assembled from generic SVG shapes reads like placeholder clip art. Use real illustration, photography, or a purposeful graphic.
See in /impeccableA many-point clip-path imitates a torn or organic edge with brittle CSS. Use a real cut-out asset, or keep the mask geometric.
See in /impeccableA near-opaque wash makes the shipped photo or texture invisible. Let the material reach the screen, or remove the asset.
See in /impeccable<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 /impeccable10 rules
An uncaught load error can break interactions and hide content. Fix it before judging the interface.
Inspect the detectorText 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 detectRuns the deterministic detector from the terminal on files, directories, stdin, or rendered URLs. Use it for CI and local checks without opening an AI harness.
Easiest
One-click activation on any tab. Install from Chrome Web Store →