Best design and UI skills for Claude Code in 2026

We started from the top of the design category sorted by installs, then read each SKILL.md and the file tree. A skill made the list if it does something a designer would recognise as a real rule, if the repository was updated within the last month, and if we could describe the catch honestly.

One repository, leonxlnx/taste-skill, holds thirteen skills and three of our picks. That is not favouritism: they are the only design skills that hand the agent exact values instead of adjectives. We limited it to three so the list is not one author's catalogue.

What it does: before writing any UI, the agent commits to an aesthetic direction, a type pairing and a colour system, and then builds to that decision. About 850K installs, 173.6K stars, updated 2026-09-03, two files, no scripts, 9.4 KB.

When to use it: any new screen or component where you have not already got a design system. The catch: it is opinionated toward distinctive, editorial layouts, so on a corporate dashboard you may need to say "restrained" explicitly or it will reach for display type.

npx skills add anthropics/skills@frontend-design -g -y

What it does: reviews existing UI code against Vercel's Web Interface Guidelines and reports violations with file and line. About 604K installs, 30.8K stars, updated 2026-08-28, one file, 1.2 KB.

When to use it: right before you call a page finished. The catch: the SKILL.md is tiny because it tells the agent to fetch the current rule list from the repository each time, so it needs network access and its behaviour can change without a reinstall.

npx skills add vercel-labs/agent-skills@web-design-guidelines -g -y

What it does: reads the brief, infers a direction, and runs a pre-flight checklist that rejects the centred hero, the purple gradient and the three identical cards. About 439K installs, 84K stars, updated 2026-08-24, one file.

When to use it: landing pages, portfolios and redesigns where looking generic is the failure. The catch: the SKILL.md is 87 KB, roughly 22,000 tokens, loaded in full every time it triggers. Install it for the project that needs it rather than globally.

npx skills add leonxlnx/taste-skill@design-taste-frontend -y

What it does: a lookup system for styles, palettes, font pairings and UX rules, with a search script the agent runs to pull recommendations for a given product type. About 343K installs, 124.6K stars, updated 2026-09-03, 72 files, contains scripts, 16 KB.

When to use it: when you want defensible choices from a catalogue, for example a fintech palette or a SaaS pricing layout. The catch: it contains scripts, so read them before installing, and its output is only as good as the catalogue, which favours conventional patterns.

npx skills add nextlevelbuilder/ui-ux-pro-max-skill@ui-ux-pro-max -g -y

high-end-visual-design names the exact fonts, spacing steps, shadow recipes and card structures that make a site feel expensive. About 326K installs, 10.6 KB, updated 2026-08-24. Use it when the brief says premium and the agent keeps producing default Tailwind. The catch: it prescribes one taste; if your brand is playful it will fight you.

redesign-existing-projects is the pair for code you already have. It audits the current design, names the generic patterns, and applies upgrades without touching behaviour. About 322K installs, 15 KB. Use it on a working app that looks dated. The catch: it assumes the agent can run and see the app; on a backend-only repo it has nothing to audit.

npx skills add leonxlnx/taste-skill@redesign-existing-projects -y

What it does: a set of named design operations (polish, critique, distill, harden, adapt, animate, colorize) the agent applies to a screen, backed by reference documents for each. About 261K installs, 65.3K stars, updated 2026-09-03, 163 files, contains scripts, 10.9 KB entry file.

When to use it: iterating on a screen that exists, one operation at a time. The catch: our crawl found sixteen copies of the same SKILL.md inside the repository, which is why impeccable appears many times in search results; install the plain one. It also ships scripts.

npx skills add pbakaus/impeccable@impeccable -g -y

What it does: encodes Emil Kowalski's judgement on component polish, when to animate, and the small details (focus rings, optical alignment, loading states) that separate good software from adequate software. About 248K installs, 35K stars, updated 2026-08-21, 27 KB.

When to use it: building buttons, inputs, dialogs and other components rather than whole pages. The catch: at 27 KB it is a long read for the agent, and it is React-flavoured; in Vue or Svelte the principles hold but the examples do not.

npx skills add emilkowalski/skills@emil-design-eng -g -y

brainstorming from obra/superpowers has about 350K installs and carries the design tag, but it is a general planning skill; it appears here because of how our tagger reads the word "components". minimalist-ui, industrial-brutalist-ui and gpt-taste (each around 280K to 300K installs) are style presets from the same taste-skill repository; pick one only if that specific look is the brief. stitch-design-taste is for Google Stitch, brandkit and image-to-code generate images rather than interfaces.

Install one generator and one reviewer, not five generators. A sensible global set is frontend-design plus web-design-guidelines plus emil-design-eng. Add design-taste-frontend per project when a landing page is the job, and redesign-existing-projects when the job is an old app. Two generators with opposite taste will both answer "build a hero section" and fight.