31 August 2026
Claude Code design skills: the 8 worth installing in 2026
The best Claude Code design skill setup in 2026 is a layered one: Anthropic's official frontend-design skill (or the new /design artboard skill) for process, one community skill like Impeccable or ui-ux-pro-max for reference material, and a concrete design system file so Claude has real tokens to aim at. No single skill does all three jobs, which is why every "top skills" list disagrees about the winner.
Skills went from niche to default fast. Anthropic ships design skills in the official claude-code repo, Claude Academy teaches them as the way to "elevate Claude's design", and directories like typeui.sh now list 90 design skills for Claude, Codex, and Cursor. This post sorts the ones worth your time, what each actually does, and the layer none of them cover.
Why design skills matter for Claude Code
Claude's default UI output is generic by design. Without direction it reaches for the same safe choices every model makes: default font stacks, purple gradients, rounded-everything. A skill front-loads the direction so you stop re-prompting taste. Anthropic's own frontend-design skill warns that even motion can backfire: "sometimes less is more, and extra animation contributes to the feeling that the design is AI-generated."
Skills persist across sessions. A skill is a markdown file Claude Code loads when relevant (official docs). Write the design direction once and every future session starts with it, instead of describing "clean and modern" for the hundredth time.
They automate the checkable parts. As Snyk's review of UI/UX skills puts it: "AI handles the repetitive work (generating responsive variants, checking contrast ratios, scaffolding component boilerplate, auditing against checklists) so the human can spend more time on the decisions that actually matter."
They are free and inspectable. Nearly everything on this list is a public repo or a free download. You can read exactly what instructions Claude receives.
1. frontend-design (Anthropic, official)
The place to start: Anthropic's own frontend-design skill, shipped as a plugin in the official claude-code repo.
What it does:
- Describes itself as "guidance for distinctive, intentional visual design when building new UI or reshaping an existing one"
- Forces an aesthetic commitment before Claude writes CSS: purpose, tone, typography, color
- Bans the recognizable AI defaults by name, including the "warm cream background with a terracotta accent" cliché
- Pushes for "one real aesthetic risk you can justify", grounded in the subject matter
- Tells Claude to use motion deliberately and warns that extra animation reads as AI-generated
Best for: everyone; it is the baseline the community skills build on.
Why it makes the list: it is official, maintained in the claude-code repo, and it targets exactly the failure mode people complain about. It appears at or near the top of every third-party ranking, including Composio's top 10 and Snyk's top 8.
Tip: frontend-design supplies process, not your product's values. Pair it with a DESIGN.md that pins the palette, type scale, and spacing (more on that in the workflow section).
2. /design (Anthropic, research preview)
The newest entry, and the biggest shift: the official /design skill shipped in Claude Code v2.1.234 during the week of August 17 to 21, 2026 (release notes).
What it does:
- Brings the Claude Design artboard workflow into the CLI and Claude Code Desktop, built on artifacts
- Per the release notes: "Run it with a brief and Claude publishes a canvas of editable artboards for your UI. Pick one, tweak it, then have Claude implement it."
- Generates multiple visual directions at once instead of one guess
- Lets you edit an artboard before Claude writes the implementation
Best for: exploring visual directions before committing to code; teams that want a review step between prompt and implementation.
Why it makes the list: it is a research preview, but it is official, available on Pro, Max, Team, and Enterprise plans, and it turns design from a text-only negotiation into pick-and-edit. Reddit's designer verdict on the underlying Claude Design product has been consistent since launch: a fast prototyping tool, not a replacement for a real visual language (see the r/UXDesign discussion).
3. Impeccable
The community skill Reddit compares everything else against, in threads like "Best UX/UI skill for Claude code? Impeccable vs ux/ui pro max vs others" (r/UXDesign).
What it does:
- Runs in brand and product modes with 23 commands, per Composio's review
- Ships "27 deterministic anti-pattern detection rules" that catch the vibecoded tells mechanically
- Covers the full pass: layout, typography, color, states, motion
- Works as a review layer over code Claude already wrote, not only generation
Best for: developers who want an opinionated all-in-one and are happy to adopt its process wholesale.
Why it makes the list: deterministic rules are the differentiator. Vibes-based review skills drift; a rule either fires or it does not.
4. ui-ux-pro-max
The other name in every comparison thread: ui-ux-pro-max on GitHub.
What it does:
- A searchable design database rather than a single opinion: 50 styles, 97 palettes, and 9 tech stacks per Snyk's writeup
- Covers web and mobile stacks (React, Next.js, Tailwind, shadcn/ui, SwiftUI, Flutter and more)
- Includes UX guidelines and chart guidance for dashboard work
- You name a style ("glassmorphism", "brutalism") and it supplies the implementation rules
Best for: builders who want breadth: many styles on tap instead of one strong default.
Why it makes the list: it is the most-installed community design skill and half of the "Impeccable vs ux/ui pro max" debate. The breadth is also its weakness: a database of 50 styles still cannot tell you which one is yours.
5. web-design-guidelines (Vercel)
Vercel maintains agent-skills, a set of skills that work in Claude Code and other agents.
What it does:
- Audits UI code against 100+ accessibility and UX best-practice rules, per Snyk's review
- Sibling skills cover React best practices (57 performance rules) and composition patterns
- Runs as a review pass on existing code: paste a component, get violations
- Maintained by a vendor with production stakes in the output
Best for: the correctness layer: accessibility, semantics, and performance rather than aesthetics.
Why it makes the list: taste skills do not check contrast ratios or focus states. This one does, and it is the piece most vibecoded UIs are missing when they ship.
6. The designer collections (48 to 63 skills)
Individual designers publishing full skill collections became a genre of its own in 2026.
What they do:
- Designer Marie Claire Dean published 63 design skills free, built on a clear thesis: "Claude doesn't need paragraphs of theory. It needs clear frameworks, decision criteria, and an understanding of when to apply what."
- A r/ClaudeAI thread shares "a list of 48 design skill files with custom styles", the author's own daily-use collection
- Composio's top-10 list includes a 63-skill designer collection spanning research, systems, strategy, and UI workflows across 8 plugins
- Collections split design into small, single-purpose skills instead of one monolith
Best for: designers who want Claude to follow a real design process, not just style output.
Why they make the list: they encode working-designer judgment, and they are free. The catch is curation: 63 skills is a library, and you still have to know which ones your project needs.
7. The design-process pack (Julian Oczkowski)
A different philosophy: fewer skills, ordered like an actual project. Covered in "7 Claude Code Design Skills That Follow a Real Design Process".
What it does:
- Seven skills that mirror a professional workflow: requirements, design brief, information architecture, design tokens, decomposition, generation, review
- Makes Claude do the thinking steps (brief, IA) before any pixels
- Produces design tokens as an explicit intermediate artifact
- Ends with a review skill instead of shipping the first render
Best for: solo builders who skip process and then wonder why the UI drifts.
Why it makes the list: it is the only popular skill set where tokens are a first-class step. Composio's verdict on why that matters: "theme tokens are foundational. A system without them is just a mood board."
8. Your design system as a skill (the Figma play)
The most product-specific option: write a skill that contains your own design system. Figma published a guide on exactly this: How to create a skill in Claude Code for your design system, aimed at keeping "AI outputs consistent with your team's tokens and components."
What it does:
- Packages your tokens, components, and usage rules into a skill Claude loads automatically
- Turns design review from "does this look right" into "does this match the file"
- Scales across a team: everyone's Claude ships the same system
- Pairs with Figma's design-system tooling if your source of truth lives there
Best for: teams with an existing design system who want AI output to respect it.
Why it makes the list: it is the correct end state. Every other skill on this list improves Claude's general taste; this one makes Claude build your product. The only problem: most projects do not have a written design system to package, which is where the next section comes in.
The layer every skill list misses
Look at what the eight entries above have in common: process, reference material, and review rules. What none of them contain is your product's actual values. A skill can tell Claude to "commit to an aesthetic" and "avoid default font stacks"; it cannot know that your background is #FAFAF9, your type scale runs 1.25, and your buttons never use pure black.
That is a design contract, and the fastest way to get one is to not write it from scratch:
- Browse the duply library of 250+ extracted design systems from real products (Linear, Stripe, Vercel, Notion and more).
- Pick the system closest to what you want: Linear's for dense product UI, Stripe's for marketing polish, Notion's for calm document surfaces.
- Drop the DESIGN.md in your repo root. Claude Code reads it alongside whatever skill you installed: the skill supplies process, the DESIGN.md supplies the target.
- Build. When output drifts, point Claude back at the file instead of re-describing the aesthetic.
The full workflow is in give your AI agent a real design system.
FAQ
What is a Claude Code design skill? A markdown file (SKILL.md) with instructions Claude Code loads when it detects relevant work, per Anthropic's skills documentation. Design skills carry instructions for visual work: typography rules, color guidance, anti-patterns to avoid, and process steps to follow before writing UI code.
What is the best Claude Code design skill? A stack, not a single pick: Anthropic's official frontend-design skill for process, one community skill (Impeccable for deterministic review rules, ui-ux-pro-max for style breadth) for reference, and a DESIGN.md file with your actual tokens for values. The Reddit comparison threads keep ending at the same place: the skill gives Claude a method, not a target.
What is the difference between frontend-design and /design?
frontend-design is a text skill: guidance Claude follows while writing UI code. /design is an artboard workflow shipped in August 2026 (research preview): Claude publishes a canvas of editable artboards, you pick one, and Claude implements it. frontend-design shapes how Claude codes; /design adds a visual review step before coding.
How do I install a Claude Code design skill?
Official plugin skills install from the claude-code repo's plugin marketplace; community skills install by cloning the repo into .claude/skills/ in your project (or ~/.claude/skills/ globally). Each skill's README carries the exact path. Skills are plain markdown, so installation is copying a folder.
Do Claude Code design skills work in Codex or Cursor? The skill format is Claude Code's, but the content is portable markdown, and cross-tool directories like typeui.sh list skills "to give Claude, Codex, Cursor, and other AI coding tools a consistent visual direction". Composio's list explicitly pairs Anthropic's frontend-design with OpenAI's frontend-skill equivalent for Codex.
Are Claude Code design skills free?
Everything on this list is free: Anthropic's skills are open source in the claude-code repo, Vercel's agent-skills and ui-ux-pro-max are public GitHub repos, and the designer collections are free downloads. /design requires a paid Claude plan (Pro, Max, Team, or Enterprise) because it runs on artifacts.
Why does my UI still look AI-generated with a design skill installed? Because skills supply process and general taste, not specific values. "Avoid default fonts" still leaves a thousand choices open, and Claude fills them with statistically safe answers. The fix is a concrete design system in the context: exact tokens, a named type scale, spacing rules, and do's and don'ts. That is the DESIGN.md layer.
Can I turn my existing design system into a skill? Yes, and Figma's guide covers the manual route. If your system only exists in your product (not in docs), extraction is the shortcut: a DESIGN.md file captures the tokens and rules from the shipped UI, which you can then reference from a skill or drop directly in the repo.
Summary
- frontend-design (Anthropic) as the official baseline: aesthetic commitment before code
- /design (Anthropic) for artboard exploration before implementation (research preview, paid plans)
- Impeccable for deterministic anti-pattern review (27 rules, 23 commands)
- ui-ux-pro-max for style breadth (50 styles, 97 palettes, 9 stacks)
- web-design-guidelines (Vercel) for the accessibility and UX correctness pass
- Designer collections (48 to 63 skills) for encoded design-process judgment
- Design-process pack for tokens-first, brief-to-review workflow
- Your system as a skill as the end state, with extraction as the shortcut to get there
Skills give Claude a method. Give it a target too: browse 250+ extracted design systems in the duply library and ship the DESIGN.md with your next project.