Anti-Slop Design

A Claude Agent Skill that stops your AI from shipping the same purple-gradient website as everyone else.

Web and mobile. 20 modules.

---

The problem

Ask any AI to "build a modern landing page" and you get the same site every time:

Purple→indigo gradient hero · Inter headline · centered badge → heading → gray subheading → two buttons · three identical feature cards with icons · 1px gray borders on everything · glassmorphic nav · fade-in-on-scroll on every section.

That is not a style. It is regression to the mean — the model emitting the statistically most common interface in its training data. The web has a name for it now: AI slop.

It costs real things. Users form a first impression in ~50ms and mostly from visual design. Generic design reads as automated, and automated increasingly reads as untrustworthy. Slop erodes credibility, dilutes brand, suppresses conversion, and reliably fails accessibility.

What this skill does

anti-slop-design installs as a Claude Agent Skill. Once installed, Claude loads it automatically whenever you generate, review, or refactor UI — and it changes how the model decides.

It gives the agent:

• A hard rejection list of the specific patterns that mark output as AI-generated
• An operating protocol that forces a named visual direction before any code, so sampling never falls back to the mode
• A design-decision framework — the Hierarchy of Needs, the "Would Stripe do this?" test, the self-interrogation script
• A mechanism-level explanation of why slop happens (the Tailwind indigo-500 cascade, inherited library defaults, prompt underspecification), so the agent can generalize to patterns not on the list
• Non-negotiable floors for accessibility, performance, and durability

It does not make your AI weird. Over-correction — brutalism on a medical dashboard, scroll-jacking on a pricing page — is its own failure mode, and the skill guards against that too. The target is intentionality, not deviation.

Install

As a plugin — recommended, because you get updates

Installing as a plugin means new versions reach you when they ship. Copying files does not.

/plugin marketplace add Ferousco-dev/anti-slop-design
/plugin install anti-slop-design@anti-slop-design

Then /reload-plugins. The skill triggers on its own; to force it, /anti-slop-design:anti-slop-design.

To update later:

/plugin marketplace update anti-slop-design

Claude Code compares the version in the plugin manifest, so you only get an update when a real release lands rather than on every commit. CI fails the build if that version and the changelog disagree.

---

Copying the files instead

These give you the skill at a point in time. You will not get updates; re-run the command to refresh.

Claude Code (project-level)

git clone https://github.com/Ferousco-dev/anti-slop-design.git /tmp/anti-slop-design && cp -r /tmp/anti-slop-design/skills/anti-slop-design .claude/skills/

Claude Code (all your projects)

git clone https://github.com/Ferousco-dev/anti-slop-design.git /tmp/anti-slop-design && mkdir -p ~/.claude/skills && cp -r /tmp/anti-slop-design/skills/anti-slop-design ~/.claude/skills/

One-liner installer