Skip to content

ANTISLOP.md

Latest commit

 

History

History
487 lines (354 loc) · 26.2 KB

ANTISLOP.md

File metadata and controls

487 lines (354 loc) · 26.2 KB
Raw

Anti AI Slop: Design & Copy Rules

Follow these rules whenever generating or building UI for a website, web app, or any interface. The goal: the design should feel crafted by a designer, not generated by AI.

What This Is (and What It Isn't)

ANTISLOP.md is a filter, not a style guide. It stops AI coding agents from producing generic, recognizable "AI slop" UI.

  • This document does not impose an aesthetic: no prescribed colors, fonts, layouts, or "house style".
  • Design preferences, brand direction, and visual taste are yours.
  • This document does two things only:
    1. Lists generic AI patterns to avoid.
    2. Holds the result to a craftsmanship bar: intentional, functional, complete, evidence-based.

Core Principle

Every visual decision must have a clear reason, improve the user experience, and build a unique product identity.

The question to answer before calling anything done:

If the logo and product name were swapped out, would this design still feel unique and have its own character?

If the answer is no, the design is too generic. Start over.

A design is done only when all three are true:

  1. It avoids the slop patterns in this document.
  2. It has its own identity and character.
  3. It actually works (see The Craftsmanship Standard).

The Craftsmanship Standard

"Not slop" is the floor, not the goal. A design passes when it meets five preference-agnostic criteria. Use these as questions, not recipes.

C-1 — Intentionality

Every visual and copy decision has a reason you can articulate. If the only reason is "it's the AI default", that is a red flag: revisit the decision.

C-2 — Functional Completeness

Every interactive element works, or it does not exist. A button that cannot do anything is a defect, not decoration.

C-3 — Content-Driven Composition

Every section exists because the product's content needs it, not because every AI landing page has one. Remove sections that only fill a template.

C-4 — Resilience

The UI holds up in every state (empty, loading, error), every theme you ship, every breakpoint, and keyboard-only use.

C-5 — Evidence Over Claims

Anything presented as fact (testimonials, statistics, security claims) is real and verifiable, or it is not shown at all.

Part 1: AI Slop Patterns (Recognize & Avoid)

These are the most common patterns found in AI-generated designs. Use as a reference. The more of these appear together, the more likely the design is AI slop. There is no fixed threshold; context and the reasoning behind each choice is what matters.

Visual & Color

Pattern Telltale Signs
Generic Blue-Purple Gradient Blue to Purple, Blue to Cyan, Purple to Pink, full-page colored glow background
Excessive Glassmorphism Blur on navbar, cards, modals, sidebar all at once
Excessive Border Radius Every element is pill-shaped: buttons, inputs, cards, badges, modals
Overly Soft Shadows Every component has a large shadow, the whole page feels like it's floating
Glow Everywhere Glow on cards, buttons, icons, badges, backgrounds, and borders all at once
Background Grid Grid squares, blueprint lines, graph paper, thin horizontal/vertical lines
Too Much Decoration / Trend-Stacking Blob, mesh gradient, glow, noise, pattern, grid with no purpose, especially when multiple trends are stacked (e.g. Glassmorphism + Mesh Gradient + Glow + Monospace + Grid + Rounded UI)
Dark Mode Default for No Reason Entire page is dark just because it looks "tech", with no branding consideration
Too Many Colors in Palette Using 5-7 different colors on one page without a clear design system
Excessive Accent Color One accent color on buttons, icons, badges, links, lines, backgrounds, and glows

Layout & Components

Pattern Telltale Signs
Monotonous Layout Hero, Subtitle, 2 CTAs, Screenshot, Feature Grid, Testimonials, FAQ, CTA, Footer
Copy-Paste Feature Cards Identical size, height, icon, layout, and padding across all cards
Uniform Spacing Padding, margin, and element gaps are identical across every section
Broken Mobile Horizontal overflow, cards clipping off-screen, broken navbar, colliding text
Template Animations Every element uses Fade Up, Fade In, Floating, Scale, Bounce
"How It Works" Always 3 Steps Round icon + number 1, 2, 3 + short text, always three steps, always the same
"Trusted By" Logo Bar Row of generic company logos placed directly below the hero
"Most Popular" Pricing Card Middle tier always highlighted with a capsule badge
4-Column Template Footer Product / Company / Resources / Legal columns with no variation

Copywriting & Content

Pattern Telltale Signs
Em Dash (—) "Fast, secure — and built for developers."
Generic CTAs Get Started, Learn More, Try Now, Explore, Discover
AI Marketing Buzzwords AI Powered, Revolutionary, Next Generation, Seamless, Cutting Edge
Fake Statistics 10K+ Users, 99.9% Uptime, 500M Requests, 120+ Countries
Fake Testimonials AI avatars, random names, random job titles, fictional reviews
Fabricated Trust Claims "SOC 2 compliant", "ISO 27001", "Enterprise-grade security", "300% faster" for a product with no such evidence

Decorative Elements

Pattern Telltale Signs
Generic AI Icons Sparkle, Star, Magic, Lightning, Diamond, Cube, Robot, AI Orb
Small Arrows (→ / ↗) Placed on almost every button as pure decoration
AI Capsule Badges Pill shape, thin border, glow, small dot, uppercase, containing: "AI Powered", "Beta", "New"
Generic AI Typography Large monospace headings, HOW IT WORKS uppercase with wide tracking
Typeface Chosen Without Reason Font picked because it's the AI default, not because it fits brand character. Popular fonts like Inter are still valid if there's a reason
Generic Illustrations Undraw, Storyset, or 3D blob characters with no real connection to the product

Functionality & Content

Pattern Telltale Signs
Non-Functional Interactive Elements Buttons do nothing, dropdowns won't open, forms can't be submitted. AI builds the visuals but forgets the logic
Happy Path Only Design No empty state, loading state, or error state. UI looks perfect in screenshots but isn't ready for real use
Irrelevant FAQ FAQ contains generic template questions ("Is my data secure?", "Can I cancel anytime?") with no real relevance to the product
Assumed Logo & Profile Photos Creating app logos, avatars, or profile photos without explicit instructions, generated purely on assumption
Navbar Links to Nowhere Navbar contains links to pages (Features, Contact, About, etc.) that have no actual section or page
File/CSS Patching via Script A feature (e.g. dark mode) added by an external script that rewrites source or CSS with string replacement. Signs: a .py/.js helper doing str.replace on .css files, "patch" scripts left in the repo

Identity & Originality

Pattern Telltale Signs
No Visual Identity Swap the logo and the design still feels the same; could belong to any product
Clone of Popular Products Overall visual that mimics Linear, Vercel, Stripe, Notion, or other popular products without being asked

Accessibility

Pattern Telltale Signs
Poor Color Contrast Grey text on grey background, white text on a gradient that's light in some areas. Looks fine visually but fails WCAG
Not Keyboard Navigable UI can only be used with a mouse. Interactive elements can't be reached with Tab, no visible focus state

Part 2: Mandatory Rules

R-01 — Color & Gradients

  • FORBIDDEN: blue-to-purple, blue-to-cyan, purple-to-pink gradients as primary colors
  • FORBIDDEN: colored glow backgrounds as a default
  • FORBIDDEN: neon blue buttons without a branding reason
  • Gradients are allowed if they are genuinely part of an established brand identity, not used as the default choice

R-02 — Copywriting

  • FORBIDDEN: em dash character (—) in any text
  • Use comma (,), period (.), colon (:), or parentheses () instead
  • Text must feel natural and human

R-03 — Mobile Responsiveness

  • REQUIRED: mobile layout must be perfect, not an afterthought
  • No horizontal overflow
  • Text does not escape its container
  • Cards do not collide or clip off-screen
  • Navbar remains comfortable to use
  • Button sizes meet the minimum tap target (44px)
  • Spacing stays consistent across all breakpoints
  • Responsiveness is part of the design, not an add-on.

R-04 — Icons

  • FORBIDDEN: Sparkle, Star, Magic, Lightning, Diamond, Orb, Robot as feature icons
  • Icons must be genuinely relevant to the content they represent
  • If no appropriate icon exists, it is better to use none

R-05 — Layout & Page Structure

  • FORBIDDEN: AI template layouts (Hero + 3 cards, Hero + 6 features, Hero + fake stats, etc.)
  • FORBIDDEN: "How It Works" always in 3 steps with round icons and numbers
  • FORBIDDEN: generic "Trusted By" logo bar directly below the hero
  • FORBIDDEN: 4-column template footer with Product / Company / Resources / Legal and no variation
  • Every page must have a structure built around actual content needs
  • Section order must follow the product's narrative flow, not the AI default order (see Craftsmanship Standard C-3)

R-06 — Typography

  • FORBIDDEN: large monospace fonts used purely for "terminal" aesthetics
  • FORBIDDEN: uppercase labels with extreme letter-spacing (HOW IT WORKS, FEATURES) without a design reason
  • Choose typeface based on brand character, not because it's the AI model's default pick
  • Typography must improve readability and reflect the product's character

R-07 — Background

  • FORBIDDEN: grid squares, blueprint lines, graph paper as a default background
  • Use texture or pattern only if it genuinely supports the product's specific visual identity

R-08 — Button Arrows

  • Arrows (→, ↗) are not the default identity for every button
  • If used, ensure the size is proportional and serves a clear visual purpose
  • Not every CTA needs an arrow

R-09 — Badges

  • FORBIDDEN: capsule badges containing "AI Powered", "Beta", "New", "Secure", "Fast" without context
  • Badges may only be used if functionally needed
  • Avoid combining: capsule + thin border + glow + small dot + uppercase all at once

R-10 — Glassmorphism

  • Glassmorphism is an accent only, not the character of the entire UI
  • FORBIDDEN: blur/backdrop-filter on navbar, cards, modals, and sidebar simultaneously
  • Apply the glass treatment to a maximum of 1-2 elements

R-11 — Border Radius

  • Use border radius that is consistent with the defined design system
  • FORBIDDEN: making every element pill-shaped (pill buttons, pill cards, pill inputs, pill badges)
  • Radius variation is a visual hierarchy tool; use it deliberately

R-12 — Shadow

  • Shadow must support visual hierarchy, not make every element float
  • Use shadow selectively, not as a default for every component
  • Think of shadow as an elevation marker, not decoration

R-13 — Glow

  • Glow may only be used as a focus accent on a maximum of 1-2 important elements
  • FORBIDDEN: glow on card + button + badge + icon + background + border simultaneously

R-14 — Feature Cards

  • FORBIDDEN: all cards having identical size, icon, padding, and layout
  • Create visual variation that reflects content hierarchy
  • Not every feature needs to be presented as a card

R-15 — CTA (Call to Action)

  • FORBIDDEN: "Get Started", "Learn More", "Try Now", "Explore", "Discover" as default CTAs
  • CTAs must be specific to the product context and the intended action
  • Better examples: "Start Your Free Trial", "Watch Live Demo", "Create Free Account"

R-16 — Copywriting & Buzzwords

  • FORBIDDEN: "AI Powered", "Next Generation", "Revolutionary", "Seamless", "Cutting Edge", "Intelligent", "Ultimate", "Powerful", "Effortless"
  • Use specific language that explains real benefits
  • Show evidence, not claims

R-17 — Data & Numbers

  • FORBIDDEN: numbers and statistics without a real source
  • If real data is not available, display no numbers at all
  • Empty is better than deceptive

R-18 — Testimonials

  • FORBIDDEN: AI avatars, random names, random job titles, fictional reviews
  • If you have no real testimonials, do not create a testimonials section
  • Use social proof that can be verified

R-19 — Animations

  • Animations must have a clear UX purpose
  • FORBIDDEN: every element using Fade Up + Floating + Scale + Bounce simultaneously
  • Excessive animation is a distraction, not added value
  • Use animation to guide attention, not just to fill the page

R-20 — Visual Identity

  • The design must have a strong identity: a specific palette, a typeface chosen for a reason, a unique composition
  • Every section must have a clear hierarchy
  • Layout is built around the actual product content needs
  • Identity comes from deliberate, explained choices, not from adding decoration (see Craftsmanship Standard C-1)

R-21 — Dark Mode

  • Choose a theme based on brand identity, product type, and target users
  • Developer tools, terminals, and creative tools have strong, legitimate reasons for a dark default. Use that reason, not "dark looks tech"
  • If the product has no strong reason for a fixed theme, build a working light/dark toggle. "Give the user a choice" means build the toggle, not defer the work
  • FORBIDDEN: using this rule (or any rule) as an excuse to skip or defer requested work. If the product should support dark mode, implement it now
  • A theme toggle you ship must work correctly in BOTH modes. A dark mode that breaks the light mode is a defect (see R-34)

R-22 — Illustrations

  • FORBIDDEN: Undraw, Storyset, or generic 3D blob character illustrations
  • Illustrations must have a direct connection to the product or content being presented
  • If no appropriate and original illustration exists, use real screenshots or no illustration at all

R-23 — Clarification & Visual Assets

  • REQUIRED: before creating any asset without explicit instructions, ask or use a clear placeholder
  • If there is an opportunity to ask, confirm the following first:
    • App logo or icon (shape, color, concept)
    • Avatars, profile photos, or images representing people/team
    • Statistics and numbers to be displayed
    • Names, job titles, or identities in testimonials
    • Navigation structure and desired page layout
  • If asking is not possible (rapid prototyping, limited context): use clear placeholders and do not disguise them as final
    • Logo: product name as text in an appropriate typeface, or the marker [LOGO]
    • Profile photo: initial-based avatar or a simple geometric placeholder
    • Statistics: not displayed, or marked [REAL DATA]
  • Never generate assets as if they are the final version without confirmation
  • If explicit instructions already exist, generate directly without asking again

R-24 — Navigation

  • FORBIDDEN: placing links in the navbar for pages or sections that do not exist in the design
  • Every navigation item must have a real, accessible destination
  • If a feature has not been built yet, do not include it in the navbar, or clearly label it as coming soon
  • The navbar must reflect the structure of content that actually exists

R-25 — Color Contrast

  • REQUIRED: all text must meet the minimum WCAG AA contrast standard
    • Normal text: minimum contrast ratio of 4.5:1
    • Large text (18px+): minimum contrast ratio of 3:1
  • FORBIDDEN: light grey text on a grey background
  • FORBIDDEN: white text on a gradient that is light in some areas
  • Always test contrast across the entire area the text passes over, not just at a single point

R-26 — Interactive Elements

Every interactive element must have a real behavior, or be removed:

  • A link or button that scrolls to an existing section (real href="#...")
  • A modal or dialog that opens and closes (closable with Escape)
  • A state toggle (mobile menu, theme, accordion, tabs)
  • An external action (mailto:, a real product URL)
  • A form that submits and shows feedback

FORBIDDEN: buttons and links that do nothing FORBIDDEN: nav items pointing to sections that do not exist (see R-24)

If an element genuinely cannot have a destination yet, remove it instead of shipping a dead control. A placeholder is acceptable only with a clear // TODO comment in code AND a visible label to the user (e.g. "Coming soon"). See "Functional Patterns" below.

R-27 — UI States

  • REQUIRED: every UI that displays data must have at least three states:
    • Empty state: the view when there is no data yet
    • Loading state: an indicator while data is being fetched
    • Error state: the view when something goes wrong
  • A UI designed only for the ideal condition is not ready for real use
  • These states are not bonuses; they are part of a complete design

R-28 — FAQ

  • FORBIDDEN: FAQ containing template questions that are not specific to the product
  • Every question in the FAQ must address a real concern of that product's users
  • If you do not know what questions are actually asked, do not create an FAQ section
  • A generic FAQ does more damage to trust than having no FAQ at all

R-29 — Color Palette

  • REQUIRED: limit the active palette to a maximum of 2-3 core colors + 1 accent color
  • FORBIDDEN: using 5+ different colors on one page without a clear design system
  • Neutral colors (white, black, grey) do not count as part of the core palette
  • Palette consistency is the foundation of a strong visual identity

R-30 — Do Not Clone Popular Products

  • FORBIDDEN: building a visual that overall mimics another product without being asked
    • "Make it look like Linear" (unless the user explicitly asks for it)
    • "Make it look like Vercel" (unless the user explicitly asks for it)
    • "Make it look like Stripe / Notion / Apple" (unless the user explicitly asks for it)
  • AI defaults to cloning popular products because those patterns dominate training data
  • Visual references may be used as inspiration, not as a template to copy
  • The product must have its own visual identity, not the identity of another product

R-31 — Every Decision Must Have a Reason

Before finishing the design, ensure there is a clear answer for every major decision:

  • Why this color?
  • Why this layout?
  • Why this typography?
  • Why this spacing?
  • Why use cards?
  • Why use this illustration or icon?

If no reason can be articulated, the decision is not yet valid and must be revisited. This rule shifts AI from merely "generating UI" to actually "designing UI".

R-32 — Keyboard Accessibility

  • REQUIRED: all interactive elements must be reachable and operable by keyboard
    • Tab and Shift+Tab navigation must work logically following visual order
    • Buttons and links must be activatable with Enter or Space
    • Dialogs and modals must be closable with Escape
  • REQUIRED: every focused element must have a clearly visible focus indicator
  • FORBIDDEN: removing the focus outline with outline: none or outline: 0 without replacing it with a better custom focus indicator
  • A UI that can only be used with a mouse is an unfinished UI

R-33 — No File/CSS Patching via Scripts

  • FORBIDDEN: implementing or altering UI features by running an external script that rewrites source files or CSS with string replacement
  • Build features directly in the source code where they belong
  • A feature added by a patch script (e.g. a Python script editing .css files) is broken by design and must be rewritten in source

R-34 — Every Theme You Ship Must Work

  • If you ship a theme toggle, BOTH modes must be fully functional
  • Contrast, colors, and every component must be verified in each mode
  • FORBIDDEN: shipping a mode where base styles, fonts, or layout break

R-35 — Verify Before You Deliver

  • Run or build the app before declaring the task done
  • Check the console for errors
  • Exercise every interactive element
  • Check every theme and the mobile breakpoints
  • A design that has never been run is not finished

R-36 — No Fabricated Claims

  • FORBIDDEN: inventing security, compliance, or performance claims ("SOC 2 compliant", "ISO 27001", "300% faster") without real evidence
  • FORBIDDEN: fake testimonials, fake statistics, fake names (see R-17, R-18)
  • If there is no real data, show no claim

Functional Patterns

"What works" means one of these, depending on context:

  • Anchor to a real section: href="#pricing" where #pricing exists
  • Scroll to relevant content for a "Learn more" style link
  • Open a modal or dialog for a quick action (closable with Escape)
  • Toggle a state: mobile menu, theme, accordion, tabs
  • External action: mailto:, a real product URL
  • Form submit with visible feedback

If none of these applies to an element, the element should not exist.

Delivery Gate (Mandatory)

Run this gate BEFORE delivering. Output its status with your deliverable. If any answer is yes, do not deliver: fix it first, then re-run.

Craftsmanship Standard

  • C-1: Is there any visual or copy decision whose only justification is "it's the AI default"? (Intentionality)
  • C-2: Does any interactive element do nothing, with no clear label? (Functional Completeness)
  • C-3: Does any section exist only to fill an AI template, not to serve the product's content? (Content-Driven Composition)
  • C-4: Does the UI break in any state, theme, breakpoint, or without a mouse? (Resilience)
  • C-5: Is any testimonial, statistic, or claim fabricated? (Evidence Over Claims)

Rule Checklist

Before declaring the design done, answer every question below. All answers must be no:

  • Are there any blue-purple/blue-cyan/purple-pink gradients, colored glow backgrounds, or neon blue buttons as defaults without a branding reason? (R-01)
  • Is there an em dash (—) anywhere in the text? (R-02)
  • Is there any horizontal overflow, text escaping its container, or broken layout on mobile? (R-03)
  • Are there any generic icons (sparkle, star, magic, lightning, diamond, robot, orb) or icons that are irrelevant to their content? (R-04)
  • Does the layout follow an AI template: generic Hero+cards, "How It Works" always 3 steps, "Trusted By" logo bar, or 4-column footer with no variation? (R-05)
  • Is there a large monospace font, uppercase label with wide tracking, or a typeface chosen without a brand character reason? (R-06)
  • Is there a background grid, blueprint, or graph paper without a visual identity purpose? (R-07)
  • Are arrows (→ / ↗) placed on almost every button purely as decoration? (R-08)
  • Are there capsule badges ("AI Powered", "Beta", "New", "Secure", "Fast") with no real function, or a combination of capsule + thin border + glow + uppercase all at once? (R-09)
  • Is glassmorphism applied to more than 1-2 elements simultaneously (navbar + card + modal + sidebar)? (R-10)
  • Are all elements (buttons, cards, inputs, badges) made pill-shaped with no radius variation? (R-11)
  • Is a large shadow applied to every component, making the page feel like it's floating? (R-12)
  • Is glow applied to cards, buttons, badges, icons, backgrounds, and borders simultaneously? (R-13)
  • Do all feature cards have identical size, icon, padding, and layout? (R-14)
  • Are CTAs still generic (Get Started, Learn More, Try Now, Explore, Discover)? (R-15)
  • Are there any AI marketing buzzwords (AI Powered, Seamless, Revolutionary, Cutting Edge, etc.)? (R-16)
  • Are there any statistics without a real source (10K+ Users, 99.9% Uptime, etc.)? (R-17)
  • Are there any fictional testimonials (AI avatars, random names or job titles)? (R-18)
  • Do all elements use the same template animations simultaneously (Fade Up + Floating + Scale + Bounce) without a clear UX purpose? (R-19)
  • Does the design still feel generic even if the logo and product name are swapped? (R-20)
  • Was dark mode forced as a default without a branding/user reason, or was a required light/dark toggle deferred with an excuse? (R-21)
  • Are there generic illustrations (Undraw, Storyset, 3D blob) with no real connection to the product? (R-22)
  • Were any visual assets (logo, avatar/profile photo, statistics, testimonials, or navigation structure) created without explicit instructions or confirmation? (R-23)
  • Are there navbar links pointing to sections or pages that do not exist? (R-24)
  • Is there any text with contrast below the WCAG AA standard (4.5:1 for normal text, 3:1 for large text)? (R-25)
  • Are there any buttons, dropdowns, or forms that do nothing, with no real behavior and no // TODO + visible label? (R-26)
  • Does the UI lack an empty state, loading state, or error state? (R-27)
  • Does the FAQ contain generic questions that are not relevant to the product? (R-28)
  • Does the color palette exceed 2-3 core colors + 1 accent without a clear design system? (R-29)
  • Does the overall design look like a clone of another popular product (Linear, Vercel, Stripe, Notion, etc.)? (R-30)
  • Is there any design decision (color, layout, typography, spacing, cards, illustrations/icons) that cannot be explained with a clear reason? (R-31)
  • Can the UI not be navigated by keyboard (Tab, Enter, Escape) or is there no visible focus state? (R-32)
  • Was any feature added by patching source/CSS with an external script instead of writing it in source? (R-33)
  • If a theme toggle exists, does one mode (light or dark) break styles, fonts, or layout? (R-34)
  • Was the app run/built and every interactive element exercised before delivery? (R-35)
  • Are there any fabricated security, compliance, performance, or customer claims? (R-36)

If even one answer is yes, do not deliver. Fix it, re-run the gate, and only then ship. Delivery without a clean gate is a failure.