-
Notifications
You must be signed in to change notification settings - Fork 7
Anti AI slop ban list
The complete catalogue of AI-aesthetic fingerprints — the patterns default models reach for that mark output as machine-made. Every entry has a "do instead" pair.
This is the reference for stripping the generic-AI look from generated and human-assisted design work. The list is organized by category: principles, visual/CSS patterns, typography, layout, content, interaction, components, and the meta-fingerprints that combine the rest. Every pattern is named, every violation is described, every fix is concrete.
Read once to internalize. Reference during generation and review to catch defaults before they ship.
The anti-slop discipline rests on eight principles. Every specific rule below traces back to one of these.
Generic copy, generic names, generic numbers, generic imagery — all signal that the surface was generated without thought. Specific names, real numbers, concrete examples, and contextual details signal craft.
- Don't: "John Doe," "$99.99," "1,234 users," "Lorem ipsum."
- Do: "Maya Tahan," "$847.20," "1,284 partners," real product names, real numbers from real systems.
The AI default is more — more gradients, more glow, more shadow, more motion, more emoji. Restraint is harder to fake and reads as confidence.
- Don't: every card glows, every button has a gradient, every section has a hover effect.
- Do: choose 2-4 effects per page, execute them with precision, leave the rest plain.
Centered hero. Three equal cards. Symmetric grid. These are the visual defaults. Asymmetric layouts, varied card sizes, and bento-style grids signal intentional composition.
- Don't: 3-equal-column grids.
- Do: 60/40 splits, bento grids, varied card heights, intentional negative space.
Magazine layouts, considered typography, wide line lengths sometimes, narrow line lengths sometimes, deliberate hierarchy — these read as designed by a human with taste. Decorative gradients, stock-photo backgrounds, and centered-everything reads as generated.
- Don't: hero with a gradient background and centered Title Case text.
- Do: editorial column rhythm, intentional typographic scale, varied alignment for varied content.
A product page that shows the product in context (a hand holding it, a person using it, the product on a shelf) beats a product on a plain white background. Real screenshots beat mocked-up generic UI in marketing imagery.
- Don't: floating product on gradient.
- Do: product in environment, in use, with real context.
Customer testimonials should name real customers. Case studies should name real companies. Numbers should be real numbers, not round ones.
- Don't: "Sarah J., CEO" / "1,000+ happy customers" / "Trusted by leading brands."
- Do: "Layla Khoury, Bashiti Hardware" / "1,284 partners across 14 cities" / "Bashiti, Carrefour, Watermelon."
The AI default for motion is "fade in from below at 600ms with 100ms stagger." Restraint, intentional motion, and motion that serves meaning (not just decoration) read as designed.
- Don't: fade-up-on-scroll on every element.
- Do: one or two motion patterns chosen deliberately, eased properly, with calm timing.
Marketing copy generated by AI tends toward bland politeness. "We are excited to..." "We are thrilled..." "Our innovative platform..." The voice has no edge, no perspective, no specificity.
- Don't: "Empower your team with our innovative platform."
- Do: "Loyalty for cafes. Points, tiers, vouchers. No app required."
| Pattern | Don't | Do |
|---|---|---|
| Default gradient backgrounds |
linear-gradient(135deg, #667eea 0%, #764ba2 100%) — the "AI default purple gradient." |
Solid colors. Subtle two-tone gradients tied to brand. Image-based heroes. |
| Glow on everything |
box-shadow: 0 0 80px rgba(120, 80, 200, 0.6) on every card. |
Glow used sparingly for emphasis. Never as default treatment. |
| Heavy drop shadows on flat cards |
box-shadow: 0 20px 60px rgba(0,0,0,0.3) on cards that don't actually float. |
Tasteful elevation (0 1px 3px rgba(0,0,0,0.1)) or no shadow at all on flush cards. |
| Rainbow gradient text | Gradient text on headlines as default treatment. | Single-color headlines. Reserve gradient for one specific element per page. |
| Glassmorphism overload |
backdrop-filter: blur(20px); background: rgba(255,255,255,0.1) on every panel. |
One glass element per page maximum. Used where translucency serves meaning. |
| Neon glow text |
text-shadow: 0 0 20px #00ffff on body text. |
No glow on body. Reserve for one accent element. |
| Identical border radius everywhere |
border-radius: 12px on every element regardless of context. |
Varied radii — pills (9999px), cards (8-16px), inputs (4-6px), modals (16-24px). |
| Same-direction gradients | Every gradient at 135deg. | Vary direction by element role, or use solid colors. |
| CSS-only "depth" tricks | Skeuomorphic shadow trying to fake 3D on flat elements. | Either commit to depth (true 3D) or stay flat. |
| Animated rainbow borders | Conic gradients rotating on card borders. | Static borders. One animated element per page maximum. |
| Glow rings under floating elements | Decorative glow rings beneath floating action buttons. | Tasteful shadow, no decorative ring. |
| Bright accent on light background with low contrast | Pastel mint accent on white. | Accent colors that meet WCAG AA (4.5:1) for body text use. |
| Pattern | Don't | Do |
|---|---|---|
| Inter as default display font | Inter used for both body and display, as it is in every generated landing page. | Pair body (Inter, IBM Plex Sans, system) with a distinctive display font (a serif like Fraunces or Source Serif, a geometric like Space Grotesk, an editorial sans like General Sans). |
| Bold serif everywhere | Heavy serif for every headline, mid-2020s revival default. | Use serif where it serves the editorial tone; mix with sans for hierarchy. Don't default to it. |
| Title Case for everything | "Get Started Today For Free." | Sentence case for most copy: "Get started today for free." Title Case for proper nouns and titles only. |
| All-caps body text |
text-transform: uppercase on paragraphs. |
All-caps only for short labels, badges, eyebrow text. Never body. |
| Loose letter-spacing on body |
letter-spacing: 0.1em on running text. |
Default letter-spacing on body. Tight on display. Loose only on all-caps labels. |
| Center alignment for everything | Hero centered, body centered, headings centered. | Vary alignment by purpose. Left-align body. Center only for short pull quotes or single-line headlines. |
| Uniform font weights | Everything at 400 or 500. | Use weight as hierarchy: 700 for h1, 600 for h2, 500 for h3, 400 for body. |
| 6-line wraps on display text | Hero headlines that wrap to 5-6 lines. | Display copy under 4 lines. Cut, rewrite, or shorten until it fits. |
| Variable fonts at decorative settings | Fonts at font-variation-settings: 'wght' 900, 'wdth' 200, 'opsz' 144. |
Use variable fonts at conservative settings unless explicitly demonstrating the variation as a design feature. |
| Slab serif as "tech" signal | Slab serif headlines on every developer landing page. | Choose typography based on tone, not category convention. |
| Display font under 24px | Display fonts at body sizes. | Display fonts ≥32px. Display fonts at small sizes lose their character. |
| Headlines that read like AI prompts | "Reimagine What's Possible With Our Platform" | Specific headlines: "Loyalty for cafes — points, tiers, vouchers, no app required" |
| Pattern | Don't | Do |
|---|---|---|
| 3 equal cards in a row | Three identical cards, same height, same content shape. | Asymmetric: one large card + two small cards. Or bento grid with varied sizes. |
| Centered hero with everything stacked | Logo centered, headline centered, subhead centered, button centered. | Left-aligned editorial hero with asymmetric image. Or 60/40 split. |
h-screen on mobile |
Hero taking full viewport on mobile, hiding all content below the fold. | Cap mobile hero at 70-80vh, ensuring content peeks below. |
| Decorative full-bleed images that contain no information | Hero background image of "abstract tech mesh" that's just decoration. | Hero image is a screenshot, a real product photo, or carries meaning. |
| Default 12-column grid for content | Everything snapped to a 12-col grid with equal columns. | Vary column widths — 7+5, 8+4, 9+3 — based on content needs. |
| Symmetric padding everywhere | Uniform 80px section padding on every section. | Vary section padding by section weight. Hero might be 120px; secondary content 60px. |
| Cards with equal heights and no shape variation | Every card is 320px tall, rectangular, identical proportions. | Vary card proportions: some tall (portrait), some wide (landscape), some square. |
| Identical cards in a 4x4 grid | A 16-cell grid of identical cards. | Bento: vary cell spans (2x1, 1x2, 1x1, 2x2). |
| Footer columns with equal weight | Four identical 200px-wide footer columns. | Asymmetric footer: brand block wider, link columns narrower. |
| Floating element library | "Decorative" floating shapes scattered around hero. | Either embed shapes meaningfully or remove them. |
| Hero CTA pair that's identical visual weight | Two buttons in the hero of equal visual weight, one labeled "Get Started" and one "Learn More." | One primary CTA visually dominant; one secondary CTA as text link or outlined button. |
| All sections separated by identical horizontal lines |
<hr> between every section as the only divider. |
Vary section transitions: background color, image, motion, layout shift. |
| Pattern | Don't | Do |
|---|---|---|
| Jane Doe / John Doe in testimonials | "Jane Doe, CEO" testimonials. | Named real customers: "Layla Khoury, Bashiti Hardware." |
| Lorem ipsum visible in shipped designs | Lorem ipsum left in production code. | Real copy. If you don't have real copy, write placeholders that read as real ("Pizza at the corner, walking distance from..."). |
| Generic placeholder image | Unsplash "person in coffee shop" stock photo as hero. | Real photos: product, team, customer in context. If stock is unavoidable, choose specific, contextual stock that matches the product. |
| Round numbers everywhere | "10,000+ users." "5-star reviews." "100% satisfaction." | Specific numbers: "8,432 partners." "4.7 average rating across 2,103 reviews." "97% renewal rate." |
| Fake brand names | "TechCorp," "Acme Inc." in case studies. | Real brand names. If anonymous, use industry markers ("a global retailer with 80 locations"). |
| Filler verbs | "Empower," "leverage," "unlock," "enable," "transform." | Verbs of action: "Send," "build," "ship," "track," "add." |
| Generic mission statements | "Our mission is to revolutionize the industry through innovative solutions." | Specific perspective: "We believe loyalty programs should reward what people actually do, not what they spend." |
| Centered slogans with no context | "Reimagine the Future" with no follow-up. | Slogans that explain themselves: "Beyond likes. Beyond clicks. The internet of what people actually do." |
| Stock testimonial language | "This product changed our business!" — no specifics. | Specific stories: "We hit 1,200 redemptions in month one. That's twice what we forecast." |
| Numbered lists with no order significance | A list of 6 features numbered 1-6 with no actual ordering. | Use bullets when no order. Use numbers only when order matters. |
| Throat-clearing introductions | "Welcome to our platform. We are excited to have you here. Our team is dedicated to..." | Start with the value statement. Cut the welcome. |
| Emoji as decoration | Section headings prefixed with sparkles, fire, rocket. | No emoji. SVG icons or no icon. |
| Pattern | Don't | Do |
|---|---|---|
| Missing states | Button with no hover, focus, or active state. | All four states designed: rest, hover, focus, active, disabled. |
| Decorative motion | Elements fading in on scroll for no reason. | Motion serves meaning: state change, transition, attention. |
| Animating width/height in CSS | Animating layout dimensions, causing reflow on every frame. | Animate transform and opacity only. They run on the GPU. |
| Hover-only interactivity on touch devices | Tooltip that appears only on hover, on a touch-only surface. | All interactivity works without hover. Tooltips paired with focus or tap state. |
| Fade-up-on-scroll on every element | Every section, every card, every paragraph fades up when scrolled into view. | Choose one or two elements to highlight. Static content stays static. |
| Long animations on routine actions | 600ms animation for a button press. | Routine actions: 100-150ms. Significant transitions: 200-300ms. Long animations only for storytelling moments. |
| Linear easing | Animations on ease or linear. |
Use cubic-bezier curves with character: cubic-bezier(0.4, 0, 0.2, 1) for material, cubic-bezier(0.34, 1.56, 0.64, 1) for bouncy. |
| Parallax on every section | Hero parallax, then section parallax, then card parallax, then text parallax. | One parallax effect per page maximum. |
| Continuously animating elements | Spinning rings, pulsing dots, bouncing arrows that never stop. | Animated elements indicate state. If nothing's changing, motion stops. |
| Auto-playing video with sound | Video that auto-plays with audio on page load. | Auto-play silent only. Sound requires user gesture. |
| No skeleton states | Loading spinner that hangs while content loads. | Skeleton screens that match the shape of incoming content. |
| Floating action buttons that block content | FAB positioned in front of scrollable text. | FAB positioned to clear content, or dismissible on scroll. |
| Pattern | Don't | Do |
|---|---|---|
| Generic card overuse | Everything wrapped in a card with shadow and border-radius. | Use cards where they signify a grouping. Flat layouts where they don't. |
| Emoji icons in UI | Emoji used as functional icons (envelope emoji for email field). | SVG icons (Lucide, Feather, Phosphor) at consistent stroke weight. |
| Mixed icon styles | Some line icons, some filled icons, some emoji, some custom illustrations — all in one product. | Single icon library, single style (line or filled), single stroke weight. |
| Inconsistent button styles | Three different primary button styles across the product. | One primary, one secondary, one tertiary. Same treatment everywhere. |
| Inconsistent form input styles | Some inputs with borders, some with underlines, some with backgrounds. | One input style throughout the product. |
| Decorative dividers between every element |
<hr> between every paragraph. |
Whitespace as divider. Lines reserved for major structural breaks. |
| Filled illustrations alongside line icons | Marketing surfaces with cartoon-style illustrations, product UI with line icons — clashing styles. | Pick one illustration system or none. Don't mix systems. |
| Default avatars from initials with no styling | Initials in a circle with no thought to background color, font, or pairing. | Initials with a brand-derived background color, consistent font, sized to fit the surrounding scale. |
| Stock chart components | Default chart library output with library default colors and styling. | Charts styled to brand: colors, fonts, spacing all match. |
| Generic notification toasts | Default toast position, default colors, default timing. | Custom toast with brand styling, semantic colors, appropriate timing. |
| Default modal styling | Modal at default browser styling, no thought to padding or scale. | Modals: 600-800px wide, 32-48px padding, brand styling, close affordance clear. |
| Default loader spinners | Generic spinning circle from a CSS library. | Brand-tied loader: branded glyph rotating, skeleton screens, progress bars. |
Before shipping any design — generated or human-built — run this checklist. Severity tags: [BLOCKER] = ship-blocking, [MAJOR] = needs fix this sprint, [MINOR] = nice to fix.
Visual
- [BLOCKER] No default purple gradient backgrounds
- [BLOCKER] No emoji in functional UI
- [BLOCKER] No "John Doe" / "Lorem ipsum" placeholders shipped
- [MAJOR] No three-equal-cards layouts
- [MAJOR] No centered-everything hero composition
- [MAJOR] No
h-screenon mobile heroes - [MAJOR] No glow on every card; reserved for accents
- [MAJOR] No Title Case in marketing body copy
- [MINOR] No
border-radius: 12pxapplied uniformly - [MINOR] No identical card heights in grids
Typography
- [BLOCKER] No headlines that wrap to 5+ lines
- [BLOCKER] No display font under 24px
- [MAJOR] No Inter as both body AND display
- [MAJOR] No all-caps body text
- [MAJOR] No
letter-spacingon running body - [MINOR] No uniform font weights across hierarchy
Content
- [BLOCKER] No round-number stats ("10,000+ users")
- [BLOCKER] No fake brand names in case studies
- [BLOCKER] No emoji in headlines or body
- [MAJOR] No filler verbs ("empower," "leverage")
- [MAJOR] No generic mission-statement copy
- [MINOR] No throat-clearing introductions
Interaction
- [BLOCKER] No missing focus states
- [BLOCKER] No hover-only interactivity on touch
- [BLOCKER] No animation of width/height (use transform/opacity)
- [MAJOR] No fade-up-on-scroll on every element
- [MAJOR] No 600ms animations on routine actions
- [MAJOR] No linear easing
- [MINOR] No multiple parallax effects on one page
Components
- [BLOCKER] No mixed icon styles (line + filled + emoji)
- [BLOCKER] No three different primary button styles
- [MAJOR] No generic card overuse
- [MAJOR] No default chart library styling
- [MINOR] No default modal styling
Motion
- [MAJOR] No continuously animating elements with no state purpose
- [MAJOR] No auto-playing video with sound
- [MINOR] No decorative motion that doesn't serve meaning
Performance
- [BLOCKER] No CLS from late-loading fonts (use
font-display: swapproperly) - [MAJOR] No layout-shifting motion
- [MAJOR] No skeleton-less loading
Run the checklist before every PR review. Fix every [BLOCKER]. Schedule [MAJOR] for the sprint. Note [MINOR] for the backlog.
Individual patterns are signals; combinations are smoking guns. These are the meta-fingerprints — when you see two or three of these in combination on one surface, the surface is AI-generated and was shipped without review.
The most common AI default. Hero: purple-to-blue gradient background. Headline in Inter, centered. Three equal cards below in a row. This is the dead giveaway — and the fastest fingerprint to scrub.
Fix: Replace the gradient with a solid color or branded image. Switch the display font. Move to a 60/40 split or bento layout. Vary the card sizes.
Every card has a glow. Every button has a glow. The background has ambient glow. The text has a subtle glow. Excessive glow is the AI default for "premium."
Fix: Pick one element to glow. Strip the glow from everything else. Use elevation through shadow, not glow.
Every headline, subhead, and button label in Title Case. This is the writing AI default, particularly in marketing copy.
Fix: Sentence case for everything except proper nouns and titles. "Get started" not "Get Started." "Learn more" not "Learn More."
Generic value-prop copy stacked: "Empower your team. Leverage your data. Unlock your potential." This is the language LLMs reach for when they don't know what the product does.
Fix: Replace generic verbs with concrete actions specific to the product. "Send. Track. Iterate." for a marketing tool. "Add. Award. Redeem." for a loyalty product.
A stock photo of a smiling person in a coffee shop next to a testimonial from "Sarah J., CEO of TechCorp." The placeholder content was never replaced.
Fix: Real photos and real testimonials, or no photos and no testimonials. Half-real and half-placeholder reads worse than fully placeholder.
Every element fades up on scroll. The hero has parallax. Decorative shapes float in the background. The product feels busy without communicating anything.
Fix: Pick one motion pattern. Use it once or twice per page. Strip the rest.
"10,000+ happy customers" + "Our mission is to revolutionize the industry through innovative solutions." Both round numbers and generic mission copy signal placeholder content not replaced.
Fix: Real numbers + specific perspective.
Buttons in one style, inputs in another, cards in a third. Mixed icon libraries. Different border radii on different components. The product has no design system, or has one that wasn't followed.
Fix: Audit every component. Standardize. The product needs consistency before it needs character.
Run the pre-flight checklist on every PR that touches design surfaces. Don't merge with [BLOCKER]s. Track [MAJOR]s as bugs.
For visual reviews: pull up the screen and the checklist side by side. Mark each item. If three or more meta-fingerprints are present, send the PR back with a note pointing to the relevant section of this document.
When prompting models to generate UI, include explicit anti-slop guidance in the system prompt. Don't rely on the model to remember. Surface the specific patterns to avoid for the task at hand.
When evaluating generated output, run the checklist before accepting. The first three or four iterations will violate multiple rules; explicit feedback against the rules tightens output.
The anti-slop list is a living document. As models update and defaults shift, the fingerprints change. Update this list quarterly. Add new patterns as they emerge. Retire patterns that no longer signal AI-generation.
Anyone working on the product reads this list. Designers, engineers, PMs. When something ships that violates a [BLOCKER], the review process needs to be tightened.
- The 30 Laws of UX
- Don Normans design principles applied
- Krug 3 Laws of Usability with examples
- The creative arsenal pattern library
Repository: github.com/Laith0003/ux-skill | Maintainer: linkedin.com/in/laithaljunaidy