Stop Design Slop

stop-design-slop

Read this before anything else

Two different jobs hide behind "this looks AI-generated", and mixing them is what breaks pages.

Removing artifacts is always safe. A builder watermark, lorem ipsum, a fabricated testimonial, a dead link, a six-fingered hero image: these are wrong whatever the design direction, and deleting them can only improve the site. This is the CLEAN pass, and it is the default.

Restyling is not safe piecemeal. The typeface, the palette, the radius scale, the hero composition: each is a choice that happens to be modal. Change one in isolation and you get incoherence, which reads worse than consistent genericness. These need a direction, so CLEAN reports them and leaves them alone.

Removing style defaults one at a time does not produce good design. It produces bland design, which reads as AI-generated too.

An earlier version of this skill prescribed exactly that, and it made pages worse for reasons documented in references/method.md:

• A 284-item ban list constrains 284 decisions out of the thousands a page makes. Every unconstrained decision reverts to the model's default.
• Banning the most common option promotes the second most common one. Everyone lands on the same runner-up, so anti-slop output ends up more uniform than the slop it replaced.
• Thirty tells fixed as thirty independent edits produce thirty unrelated decisions. The generic original was at least coherent, and incoherence reads as broken.
• Optimizing for the fewest tells converges on a flat gray page with a system font. Zero tells, zero decisions.

So in REDESIGN, the tells never drive the fix. They appear as diagnosis before the work and as lint assertions after it, while a committed direction and a token-layer rebuild sit in between. In CLEAN, the tells drive only the artifact and content fixes, which carry no such risk because they change nothing system-wide.

If you are here to repair a page a previous de-slop pass damaged, read the recovery section of references/method.md first. Reverting usually beats repairing forward.

Modes

The default is CLEAN, which does not restyle the site. A redesign is a bigger commitment than most people want when they say a page looks AI-generated, so it takes an explicit word.

Infer between CLEAN and PREVENT rather than asking: existing UI goes to CLEAN, a blank slate goes to PREVENT. Never escalate to a redesign on your own. Finish the clean pass, report what a direction would fix, and let the user decide.

The tiers

Read references/clean-pass.md for the per-tell breakdown.

Tier 4 is what stops a clean pass trending toward bland: removal lowers the Slop Score, and craft raises the Commitment Score.

The constraint that keeps tiers 1 to 4 safe: no tier below 5 may edit theme tokens, font-family, the palette, the radius or shadow scale, or layout structure. Incoherence comes from changing one system property in isolation, so CLEAN changes none of them. Verify the diff contains no such change before finishing.

Files

Read method.md first, always. Then read what your phase needs.

287 tells (64 instant, 154 strong, 69 mild) and 64 craft details.

CLEAN workflow (default)

DIAGNOSE + TIER  →  T1 ESSENTIAL  →  T2 HONEST  →  T3 QUIET  →  T4 CRAFT  →  REPORT T5  →  VERIFY

Full detail in references/clean-pass.md. Diagnose as below, assigning each hit a tier. Work the tiers in order and stop at whichever the user asked for. Report tier 5 rather than applying it, then verify no diff touched a system token.

A worked example lives in examples/: hero-before.html and hero-clean.html are the same page before and after tiers 1 to 4, with typeface, background, accent, radius and layout identical between them.

REDESIGN workflow (only when asked)

DIAGNOSE  →  BRIEF  →  SPEC  →  REBUILD  →  LINT  →  JUDGE

Read references/redesign.md before building. It carries the design read, the three dials, the two-altitude category-reflex check, and the ban list that catches what survives a clean pass: three equal feature cards, div-based fake product UI, gradient text, eyebrows on every section, side-stripe borders, ghost cards, over-rounded corners. examples/hero-redesign.html is a worked result.

1. DIAGNOSE (both modes)

Capture the current state, then walk the tell catalogs against it. Record each hit as #N, where it appears, severity, plus its tier in CLEAN mode. Record what already works as a do-not-touch list.

Capture with whatever the host provides. For a live URL: screenshot full-height at desktop width and again at ~375px, extract page text, check the tab title and favicon. With no browser: fetch the HTML and CSS, audit those, ask the user for screenshots, and state which visual tells you could not verify. For a codebase: read entry pages, global CSS and theme config, layout components, then run the VOCAB grep sweep at the end of each catalog. Judge the rendered page whenever you can.

Run the 5-second test explicitly: describe your first impression of the desktop screenshot in one sentence, before analysis. If it contains "generic", "template" or a tool name, that sentence is the headline of the report.

Stop here in audit-only mode, after the findings and the plan.

In CLEAN mode, stop reading here and follow clean-pass.md. The steps below restyle the site and belong to REDESIGN.

2. BRIEF

Run art-direction.md. It ends with a one-sentence concept, a named audience, three to five disambiguated attributes, an exclusion list, and a chosen direction from directions.md.

Refuse to proceed without a concept and an audience. Art direction is what makes a thousand small choices agree. With no concept, they agree by defaulting. If the user will not supply one, generate three candidate directions and force a pick.

Select the direction through the three filters in directions.md: your attributes, what competitors already occupy, and what your content can actually support. The third filter kills the most candidates, and ignoring it produces an empty template.

3. SPEC

Write DESIGN.md into the project using the template in method.md. Twenty to fifty lines, exact values, no adjectives. Derive the values that must be project-specific using derivation.md: source the hue from the brand's own material, solve contrast rather than eyeballing it, pick type against the measured gates.

An empty line in the spec is a decision handed back to the model. Fill every one.

The spec includes five named commitments: the focal point, the one tension move, a signature asset appearing in three roles, the decision competitors would not make, and one deliberate exception to your own system.

This file is a deliverable. The user edits it, and it governs every future change.

4. REBUILD

Token layer first, as one atomic change, then components, then content, then craft.

Make defaults unreachable rather than discouraged. In Tailwind, define colors: rather than extend: so the framework palette cannot be referenced. Renaming indigo to primary changes nothing perceptual.

Order: type tokens → color tokens → geometry tokens → space and scale → motion tokens → components → content and copy → craft details from craft-details.md.

Never scatter edits across components before the tokens agree. That is the patchwork failure.

5. LINT

Machine-checkable assertions, run in CI. Warnings first, then errors.

Hex values outside the allowlist. Banned utility classes. Off-scale spacing. Banned copy openers. Computed contrast below 4.5:1. Raw elements where a system component exists.

Rules must be checkable by the agent against its own output. An instruction the agent cannot verify produces over-correction rather than compliance, so anything requiring "look at the render" belongs in the JUDGE phase instead.

6. JUDGE

Write a rubric for this brief describing what good looks like, then evaluate the rendered page against it. A checklist cannot govern generation; critique defines quality without demanding exactness, and it evaluates the render rather than the source.

Re-screenshot desktop and mobile, rerun the 5-second test, and score both axes.

Scoring

raw              = 3×instant + 2×strong + 1×mild
Slop Index       = round(100 × raw / (raw + 40))          0 to 100, lower is better
Commitment Score = filled, propagated, nameable decisions  higher is better

Report the per-category breakdown next to the index, since one number hides which half is broken. A page at index 47 whose copy carries 23 of it needs a copy pass, not a redesign. See references/signals.md.

REDESIGN ship gate needs both: Slop Score 0 to 8, Commitment Score 5 or more, every mandatory positive from method.md present, and no regression in contrast, focus visibility, page weight, functionality or mobile layout.

CLEAN expects a different result. The Slop Score falls a long way while the Commitment Score rises only a little, from the craft additions. It will not reach the redesign gate, and that is correct: CLEAN removes the evidence that a machine made the page, while a direction is what makes it look like a person chose it. Report both numbers and say which gap a redesign would close.

Guardrails

• Every removal gets a replacement. Name the job an element does (orient, persuade, prove, convert) and keep that job covered.
• Never strip all three interaction signifiers. Shadow, radius and fill are slop tells and also the primary clickability cues. An interactive element keeps at least two of border, fill, and a hover or focus delta. Removing all three makes the page read unfinished as well as bland.
• Conventions stay. Nav, forms, hierarchy and checkout are load-bearing. Diverge on type, color, section order, imagery, microcopy and motion instead.
• Accessibility outranks aesthetics. No fix may reduce contrast, remove focus states, shrink tap targets, or ignore prefers-reduced-motion.
• The brand stays the brand. If the purple is the company's actual color, it stays, used with more intention.
• Restraint over reinvention. Anti-slop is a direction, not a style. Swinging to brutalism because "AI can't do that" produces a different template.
• Parameterize per project. If every user of this skill produces the same non-slop, the skill has manufactured a new default. Derive the palette from the project's own material and invent the signature move per project.
• Keep receipts. List what you kept and why, so a reviewer sees the restraint was deliberate.

Agent compatibility

Plain Markdown against the open SKILL.md standard, requiring no tool by name. Runs in Claude Code, Codex, Cursor and Gemini CLI.

Degrade honestly. Run the catalog against what you can see and label the untested categories rather than guessing.

Related skills

Use when the host provides them, skip silently otherwise.

• design-taste / frontend-design: additional positive design direction.
• stop-slop (Anthropic): de-AI-ing long-form prose. Use it on the site's blog and docs. UI copy is covered in copy-content.md.