Skip to content
UXClaim
Design Systems

Anti-Slop Design

Generate 3 structurally distinct design variants from real competitors' patterns, rebuilt in your design tokens with auto-scoring.

View source More in Design Systems

What it does

Anti-Slop Design is a Claude Code command suite that generates three structurally distinct design variants of any component. Each variant adopts a real competitor’s layout pattern but is rebuilt entirely using your own design system’s tokens, fonts, motion, and icons. Variants are automatically rendered via Playwright and scored against a 6-dimension anti-slop rubric.

How it works

The skill builds on a private local corpus of ~281 real apps (Apple, Linear, Stripe, Whoop, etc.) scraped from public marketing assets—nothing leaves your machine. When you run /design <component>, it retrieves semantically similar competitor patterns, spins up parallel subagents to rebuild your component in each pattern using your tokens, renders everything via Playwright, and auto-evaluates variants on slop tells, specificity, source faithfulness, sibling differentiation, and token compliance. Failure modes feed a local lessons store that compounds over time.

Use cases

  • Design exploration: Rapidly test 3 orthogonal layout approaches for a component
  • Greenfield projects: Generate 3 complete design directions (palette, type, motion, layout) each grounded in different competitors
  • System consistency: Ensure variants respect your tokens while exploring structural variety
  • Iterative refinement: Learn from failed variants—lessons auto-integrate into future runs

Who benefits

Product designers and design system stewards who want to escape repetitive component patterns and ground new work in real-world precedents—without manual competitive research or hand-coded variants.

Frequently asked questions

What does Anti-Slop Design do?
It generates 3 structurally distinct design variants of any component by copying layout patterns from real competitor apps, rebuilding each in your design tokens, rendering them via Playwright, and auto-scoring them to catch boring or broken designs.
How do I install Anti-Slop Design?
Clone the repo, run `bash install.sh` (which copies commands to `~/.claude/commands`), then build your local corpus with `bun run build-refs.ts` and the VLM pipeline. You need macOS/Linux, Bun, Ollama, Claude Code, and ~8 GB free space.
What is greenfield mode?
Greenfield mode (`--greenfield`) generates 3 complete design *directions*—each with its own palette, typography, motion, and layout—grounded in different real competitor apps. Use it when you have no design system yet. Run `pick <n>` to promote the winner into a real `globals.css`, `DESIGN.md`, and config.
What's the 6-dimension anti-slop rubric?
Variants are scored on: slop tells (generic clichés), specificity (distinct from the base), source faithfulness (respects competitor pattern), sibling differentiation (doesn't repeat your other components), reference-page rhyme (fits the competitive context), and token compliance (uses your design system).
Can I use real competitor screenshots?
Yes. The corpus builder scrapes public screenshots from ~281 real apps' marketing sites. You build your own local corpus from these public sources; the repo ships the scraper and app list, not the images themselves.
How does the local lessons store work?
Every time `/design-eval` scores variants, concrete failure modes are appended to a local lessons store. On the next `/design` run, those lessons are retrieved and fed to the subagents as guardrails, so the system gets smarter and harder to fool over time.
Do I need a GPU?
A GPU or Apple Silicon machine makes the embedding step much faster, but it's not required. The skill uses local Ollama models (qwen3-vl for VLM extraction, qwen3-embedding for embeddings), so everything runs offline on your machine.
What design system formats are supported?
You configure Anti-Slop Design via `.claude/design.config.json` (copy from `examples/design.config.example.json`). It accepts tokens, stack (React/Vue/Svelte), icon sets, motion vocabularies, and a dev URL for Playwright rendering.

Glossary

Anti-slop rubric
A 6-dimension scoring framework used to auto-evaluate design variants on slop tells, specificity, source faithfulness, sibling differentiation, reference-page rhyme, and token compliance.
Corpus
A local, private database of ~281 real apps' UI patterns extracted from public screenshots, used for semantic retrieval to seed variant generation. Built once, then queried by `/design` runs.
Design tokens
The core visual properties of your design system (colors, typography, spacing, motion) that are used to rebuild competitor patterns in your own style, ensuring consistency across all generated variants.
Greenfield mode
A variant generation mode for projects with no existing design system, which proposes 3 complete design *directions* (each with its own palette, typography, and motion) rather than just layout variants.
Lessons store
A local log of concrete failure modes from past `/design-eval` runs, automatically retrieved and used as guardrails in future variant generation to improve quality over time.

More in Design Systems

All →
Design Systems

Claude Code Agent Design Kit

AI-powered multi-agent design system generator that creates production-ready UI components, design tokens, and documentation from natural language briefs.

MichelSR25
Design Systems

Claude Code Design Kit

AI-powered multi-agent design system generator that creates production-ready UI components, design tokens, and documentation from natural language descriptions.

MichelSR25
Design Systems

Claude Design Studio Toolkit

AI-powered design co-pilot with responsive UI engine, design tokens, accessibility validation, and multi-agent workflows for code-first design teams.