anti-slop

An anti-slop web-design skill for Claude Code (and compatible agents). It refuses generic, templated "AI slop" (no Inter/Roboto defaults, no purple-gradient-on-white, no predictable hero → 3-cards → CTA) and enforces a repeatable 3-step method that produces distinctive, intentional interfaces.

Built by Studio Groei — a venture studio that ships what it preaches. The skill instructions are written in Dutch; this README is English for reach.

---

Why

frontend-design (the anti-slop skill every Claude designer runs) is a floor, not a source of taste — because everyone runs it, it becomes its own convergence vector and regresses toward house defaults (e.g. Space Grotesk). This skill treats that floor as "what NOT to do" and sources the actual distinctiveness from three places: a curated taste library, an explicit aesthetic taxonomy, and the parameterized Taste v2 skill (design-taste-frontend).

The 3-step method

1. Taste curation — build an inspiration library from Dribbble/Pinterest/X references, grouped by named aesthetic styles (Vast Quiet, Print Tech, Dither Mono, …), and synthesize a design brief.
2. Tooling — an honest integration matrix: Taste v2, Higgsfield (assets), 21st.dev (components), plus Impeccable-style prompt passes (bolder / overdrive / clarify).
3. Iterative build — never one-shot. Always generate 5 strongly different aesthetic variants first (via parallel agents), then drill down into 3 sub-variants of the chosen one, then fine-tune live with the Tweaks Bar, and put every variant through the copy pass before anyone sees it. Every request runs through the ARIG framework: Aesthetic · Reference · Intent · Guard Rails.

What's inside

File	Purpose
SKILL.md	The orchestrator — hard rules, ARIG, wide-net → drill-down flow
references/aesthetic-styles.md	12 named aesthetic styles with font/color/motion/layout DNA
references/copy-slop.md	The text side: em-dash budget + replacement repertoire, rule of three
references/tool-integration.md	Honest, verified wiring for each external tool
references/inspiration-library.md	The taste-curation workflow + capture format
scripts/tweaks-bar.js	Injectable, dependency-free live design-tuning panel
scripts/slop-scan.mjs	Dependency-free scanner for em-dash density and forced triads

Copy is design too

A page can have a perfect grid and still read as generated. Two written tells are covered in depth in references/copy-slop.md, chosen because the obvious fix for each creates a fresh tell:

Em dashes. The character is not the problem, the monotony is. Replacing every dash with a comma just swaps one tic for another, so the reference gives a budget (about one per 150 words, zero in headings, buttons and labels) plus a repertoire to rotate through, sorted by what the dash was actually doing: a pause, an aside, an apposition, or a turn. Dutch typography gets its own note, since the spaced en dash (–) is the local convention and a glued — is an anglicism on top of the AI rhythm.

The rule of three. Everything arrives in threes: three features, three bullets, three adjectives, three columns. Making everything two is not variation, it is a different mould. The method is to count the real items, ship that number, and vary list lengths across the page. The reference treats this as one reflex in two media, because the 3-column feature grid is the same habit expressed in layout.

node scripts/slop-scan.mjs app/ content/     # density, triads, 3-col grids, with line numbers
node scripts/slop-scan.mjs app/ --strict     # exit 1 over budget, for a CI gate

The scanner is a smoke alarm, not a judge: a regex cannot tell a deliberate dash from a reflex. Wrap intentional passages in <!-- slop-scan: uit --> / <!-- slop-scan: aan -->. For long-form prose, run humanizer afterwards; it carries the full catalogue of AI writing tells. This reference covers interface copy.

The Tweaks Bar

A self-contained, Shadow-DOM panel you inject on your dev server to tune CSS custom properties (fonts, colors, weights, hero transition timing/easing) visually in the browser — no new prompt per tweak. It auto-discovers :root variables (or takes an explicit manifest), persists to localStorage, exports only the changed vars as CSS (Copy CSS), and toggles with Cmd/Ctrl+Shift+.. Dev-only (guarded off on production hosts).

<!-- Vite / static -->
<script src="/tweaks-bar.js" data-antislop-tweaks></script>

// Next.js (dev only)
if (process.env.NODE_ENV !== 'production') {
  const s = document.createElement('script'); s.src = '/tweaks-bar.js';
  document.body.appendChild(s);
}

Install as a Claude Code skill

git clone https://github.com/Studio-Groei/anti-slop.git ~/.agents/skills/anti-slop
ln -s ../../.agents/skills/anti-slop ~/.claude/skills/anti-slop   # makes /anti-slop invocable

Then invoke with /anti-slop, or let it trigger on prompts like "ontwerp een hero" / "design a landing page" / "5 versions, no AI slop".

Recommended companions (referenced by the skill):

• Leonxlnx/taste-skill → skill design-taste-frontend (Taste v2).
• blader/humanizer → the full AI-writing-tells catalogue for long-form prose.
• Anthropic's built-in frontend-design (used only as the anti-slop floor).

Credits

Stands on the shoulders of the anti-slop skills ecosystem — Anthropic's frontend-design and Leon Lin's Taste Skill. Higgsfield, 21st.dev "Magic", and Impeccable are integrated as external tools.

License

MIT © 2026 Studio Groei