anti-slop-design

A Claude Code slash-command suite that generates 3 structurally distinct design variants of any component — each adopting a real competitor's layout pattern, rebuilt entirely from your design system's tokens/fonts/motion/icons. Variants are rendered via Playwright and auto-scored on a 6-dimension anti-slop rubric. A local lessons store compounds: every failure mode feeds the next run.

Built on a local, private corpus of ~281 real apps (Apple/Linear/Stripe/Whoop/…) you build yourself from public marketing assets — no cloud, no API keys, your screenshots never leave your machine.

Example

Dogfooded on this project's own landing hero (the page above). One Hero.tsx, run through /design, produced four structurally distinct variants — a centered manifesto (nozomio), a command-first hero with agent tabs (agentsearch), a full terminal-session takeover, and a fusion — each a different composition built from the same dark-terminal design tokens, then rendered via Playwright:

The landing app itself lives in site/, with the four generated variants alongside the base in site/src/components/.

Greenfield mode — --greenfield

The example above keeps the design system fixed and varies composition. On a project with no design system yet, that just rearranges the same pieces — so --greenfield flips it: it proposes 3 whole design directions, each with its own palette, type, motion, and layout, grounded in a different real reference. Here it is on a different component — a GitHub profile header — with three directions seeded from Ghostty (a centered terminal window), Nozomio (an ASCII figlet wordmark), and Charm (a warm, tag-pill TUI). pick <n> then promotes the winner into a real globals.css + DESIGN.md + config.

What's in the box

• /design <component> — generate + render + auto-eval 3 variants
• /design --greenfield <component> [--refs url1,url2] — for projects with no design system yet: generates 3 whole design directions (each its own corpus-grounded token system + layout), renders them in isolation, and pick <n> promotes the winner into a real globals.css + DESIGN.md + config. --refs anchor directions to real sites and add them to your corpus for future runs.
• /design-eval — score variants, append lessons (auto-run by /design)
• /calibrate-motion — audit your motion vocab vs. your vertical
• /motion-pass <path> — add motion to a component/page without touching structure
• /distill-lessons — promote recurring failures into the /design guardrails

Requirements

macOS (or Linux), Bun, Ollama, Claude Code, ~8 GB free for the corpus. A GPU/Apple-Silicon machine makes the embed step much faster.

Install

git clone https://github.com/mbeato/anti-slop-design && cd anti-slop-design
bash install.sh          # copies commands → ~/.claude/commands, builder → ~/.claude/design-corpus

Then add the Playwright MCP server to Claude Code (chrome-devtools optional as a fallback). Only /design needs a browser MCP; the other four commands run on Read/Write/Bash/Grep + Bun.

Build your corpus (run once)

brew install ollama && ollama serve &
ollama pull qwen3-vl:8b-instruct-q8_0
ollama pull qwen3-embedding:0.6b
cd ~/.claude/design-corpus/scripts
bun install && bunx playwright install chromium
bun run build-refs.ts            # scrapes ~281 apps' public screenshots → refs/
bun run describe-and-embed-v2.ts # VLM extracts + embeds UI patterns → v2/patterns.json
bun run aggregate-app-dna.ts     # per-app design DNA for stage-1 retrieval → v2/apps.json
bun run sparse-build.ts          # BM25 sparse index over patterns → v2/sparse.json
bun run query-v2.ts "a clean analytics dashboard" --k=5   # verify retrieval works

This reproduces a corpus functionally identical to the author's — same app list, same models. The repo ships the scraper and the app list, not the scraped bytes: you build your own local corpus from public sources. See NOTICE for the third-party-content disclaimer.

Configure a project

Drop .claude/design.config.json at your project root (copy examples/design.config.example.json, set your tokens/stack/icons/corpusTags/dev URL). Schema: docs/config-schema.md.

Use

cd your-project
/design src/components/Leaderboard.tsx

How it works

/design reads your per-project config, runs a semantic + tag-filtered retrieval over your local corpus (expand → multi-query → RRF merge → MMR rerank), picks 3 structurally orthogonal competitor patterns, and dispatches parallel subagents to rebuild your component in each pattern using only your design system. It renders all variants via Playwright, then /design-eval scores them on six dimensions — slop tells, specificity, source faithfulness, sibling differentiation, reference-page rhyme, and token compliance — and appends concrete failure modes to a local lessons store. Those lessons are retrieved on the next /design run, so the system gets harder to fool over time.

Retrieval paths

• v2 hybrid (default): v2/patterns.json + v2/apps.json + v2/sparse.json, queried by query-v2.ts via two-stage retrieval — app-level cosine to narrow the field, then pattern-level hybrid dense + BM25 fused with Reciprocal Rank Fusion. This is what pipeline.ts (and therefore /design) calls, and what the build above produces.
• v1 dense (lighter alternative): embeddings.json + query.ts — single-stage dense cosine over whole-screenshot embeddings. Build it with bun run describe-and-embed.ts if you want the smaller/faster index; not required for /design.

License

Code is MIT (see LICENSE). The repo ships no third-party assets — see NOTICE.