Best Design Skills for Claude Code, Cursor and Codex

Without one, an agent falls back on the same defaults every time, so apps built with it look alike. A design skill replaces those defaults with decisions.

Anthropic's own frontend-design skill says it plainly: "AI-generated design right now clusters around some traits", and those traits are "defaults rather than choices, and they appear regardless of subject". Among them it lists "the SaaS-card kit: content chopped into identical rounded cards, one border-radius on everything regardless of hierarchy, the same soft grey shadow (rgba(0,0,0,.1)) under each, and gradient washes as decoration".

The options below attack the problem from different sides. Some teach judgement, some hand over a complete design, and some lock down values and components so the agent can't drift.

Five approaches are worth knowing. They work together more often than they compete.

It tells the agent to work like a designer with a point of view, then gives it a process and a list of clichés to avoid. Its description: "Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one."

The skill opens by casting the agent as "the design lead at a design studio known for giving every client a distinct visual identity". It asks for two passes: first a short plan ("describe the core base palette as 4–6 named hex values", the typefaces and their roles, a layout concept and principles), then a review of that plan against the brief, revising anything that reads like a generic default before writing code.

• Typography: "use one family or two, and if two, make them clearly distinct", chosen deliberately rather than by habit.
• Motion: one orchestrated moment, such as a page-load sequence or a reveal, "lands better than scattered effects".
• Restraint: "Spend your boldness in one place."
• Copy: name things by what users understand, and make buttons say exactly what happens ("Save changes," not "Submit").

It lives in the anthropics/skills repository on GitHub, in the example-skills plugin. In Claude Code, add the marketplace with /plugin marketplace add anthropics/skills, then run /plugin install example-skills@anthropic-agent-skills. Because it's a plain SKILL.md folder, you can also copy it into .agents/skills for Codex or .cursor/skills for Cursor.

It teaches taste, not a particular brand. Where your brief sets a direction, the skill defers: "the brief's own words always win".

A design kit gives the agent one complete, real design system instead of general advice. It answers "what should this look like?" with specific values and rules.

Livery builds kits from public websites. It renders the page at desktop, tablet and phone widths, measures the colours, type, spacing, radii, shadows, components and motion actually in use, and writes them up as a skill: SKILL.md, tokens.json with colours by role, rules.md with the principles and reasons, and notes on components, layout and motion. No AI model writes the kit; it comes from the measurements. Fonts, icons and assets are labelled as free to reuse, needing a licence (with a free alternative) or style only.

The kit's SKILL.md also sets the order of work: audit the project, report the gap, ask which areas to apply, then commit one area at a time. In Claude Code a kit installs in one paste; Cursor, Codex and Windsurf use the same unzipped files. Browse ready-made kits in the library, such as Linear, Vercel or Stripe, or paste any public site to build one.

Yes, if you already have a brand or a design system: nobody else can write down your rules. It's a folder with a SKILL.md and a few data files.

1. 1Create .claude/skills/our-design/SKILL.md (or .agents/skills for Codex) with a description that says when to use it: "Apply our design system. Use when building or restyling UI."
2. 2Add tokens.json with colours by role for light and dark, the type scale, spacing, radii, borders and motion.
3. 3Add rules.md: the principles with their reasons, and a short Never list (no gradients, no coloured shadows, no body text under 14px, or whatever yours are).
4. 4Add components.md with recipes for buttons, inputs, cards and navigation, including hover and focus states.
5. 5In SKILL.md, tell the agent to read each file only at the step that needs it, and to ask before editing.

If you'd rather keep it to one file, a DESIGN.md (an open format from Google Labs that mixes tokens and prose) can sit inside the skill folder. The trade-off of writing your own is time: a full system takes days to write and needs keeping up to date as the design changes.

They're the building blocks a design skill works with, not taste on their own. Components and tokens keep the agent consistent; a skill tells it what to aim for.

shadcn/ui describes itself as "Composable, accessible components with thoughtful defaults" and is MIT licensed. Its registry lets you distribute "custom components, hooks, pages, config, rules and other files" through the shadcn CLI, so your own styled components install into any project. Its MCP server lets assistants "browse, search, and install components from registries"; the docs give set-up for Claude Code, Cursor, VS Code with GitHub Copilot, and Codex.

pnpm dlx shadcn@latest mcp init --client claude

Tailwind CSS v4 stores tokens as theme variables: "special CSS variables defined using the @theme directive that influence which utility classes exist in your project." That makes them a strong guardrail. Clear a namespace and define only your values, and the agent can't reach for a colour outside your palette, because the utility class doesn't exist.

@import "tailwindcss";

@theme {
  --color-*: initial;
  --color-background: #ffffff;
  --color-text: #151513;
  --color-accent: #0d7268;
  --radius-card: 14px;
}

Pick by what's missing. If the agent has no sense of design, add judgement; if it has no specific design, add a system; if it drifts, add guardrails.

• Starting from nothing, no brand: Anthropic's frontend-design skill.
• You want the feel of a site you admire, or to match your own existing site: a measured kit from Livery.
• You have a brand book or design system: write your own skill, or turn it into a DESIGN.md inside one.
• Your components keep coming out different: a shadcn/ui registry of your own components.
• The agent keeps inventing colours and sizes: Tailwind @theme with the defaults cleared.

These stack well. A common setup is a design kit or your own skill for the system, Tailwind tokens to enforce its values, and shared components for the pieces you use most.