AI-generated frontends look alike because models reach for statistically safe defaults: the same fonts, the same purple CTA, the same three identical feature cards. People recognize the result instantly and call it slop. This skill is the countermeasure.

Three facts drive everything below.

Slop is the absence of decisions, not a particular style. Every visual choice should be one you can explain in terms of this product and this audience. A choice you cannot explain is a default someone else set.

The tells migrate. The 2022 default was purple gradients, glassmorphism, and neon glows on near-black. The 2026 default is warm cream, an editorial serif, and tasteful restraint. Both read as generated for the same reason: nobody decided. Avoiding a fixed list is not the goal. Deciding is.

Density is the signal. Automated slop detectors score a page by counting tells: 1-2 is treated as a pass, 3-4 reads as templated, 5 or more is heavy slop. One purple button is not a crime. A purple button plus glass cards plus a stat row plus an eyebrow pill plus a FAQ accordion is a template.

Two entry points, same rules underneath. A blank page needs a direction decided from scratch; a live codebase already has one (good, bad, or accidental) that has to be found before it can be fixed. Pick the path that matches the task.

Work out three things before any code:

Before writing code, state the direction in one or two sentences: the aesthetic, the typeface, the palette anchor, and one thing you are deliberately avoiding. For example: "Developer-tool landing page for a technical audience: IBM Plex Mono paired with a grotesque, paper-white background, one saturated signal color, dense and editorial. No gradients, no glass."

Stating it forces a real decision and makes the choice inspectable. If the brief genuinely splits between two directions, ask one question. Otherwise decide and proceed.

Draw the direction from the product's own world: a terminal, a lab notebook, a transit map, a specific era, an IDE theme, a cultural aesthetic. Not from "SaaS landing page" as a genre. And vary between generations: if your last design was cream-and-serif editorial, reaching for it again is the same reflex as reaching for purple.

Set tokens as CSS variables first: palette, type scale, spacing scale, radius scale, shadow scale. Consistent tokens read as intent; ad hoc values read as generated. Read for how to build each scale and the visual principles behind them (hierarchy, balance, contrast, Gestalt grouping).

Interfaces succeed because of hundreds of small choices: focus states, hit targets, loading timing, form behavior, motion physics. Read before building anything interactive and treat it as the implementation bar.

Sweep the result against and the quick check below. Then check the things code never shows you: you do not see your own render, so composition bugs (borders dying at rounded corners, non-concentric nested radii, monotone spacing) are invisible in source and glaring on screen. If you can render a screenshot, look at it. Subtract before you polish: slop is what piles up, so remove elements until everything left has to be there.

Different failure mode than a blank canvas: there is already a live codebase with real content, real functionality, and existing patterns, some deliberate and some accidental. A full rebuild wastes the parts that already work and risks breaking what does. Work with what's there instead of replacing it.

Find the existing tokens (CSS variables, Tailwind config, theme file), the component library, and whatever conventions are already in use. Read enough to know which pattern is dominant, so a fix reinforces it instead of forking a second design language next to the first.

Sweep each screen against and the quick tell check below. For a product surface (app, dashboard), also run : a live UI's problem is as often broken focus states, inconsistent hit targets, or missing loading states as it is a visual tell. Render it; don't just read the JSX or CSS, since composition bugs and tell density are invisible in source. List concrete hits (file, line, what it is), not general impressions, and count density per screen: 1-2 is fine, 5+ marks that screen as the priority.

Usually one of:

If the same purple sits on twelve buttons, change the variable once, not twelve class names. Consolidate scattered ad hoc values into the token scale that already exists; only add a new token when the fix genuinely needs one.

"This card looks off" means fix that card and its siblings, not the app. "This looks generic, make it better" at the page or app level justifies a fuller pass. Don't turn a targeted fix into a redesign, and don't touch copy, structure, or functionality that wasn't part of the complaint.

Re-run the tell check on what changed. Confirm existing behavior, responsive breakpoints, and any tests still pass — a de-slop pass that regresses functionality is not a win.

Typography. Pick the typeface the way you would pick a logo: deliberately, for this product, and be able to say why. Never default to Inter, Roboto, Arial, Open Sans, Lato, or system sans. Also do not "fix" that by grabbing the current trend rotation (Space Grotesk, Instrument Serif, Fraunces, Geist, Syne): those are good faces that became tells precisely because every generator reaches for them. Pair with contrast (display plus mono, serif plus geometric sans) and use extremes: weights 100-200 against 800-900 beat 400 against 600, display sizes 3x body beat 1.5x. Keep one voice per headline: no single word swapped to an italic serif or a different color. Body text at least 16px, line height 1.4-1.65, lines 45-75 characters.

Color. Commit to one palette and encode it in CSS variables. Dominant color plus a sharp accent beats an evenly distributed rainbow. Derive semantic colors (success, error, warning) from your palette instead of stock Tailwind blue/amber/green/red boxes. Text is always a solid color, never gradient-clipped. Meet contrast floors (4.5:1 body, 3:1 large text), temper pure black on pure white, and never encode meaning in color alone. Dark themes must be earned by the context, not the default, and dark-theme body text needs to stay readable, around 7:1, not mid-grey on black.

Layout and hierarchy. One thing is the most important thing: make it unmistakably biggest and place it deliberately. Use at most 3 sizes per composition and 2-3 type sizes for hierarchy. Group by proximity: related elements tight, unrelated groups far apart, with real jumps in the spacing scale. One shared gap everywhere means nothing belongs to anything. One surface per region: no cards inside cards, group with spacing and hairline dividers instead. Reading order must match visual order.

Components and effects. Decoration must carry information. An icon, badge, glow, callout, or glass panel earns its place by meaning something, or it goes. Keep one small radius scale and nest radii concentrically (inner radius = outer radius minus the gap). Shadows are neutral, layered, and smaller than the element casting them; a tinted glow is not depth. Put border and border-radius on the same element so the stroke follows the arc.

Motion. Motion is information: animate to show cause and effect, not to decorate. Transition only the properties that change (opacity, transform, color) at 120-200ms with an ease-out curve; never , and save springs for things that physically move. One well-orchestrated entrance with staggered reveals beats scattered hover tricks. Honor .

Copy. Specific beats loud. Real numbers are odd and checkable ("cuts build time 38%"); invented ones repeat everywhere ("10K+ users, 99.9% uptime, 24/7"). Ban the AI cadence: "It's not just X, it's Y", "Say goodbye to", punchy triads, buzzwords (streamline, empower, supercharge, world-class, enterprise-grade). No emoji as decoration. Error messages state the fix, not just the failure.

Frequencies from a deterministic scan of 1,590 Show HN landing pages. Run this list against every page you produce:

A hit is not automatically a failure. It is a prompt to ask: did I choose this for a reason I can say out loud? If yes, keep it. If it is there because that is what landing pages look like, cut it. Full catalog with fixes: .