Generic, repetitive design patterns produced by large language models when given unconstrained prompts. AI slop manifests as identical card grids, #3B82F6 buttons, Inter font, rounded-2xl corners, and gradient hero sections. The term captures the visual sameness that emerges when thousands of sites are generated from overlapping training data.
Why it matters: AI slop erodes brand trust. Users subconsciously register "this looks like everything else" and bounce faster. Sailop exists to detect and eliminate these patterns before they ship.
bg-white rounded-2xl shadow-lg p-6 — the quintessential AI slop card.A 0-100 numeric score assigned by Sailop that measures how visually unique a website or component is. The score aggregates seven dimensions: color, typography, layout, spacing, border radius, animation, and component structure. Higher scores mean more unique design; lower scores indicate AI slop.
Why it matters: Without a measurable score, "unique design" is subjective. The DNA Score gives teams a concrete number to track in CI/CD pipelines, set quality gates, and measure improvement over time.
sailop scan ./src → Score: 84/100 (Grade A)The unique fingerprint of a design system, composed of its color palette, font pairing, spacing scale, border radii, and animation curves. No two Visual DNA profiles should be identical. Sailop extracts and analyzes this fingerprint from source code.
Why it matters: Visual DNA is what separates a brand from a template. When AI generates code, it produces near-identical Visual DNA across projects. Detecting and differentiating this fingerprint is the core of anti-slop methodology.
Hue 28, Bitter + Karla, off-grid spacing (5/14/22px), radius 4/7/1px — this page's Visual DNA.A structured collection of design tokens (colors, fonts, spacing, radii) and component patterns that ensure visual consistency across a product. In code, design systems are typically expressed as CSS custom properties, Tailwind config, or theme objects.
Why it matters: AI tools default to the same design system — Tailwind's default palette, Inter font, 4px grid, rounded-lg. A custom design system is the single most effective defense against AI slop because it replaces every default token with a unique one.
:root { --c-accent: #c2592e; --f-display: 'Bitter'; --r-card: 7px; }The practice and methodology of deliberately avoiding AI-generated design patterns. Anti-slop techniques include using non-default color hues, serif display fonts, off-grid spacing values, varied border radii, and custom animation curves. The term also refers to the broader movement of reclaiming design intentionality from AI defaults.
Why it matters: Anti-slop is not about rejecting AI — it is about constraining AI. By giving LLMs a unique design system and enforcing it with linting, teams can use AI coding tools without producing generic output.
sailop transform ./src --seed 7429 — rewrites defaults to unique tokens.