Anti-slop design system for Claude Code

Nine skills that make Claude build web and mobile UI which reads as intentionally designed for this product, rather than generated. Merged and de-duplicated from four open-source anti-slop projects, with their contradictions resolved rather than stacked.

Credits

This repo is a merge, not original work. Almost everything here was written by four other people, and each of their projects is worth using on its own. If any part of this is useful to you, the credit belongs upstream. Please star their repos.

miqdadbadjuber/anti-slop — Miqdad Badjuber

The backbone. The 38 numbered rules, the three-tier structure (Hard Gate, Purpose-Gate, Quality Locks), the mandatory Delivery Gate, the liveliness dials, the contrast checker, and the principle this whole system rests on: a filter, not a style guide. Five of the nine skills here are his, close to verbatim.

Studio-Groei/anti-slop — Studio Groei

The exploration method: never one-shot, generate strongly different variants first, then drill down. The named aesthetic taxonomy. The insight that fixing the em dash by replacing every one with a comma just creates a new tell, so it needs a budget and a rotation repertoire, not a ban. Plus two dependency-free tools: slop-scan.mjs and tweaks-bar.js.

petergyang/no-ai-slop — Peter Yang

The entire writing side. 20+ named prose patterns, the words-to-cut list, the self-eval checklist, and the rule that matters most: preserve the writer's voice, because copy with no voice is as obviously machine-made as copy full of AI tells.

ferousco/anti-slop-design — Feranmi (AppMD)

The six personality axes and the per-category registers, which turn "pick a direction" from a meaningless instruction into a decidable one. And the native-mobile modules — iOS and Android conventions, safe areas, thumb reach, per-screen rules — the one area none of the others covers.

Per-file provenance, what was deliberately dropped, and how each contradiction between the four was resolved: ATTRIBUTION.md. Every skill file also carries a footer naming its upstream, and all four copyright notices are reproduced in LICENSE.

All four are MIT licensed.

The core principle

This is not a style guide. There is no house look. Beige, editorial, minimalist, monochrome and dark are defaults, exactly as purple gradients are a default, and reaching for them because they read as "not AI" is the same failure in different clothes.

Every anti-pattern here is a question, not a ban:

Why does this design choice exist here?

not

Is this technique forbidden?

A gradient, a card, a rounded corner, an animation, a glass surface: all fine when they are intentional and appropriate, and all slop when they are defaults nobody chose.

Install

Option A: personal skills (recommended, works immediately)

git clone https://github.com/janschaer-art/antislop-design.git

cd antislop-design; .\install.ps1

macOS and Linux:

cd antislop-design && ./install.sh

This copies skills/ into ~/.claude/skills/ and writes the router block into ~/.claude/CLAUDE.md between <!-- antislop-design:start --> markers. Re-running replaces the same files and the same block, so updates are safe.

Prefer editing the repo and having it go live immediately? Use -Link (Windows junction) or --link (symlink):

.\install.ps1 -Link

Option B: plugin

/plugin marketplace add janschaer-art/antislop-design

/plugin install antislop-design@antislop-design

The plugin carries the same nine skills, but not the CLAUDE.md router. Paste CLAUDE.snippet.md into your ~/.claude/CLAUDE.md yourself if you want it.

Pick one. Installing both ways lists every skill twice. If you switch, run .\install.ps1 -Uninstall first, or /plugin uninstall antislop-design.

Verify

Restart Claude Code, then run /skills in an interactive terminal. You should see the nine skills below. ~/.claude/CLAUDE.md should contain the router block.

Enable and disable

Skills load on demand, from their description field. Nothing but the 2KB router is in context by default, so there is no cost to leaving all nine installed for non-design work.

Turn one off without deleting it

Add skillOverrides to ~/.claude/settings.json (or a project's .claude/settings.json to scope it to that project):

{
  "skillOverrides": {
    "antislop-code": "off",
    "antislop-mobile-app": "user-invocable-only"
  }
}

/skills in an interactive terminal is the UI for the same setting.

Turn the whole system off

• Temporarily: set every skill to "off" in skillOverrides, and delete or comment out the router block in ~/.claude/CLAUDE.md.
• Permanently: .\install.ps1 -Uninstall (or ./install.sh --uninstall). Removes the skills and the router block, leaves the repo alone.

Scope it to one project

Skills in a project's .claude/skills/ beat the personal ones of the same name, and a project .claude/settings.json can carry its own skillOverrides. So a repo that wants a different design posture can override just that, without touching the global install.

A note on the bundled skills

disableBundledSkills in settings (or CLAUDE_CODE_DISABLE_BUNDLED_SKILLS=1) turns off Anthropic's own bundled skills such as dataviz and artifact-design. It does not affect anything in this repo.

The workflow

1. Understand the product
2. Establish the design direction        -> design-direction, writes DESIGN.md
3. Explore alternatives, when warranted  -> design-direction/references/exploration.md
4. Build                                 -> antislop + antislop-ui / -responsive / -mobile-app
5. Run the actual app                    -> design-review
6. Inspect the rendered UI (screenshots) -> design-review
7. Critique hierarchy, spacing, type,
   density, consistency, responsiveness,
   product identity                      -> design-review
8. Find what feels generic or templated  -> design-review, the generic scan
9. Fix
10. Inspect again
11. Delivery Gate, then finished         -> antislop

The skills

The eight axes

design-direction fixes a direction on eight decidable positions rather than adjectives, because "modern", "clean" and "professional" constrain nothing:

Density · Warmth · Formality · Energy · Ornament · Contrast · Rhythm · Motion

Each 1-3, each with a written reason, each translating into a token decision. Energy, Rhythm and Motion are checked against the built output by the Delivery Gate, so a page declaring RHYTHM 3 and shipping identical sections fails.

Tools

The DESIGN.md template

skills/design-direction/assets/DESIGN.template.md — 19 sections covering target users, product personality, visual references, typography, colour strategy, density, spacing, shape language, layout philosophy, interaction patterns, motion, imagery, accessibility, responsive behaviour, mobile-specific behaviour, what the design must explicitly avoid, claims that can be made, standing decisions, and known debt.

Using it

A new web app

Build <what it is> for <who>. Run design-direction first.

Want options before committing

Show me three or four substantially different directions before you build.

A mobile app — name the platform so antislop-mobile-app loads

React Native app for iOS and Android. Run design-direction, then build the feed screen.

An existing project that looks generic

Run design-review in review-only mode.

Numbered findings with priorities. Nothing changes until you approve specific numbers.

Copy only

/antislop-copy is this slop? <paste>

Credits, again

Because it is worth repeating at the bottom as well as the top. Four projects, four authors, all MIT, all worth using on their own:

Per-file provenance and what was dropped: ATTRIBUTION.md. Copyright notices: LICENSE.

MIT.

{
  "name": "antislop-design",
  "description": "Anti-slop design system for Claude Code: per-product design direction, a purpose-test filter, and a run-and-inspect visual review loop.",
  "owner": {
    "name": "janschaer-art",
    "url": "https://github.com/janschaer-art"
  },
  "plugins": [
    {
      "name": "antislop-design",
      "source": "./",
      "version": "1.0.0",
      "description": "Build web and mobile UI that reads as intentionally designed, not generated. Nine skills: design direction, the anti-slop filter, UI, responsive, native mobile, accessibility, copy, visual review, and code comments."
    }
  ]
}