A curated map of skills, MCP servers and design context that stop Claude Code, Codex, Muse Code, Cursor, Copilot and every other coding agent from shipping AI-slop frontends.
You know the look: a purple-to-blue gradient hero, Inter everywhere, a centered headline over three identical feature cards, untouched shadcn defaults, glassmorphism on everything, emoji instead of icons, and a "dark mode" that's really one big radial blob. Agents default to it because it's the statistical average of the web.
This atlas collects the tools that move agents off that average. There are four kinds:
| Kind | What it changes | |
|---|---|---|
| 🧭 | Skills | What the agent decides: taste, rules, critique loops |
| 🗺️ | Design context | What the agent knows: your tokens, brand and references |
| 🔌 | MCP servers | What the agent can reach: design canvases, real components, real apps |
| 👁️ | Eyes | What the agent can see: screenshots and audits of its own output |
Tip
In a hurry? Start with this stack: one taste skill (Impeccable or Taste Skill), a DESIGN.md in your repo, and Chrome DevTools MCP so the agent screenshots and critiques its own work before it hands the result to you.
- The slop tells
- Anti-slop skills
- Official vendor skills
- Craft, motion & UX-canon skills
- Opinionated styles
- Design lanes inside skill suites
- Design context: DESIGN.md, tokens & guidelines
- MCP: design canvases
- MCP: references, motion & docs
- MCP: component registries
- MCP: eyes on the output
- Agent-native design tools
- Per-agent install notes
- Related lists
- Contributing
Paste this into CLAUDE.md, AGENTS.md, .cursor/rules or your skill of choice. If a design has three or more of these and nobody chose them on purpose, it's slop.
| ✗ The tell | ✓ Do this instead |
|---|---|
| Purple/indigo → blue gradient as the "brand" | Pick one dominant color that fits the product, plus one sharp accent |
| Inter or the system sans for everything | Pair a display face that has character with a readable body face |
| Centered hero → 3 feature cards → testimonials → CTA | Build the layout around the content. Asymmetry is allowed |
Untouched shadcn/ui (zinc, rounded-lg, soft shadow) |
Set your own tokens before you add any components (tweakcn) |
| Glassmorphism, glow blobs, radial "AI dark mode" | Flat surfaces with real contrast. Keep depth for things that need it |
| Emoji as icons | Use one consistent vector icon set, or none |
| Every card has the same padding, radius and shadow | Show hierarchy through spacing, weight and scale, not decoration |
| Fade-up-on-scroll everywhere, 400ms ease-in | Animate one or two meaningful moments, fast, with springs |
| "Unlock the power of…", "Seamless", "Revolutionize" | Say plainly what the product does |
| Vanity visuals (3D globes, fake dashboards, orbs) | Show the real product, or nothing |
Skills whose whole job is to give the agent taste, or to catch and fix output that doesn't have it.
| Taste Skill A family of taste variants (minimalist, brutalist, soft and more) plus redesign audits and image skills. Three tunable dials act like an equalizer on the output. |
 |
|
| UI/UX Pro Max A design-intelligence engine. It reasons about your product and generates a whole design system: style, palette by product category, and font pairings. |
 |
|
| Impeccable A shared design vocabulary: polish, audit, critique, distill, bolder, quieter… Each command loads references on type, color, motion, space, interaction and UX writing. |
 |
|
| Hallmark An anti-AI-slop design skill for Claude Code, Cursor and Codex. It refuses pixel-clones and paid templates. |
 |
|
| interface-design Design engineering with memory: a persistent design-system file, a design-review for hierarchy and typography, and a design-deslop pass that strips generated-UI tells. |
 |
|
 |
anti-slop Rules that stop an agent from producing generic UI, copy and code. |
 |
 |
anti-ui-slop GitHub's Copilot collection skill, with references and agent definitions. It also runs outside Copilot. |
 |
 |
UX-Skill A deterministic anti-slop linter with 152 rules, brand specs and an MCP server. It runs offline and never calls an LLM, so its checks are reproducible. |
 |
 |
avoid-ai-design Audits and scores UI that's already been generated, then rewrites the slop (purple gradients, Inter, default shadcn). The design twin of avoid-ai-writing. |
 |
 |
claude-frontend-skills A Claude Code plugin that pushes toward bold, memorable interfaces and away from generic fonts, gradients and lifeless motion. |
 |
 |
codex-skills Fixes the purple slop that Codex's stock frontend skill produces. |
 |
 |
anti-slop-design Strict rules: a 1-to-3 UX hierarchy, tactile micro-interactions, and a 7-axis quality check before any code is emitted. |
 |
From the teams that build the agents and platforms.
 |
Anthropic · frontend-design The reference skill for distinctive, production-grade UI. It also ships as a Claude Code plugin. |
 |
|
Anthropic · theme-factory & web-artifacts-builder Theme presets you apply on purpose, and a React + Tailwind + shadcn builder for multi-component artifacts. |
|
|
Anthropic · Prompting for frontend aesthetics The cookbook behind the skill: how to steer typography, color, motion and backgrounds away from the median. |
 |
 |
Muse Code · /taste & /grilling Muse Code's bundled /taste is a flat checklist of visual defaults not to use. /grilling asks one decision-forcing question at a time until the design holds up. |
Built in |
 |
Vercel · web-design-guidelines Reviews UI code against Vercel's Web Interface Guidelines and reports findings as file:line. The same repo has react-view-transitions and composition-patterns. |
 |
 |
OpenAI · curated Codex skillsfigma-implement-design, figma-create-design-system-rules, figma-generate-library, playwright and screenshot. Moving to openai/plugins. |
 |
| Google · Stitch skills Agent Skills (open standard) that pair with the Stitch MCP server for design-to-code. |
 |
Not anti-slop filters. These teach the agent the details that separate designed from generated.
| Emil Kowalski · skills Animation and interaction craft from the author of Sonner and Vaul. |
 |
|
| make-interfaces-feel-better The small details that make an interface feel right, not just look right. |
 |
|
 |
design-motion-principles Two modes: build components with purposeful motion, or audit the animations you have. It fixes "fade-up on everything." |
 |
| UI Skills Skills for design engineers, browsable at ui-skills.com. |
 |
|
 |
web-quality-skills Lighthouse and Core Web Vitals skills. Slop is also slow, layout-shifting UI. |
 |
 |
Refactoring UI & friends (wondel.ai) Book-based skills: refactoring-ui, design-everyday-things, hooked-ux, lean-ux, ios-hig-design. |
 |
A committed aesthetic beats a timid average. Pick one on purpose.
 |
Huashu Design HTML-native prototypes, slides and animations, with 20 design philosophies and a 5-dimension review. |
 |
 |
Nothing Design Skill UI in the Nothing design language: monochrome, typographic, industrial. |
 |
| Bencium UX designers Choose a temperament: controlled-ux-designer, innovative-ux-designer or impact-designer, plus design-audit and typography. |
 |
Bigger skill collections whose design tools are worth installing on their own.
 |
gstack Garry Tan's Claude Code setup. Its design lane includes design-consultation, design-shotgun (many directions at once), design-review and plan-design-review. |
 |
 |
wshobson/agents · ui-design A plugin with visual-design-foundations, interaction-design, design-system-patterns, responsive-design and accessibility skills. Works in Claude Code, Codex, Cursor and more. |
 |
Agents fall back to slop when nobody has told them what the brand looks like. These give them that information.
| DESIGN.md A spec for describing a visual identity to agents, so they keep one persistent, structured picture of your design system. |
 |
|
| awesome-design-md DESIGN.md files based on well-known brands' design systems. Add one to your project and the agent matches it. |
 |
|
 |
awesome-claude-design DESIGN.md prompts grouped by aesthetic family, remix recipes and teardowns. |
 |
| Dembrandt Pulls any site's logo, colors, type and borders into tokens with one command. |
 |
|
| tweakcn A visual theme editor for shadcn/ui. The fastest way to get off the default zinc look. |
 |
|
|
Web Interface Guidelines Vercel's rules for building web interfaces. Short enough to paste into a rules file. |
 |
| userinterface.wiki A living manual for better interfaces. |
 |
Let the agent build from a real design, or draw one first, instead of guessing.
| Figma MCP server Official remote and desktop server: frames, variables, components, Code Connect. Usage guide. |
 |
|
| Framelink Figma MCP A community server that trims Figma layout data down to what an agent needs. |
 |
|
| Penpot MCP The official, two-way server for the open-source, self-hostable design tool. |
 |
|
| Paper MCP A design canvas built on real HTML and CSS. Agents create frames, set styles, take screenshots and read JSX or Tailwind for any node. Runs locally through Paper Desktop. |
Desktop app | |
| pen.dev (Pencil) MCP Agents design and read .pen files next to your code. See also pencil-skill. |
Local | |
| Google Stitch MCP Generates UI designs from text and images, then brings screens into your repo. Community CLI: davideast/stitch-mcp. |
Official | |
| Framer external agents A native connection for Claude Code, Cursor and Codex to your Framer canvas, components and CMS. |
Hosted | |
| Canva MCP The official remote server to generate, edit, search and export designs. OAuth, no API key. |
Hosted | |
| Webflow MCP Reads and updates site structure and CMS through the Webflow Data API. |
 |
Real-world references and correct docs, so the agent isn't working from the average.
| Mobbin MCP 600k+ screens from real shipped apps, so the agent references real products instead of the statistical average. Repo. |
Hosted | |
| Motion AI Kit Motion's hosted MCP with up-to-date docs, so animations use real springs and not generic easing. |
Hosted | |
| Context7 Version-correct docs for Tailwind, React and friends, which cuts down on hallucinated or outdated APIs. |
 |
Tested components, so the agent doesn't invent its own.
Warning
A registry makes your UI consistent. It doesn't make it distinctive. Set your own tokens first, or you'll ship default shadcn slop.
| shadcn/ui MCP The official server. Browse, search and install from any shadcn-compatible registry, including your own. |
 |
|
 |
shadcn-ui-mcp-server Component structure and usage context for React, Svelte 5, Vue and React Native. |
 |
| 21st.dev MCP (formerly Magic) Search 10k+ community React/Tailwind components or generate new ones from your editor. |
 |
|
| Magic UI MCP Magic UI's animated components, searchable and installable. |
 |
|
| HeroUI MCP Servers for HeroUI React v3 and HeroUI Native. |
 |
|
| Storybook MCP Shows agents your own components, stories and docs, so they reuse them instead of inventing new patterns. npx storybook add @storybook/addon-mcp. |
 |
An agent that can't see its render can't tell that the render is slop. Close the loop with screenshot → critique → revise.
| Chrome DevTools MCP Drives a live Chrome: screenshots, performance traces, Lighthouse, console and network. |
 |
|
| Playwright MCP Browser automation through accessibility snapshots. Good for checking responsive layouts and flows. |
 |
|
| Browser MCP Controls your real, logged-in browser through an extension. |
 |
Open-source tools built around agents doing design.
| SuperDesign An open-source product design agent inside your IDE. It generates many UI variations side by side before you commit to one. |
 |
|
| Onlook A visual editor for your real React app: design in the browser, and AI writes the code. |
 |
| Agent | Skills live in | MCP config |
|---|---|---|
 Claude Code |
~/.claude/skills/<name>/SKILL.md or .claude/skills/; plugins via /plugin |
claude mcp add |
 Codex CLI |
~/.codex/skills/ or .codex/skills/ |
~/.codex/config.toml |
 Muse Code |
Bundled /taste and /grilling (explicit invocation only) |
See Meta's docs |
 Cursor / Copilot / Gemini CLI / others |
Varies | Varies |
Most skills here follow the open SKILL.md format, so one skill usually works across agents. npx skills installs them into any supported agent:
npx skills add pbakaus/impeccable- VoltAgent/awesome-agent-skills: 1000+ agent skills across agents.
- ComposioHQ/awesome-claude-skills: Claude Skills, with a UI and frontend section.
- travisvn/awesome-claude-skills: Claude Skills and resources.
- github/awesome-copilot: Copilot instructions, agents and skills.
- anthropics/claude-plugins-official: Anthropic's plugin directory.
- maxbogo/awesome-ai-tools-for-ui: AI tools for UI/UX.
PRs are welcome. Read CONTRIBUTING.md. One rule: every entry must say how it fights slop, not just that it's about design.
Logos are each project's site favicon or its GitHub owner avatar. Star badges update live.
CC0 1.0. Public domain, use it however you like.