12 Best Design Agent Skills for Claude, ChatGPT & Cursor (2026)

The best design agent skills in 2026 are portable SKILL.md packages that raise UI quality in Claude, ChatGPT / Codex, Cursor, Gemini, Kimi, and GLM — not one-off prompts. Prioritize taste and anti-slop skills, then typography, landing/pricing layouts, motion, and accessibility. Pair any skill with a template from the Agent's Design gallery so tokens and composition are fixed before the model writes code.

How we picked these skills

We scored skills for:

Trigger quality — clear description so agents actually load them
Craft specificity — concrete layout/type bans, not "make it pretty"
Portability — works across Claude Code, Cursor, ChatGPT/Codex, and open models like Kimi or GLM
Demoability — visible before/after or gallery proof when available (/skills)
Complementarity — plays well with DESIGN.md and UI templates

This is a practical shortlist for vibe coders and product teams — not a claim that every registry skill is equal.

Quick comparison

Skill type	Job	Install first if…
Taste / anti-slop	Kill generic AI UI	Your heroes look like every other SaaS
Landing / pricing	Section recipes	You ship marketing pages weekly
Typography	Hierarchy and rhythm	Type is the weak link
Motion	Animation discipline	Agents over-animate everything
Accessibility	Inclusive defaults	You ship public product UI
Systems	Tokens + components	Multi-page apps need consistency

1. Taste / anti-slop skills (start here)

What they do: Encode aesthetic judgment — composition rules, banned patterns, and "same prompt, better result" craft.

Why they rank #1: Claude, ChatGPT, Kimi, and GLM all share the same failure mode: median internet UI. Taste skills attack that prior directly.

Look for: Explicit bans (no purple gradients, no Inter-by-default, no icon-card grids), section scoping, and DESIGN.md hooks.

Try: Browse taste skills with live compare demos on /skills. See also taste skills for anti-slop UI.

2. Baseline / frontend design skills

What they do: General frontend craft — spacing, hierarchy, component hygiene — for everyday UI work.

Best for: Product surfaces inside the app, not only marketing pages.

Model note: Strong on Claude and Cursor Composer when @-referencing real component files; still helps ChatGPT and Codex when the skill forces existing primitives.

3. Landing page skills

What they do: Prescribe hero structure, proof strips, feature layouts, and CTA discipline.

Best for: Launch pages, waitlists, and SaaS marketing sites.

Pair with: Landing templates for Cursor and Claude plus a gallery DESIGN.md so Kimi or GLM do not invent a new brand per section.

4. Pricing page skills

What they do: Three-tier tables, highlight rules, toggle UX, and mobile stacking.

Best for: Monetization pages where layout mistakes kill conversion clarity.

Tip: Keep pricing copy in your brief; let the skill own structure. Works the same whether you run Claude Code or ChatGPT.

5. Typography skills

What they do: Lock type scales, pairing rules, measure, and tracking — so agents stop defaulting to Inter + random sizes.

Best for: Editorial landings, portfolios, and brand-forward sites.

Model note: Open models (Kimi, GLM) and closed ones (Claude, ChatGPT) both improve when type is non-negotiable in the skill body.

6. Color system skills

What they do: Role-based palettes (background, surface, accent, muted), contrast checks, and "accent for CTAs only" rules.

Best for: Teams without a designer on every PR.

Pair with: Token tables inside DESIGN.md from the gallery.

7. Motion / animation skills

What they do: Duration caps, reduced-motion support, and "animate meaning not decoration."

Best for: Marketing sites that currently bounce, pulse, and blur everything.

Watch out: Motion skills without performance notes can still produce heavy pages — prefer skills that mention prefers-reduced-motion.

8. Accessibility skills

What they do: Focus order, labels, contrast, and remediation checklists.

Best for: Production apps used by real customers.

Reality check: An a11y skill will not replace human QA, but it stops Claude and Cursor from shipping unlabeled icons by default.

9. Redesign / polish skills

What they do: Improve an existing screen instead of greenfield generation — quieter, bolder, distill, polish patterns.

Best for: "This page works but looks AI" follow-ups in Cursor or Claude Code.

10. Image-to-code / visual reference skills

What they do: Force agents to treat images or comps as source of truth before writing markup.

Best for: Designers handing Claude, ChatGPT, or Cursor a mock; founders cloning a reference layout carefully.

Pair with: Figma-to-code vibe coding workflows and gallery inspiration.

11. Framework-specific UI skills (Next.js, etc.)

What they do: Align UI generation with App Router, server components, or Vue/Nuxt conventions.

Best for: Teams that already chose a stack and want skills that respect it.

Model note: ChatGPT and Codex are fine here when the skill names exact file paths; Claude and Cursor shine when the skill can explore the repo.

12. Design system / component architecture skills

What they do: Push agents toward primitives, tokens, and composition — not one-off styled divs.

Best for: Multi-page products where vibe coding must stay coherent.

Pair with: Design systems in the agent coding era.

Suggested starter stack (2026)

Install a small set and stop collecting:

One taste skill — primary anti-slop prior
One landing (or pricing) skill — if you ship marketing UI
One typography or color skill — if brand is type/color led
DESIGN.md + template from Agent's Design — visual source of truth
Optional a11y skill — before public launch

That stack runs on Claude, ChatGPT, Cursor, Codex, Gemini, Kimi, and GLM because skills are files, not vendor lock-in.

How to use these skills without fighting the model

One craft skill at a time for UI generation — overlapping taste skills conflict
Invoke explicitly (/skill-name or @skill) when auto-trigger fails
Scope sections — "hero only" beats "build the whole site"
Name the model in your brief only when needed — "Use Claude's plan, then Cursor to apply" — the skill body should stay model-agnostic
Compare output — same prompt with skill off vs on; keep the skill if the delta is obvious

Where to browse and install

Agent's Design Skills — design-focused explorer with demos
Design Skills Directory — dedicated skills host
Vendor registries / skills.sh-style indexes for broader non-design skills