I built a Claude Code skill that de-slops AI-generated web design

You know the look. You ask any AI to "make me a landing page" and you get:
giant rounded cards, frosted glass floating over a red-purple gradient,
a glowing neon button, a pitch-black background with no light mode,
a 64px centered headline, and one endless single column.

A V2EX thread last month put it perfectly — "让 AI 做网页，总是有一股 AI 味道"
("AI-made web pages always have that AI smell"). 80+ replies, all listing the
exact same sins: big border-radius, glassmorphism, glowing borders, red-purple
gradients, dark-mode-only.

So I built design-slop-skill: a Claude Code skill that detects these
patterns deterministically and rewrites them toward human-crafted defaults.

What it does

Two stdlib-only Python scripts, no LLM needed, no network, no dependencies:

detect.py scans your HTML/CSS (style blocks, inline styles, linked
stylesheets) and reports findings with rule id, file, line, and a bilingual
(English + 中文) explanation. Rules are weighted into a 0–100 slop score:

Slop score: 90/100  (8 findings, 7 rules)

[SLOP-004] Red-purple gradient — index.html:42
    .hero-banner { background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%) }
    EN: linear-gradient with violet/magenta/purple stops — the signature AI palette.
    中文: 红紫渐变：linear-gradient 里出现紫/品红/红紫色 —— AI 网页的招牌配色。

fix.py applies the inverse of each rule: radius clamped to 10px, blur
dropped and translucent backgrounds solidified, glow shadows neutralized,
purple gradients flattened to solid colors, a prefers-color-scheme: light
block appended for dark-only pages, hero titles tamed to 2.25rem left-aligned,
narrow containers widened to 72rem.

The 7 rules (SLOP-001 through SLOP-007) cover the full V2EX complaint list.
Purple detection is hue-based (265–345°), not a hardcoded color list, so
#7c3aed, #d946ef, magenta — all caught.

Why a skill, not just a CLI

I already have a CLI auditor for this. But a CLI runs after the fact — you
have to remember to run it. A skill is agent-native: the coding agent
invokes it during generation, right after writing the page, with the fix
workflow wired into its instructions. Different distribution shape for the
same problem. (And unlike text de-AI tools, this one targets design/CSS —
complementary, not overlapping.)

Two things the fixer deliberately leaves to a human: adding a real
theme-toggle button, and restructuring a single column into a grid. The skill
tells the agent exactly that, with a verification checklist.

Try it

Repo: https://github.com/hahahahahahahahah6/design-slop-skill

git clone https://github.com/hahahahahahahahah6/design-slop-skill.git
cd design-slop-skill
python3 scripts/detect.py your-page.html

Drop SKILL.md + scripts/ into .claude/skills/design-slop-skill/ and tell
your agent to run the check after every page it generates. 23 unit tests
included — one fixture per slop pattern, plus a clean human-crafted page that
must stay silent.

MIT licensed. If it catches slop in your AI-generated pages, it did its job.