A frontend skill changes how Claude designs: which typefaces it reaches for, whether it plans before it codes, which generic looks it avoids and what it checks before handing a page over. There are now dozens of Claude design skills. These are the ten worth knowing, ranked by how much they help with everyday frontend work, and four of them run through the same brief so you can see the difference rather than take our word for it.
The short list:
- Frontend Design by Anthropic: the best default for any new page.
- Impeccable by Paul Bakaus: the most complete, and the boldest results.
- Taste Skill by Leonxlnx: strict anti-slop rules for landing pages.
- UI UX Pro Max: a searchable design database.
- Web Design Guidelines by Vercel: a 100-rule interface audit.
- Emil Kowalski's design engineering skills: motion and polish.
- React Best Practices by Vercel: performance rules for React and Next.js.
- Figma: build from a real design file.
- Canvas Design by Anthropic: posters, covers and social graphics.
- Logo Design: brand marks from a brief.
| # | Skill | Best for | Source | Stars* | Install |
|---|---|---|---|---|---|
| 1 | Frontend Design | Distinctive new pages | anthropics/skills | 180k (repo) | skillgild install frontend-design |
| 2 | Impeccable | Building, auditing and polishing whole interfaces | pbakaus/impeccable | 78.6k | skillgild install impeccable |
| 3 | Taste Skill | Landing pages and portfolios | Leonxlnx/taste-skill | 93.8k | skillgild install design-taste-frontend |
| 4 | UI UX Pro Max | A ready-made design system, UX rule lookups | nextlevelbuilder/ui-ux-pro-max-skill | 133.9k | skillgild install ui-ux-pro-max |
| 5 | Web Design Guidelines | Auditing existing UI code | vercel-labs/agent-skills | 32.1k (repo) | skillgild install web-design-guidelines |
| 6 | Emil Kowalski's skills | Animation and interaction polish | emilkowalski/skills | 44.3k | skillgild install emil-design-eng |
| 7 | React Best Practices | Fast React and Next.js front ends | vercel-labs/agent-skills | 32.1k (repo) | skillgild install react-best-practices |
| 8 | Figma | Design-to-code from Figma files | figma/mcp-server-guide | 2.1k | skillgild install figma |
| 9 | Canvas Design | Static visuals: posters, covers | anthropics/skills | 180k (repo) | skillgild install canvas-design |
| 10 | Logo Design | Logos and brand kits | kaankiziltug/logo-design-skill | 2.4k | skillgild install logo-design |
*GitHub stars on 9 October 2026. "(repo)" means the count is for a repository holding many skills. Add --agent claude-code (or codex, cursor, gemini-cli) to any install command, and see how to install Claude Code skills for setup.
One brief, four skills: the test
Rankings are easy to write and hard to trust, so we ran the top four on the same job. The brief asked for a landing page for Ledgerline, a fictional bookkeeping app for freelance designers: hero, three steps, features, one $12 plan, FAQ and footer, in one self-contained HTML file, with no invented testimonials, customer counts, logos or awards. Each skill got its own run, and one run had no skill as a baseline. All five used Claude Code 2.1.278 with Claude Opus 5 on 9 October 2026, with the Skill tool switched off so nothing else installed could interfere. One run per skill means this is an example, not a benchmark: run it again and the pages will differ.
The five heroes at 375 px. The no-skill page's headline runs off the screen.
| No skill | frontend-design | Taste Skill | UI UX Pro Max | Impeccable | |
|---|---|---|---|---|---|
| Direction | Cream and serif | Navy ink, client colours, working demo | Calm grey, ink-blue accent | Glass, trust blue | Swiss departure board |
| All-caps labels | 9 | 0 | 0 | 9 | Board style throughout |
| Spaced em dashes | 10 | 7 | 0 | 10 | 0 |
| Horizontal scroll at 375 px | 16 px | None | None | None | None |
| Detector findings† | 17 | 0 | 3 | 21 | 8 |
| Invented product facts | Yes | Yes | Yes | Yes | No |
| Turns / minutes | 2 / 3.3 | 14 / 5.7 | 13 / 7.1 | 17 / 8.3 | 46 / 23.8 |
| API-equivalent cost | $0.98 | $1.61 | $2.28 | $2.42 | $7.49 |
†Impeccable's anti-pattern detector run on each finished page, leaving out its cramped-padding rule (false positives on calc() padding) and its design-system rules (which only apply to a page with a DESIGN.md). With every rule counted: 21, 5, 6, 27 and 55.
The baseline: the same brief with no skill.
What the test showed:
- A strong model without a skill is already decent. The no-skill page was tidy and accessible. It also landed on exactly the defaults the skills warn about (cream background, serif display, an all-caps pill, a highlighted phrase in the headline), and it was the only page that scrolled sideways on a phone.
- The skills change direction more than quality. Each skill produced a recognisably different page from the same words. frontend-design and Taste Skill removed almost every template tell; Impeccable invented a whole visual world; UI UX Pro Max returned the most conventional SaaS look.
- Only one skill stopped invented facts. Four of five pages added claims nobody gave them: read-only bank connections, supported countries, CSV exports, "no card needed", 30-day data retention. Impeccable instead wrote down what the brief left unstated and kept it off the page. Whatever skill you use, put the real product facts in your brief.
- Better results cost more. Every skill cost more than no skill, from 1.6 times (frontend-design) to 7.6 times (Impeccable).
1. Frontend Design by Anthropic
Anthropic's frontend-design skill is the one most people mean by "the Claude frontend design skill". It is 71 lines of instructions: design from the subject's own world, avoid a named list of looks that generated pages cluster around (cream and serif, black with one acid accent, the SaaS card kit, all-caps eyebrows, A · B · C meta strings), plan a small token system and an ASCII layout before coding, then critique the plan against the brief. It ships in Anthropic's skills repository and as a plugin: /plugin install frontend-design@claude-plugins-official.
frontend-design: the hero is a working tagging demo.
In our test it produced a distinctive page with a working tagging demo in the hero, no all-caps labels, no mobile overflow and zero detector findings, at 1.6 times the cost of no skill. That balance is why it is first. Read the full frontend-design test.
2. Impeccable by Paul Bakaus
Impeccable is a design language rather than a single skill: 24 commands (shape, critique, audit, polish, bolder, quieter, animate, typeset, harden and more), four modes for landing pages, apps, docs and showcases, a deterministic anti-pattern detector, and PRODUCT.md and DESIGN.md files that keep later work consistent. It rolls a seeded concept so it does not land on the same look every time.
Impeccable's departure-board page, top to bottom (no sound). Watch it on skillgild.dev.
It gave us the most memorable page by far, and it was the only run that refused to invent product facts. It was also the slowest and most expensive run, so use single commands such as /impeccable audit for everyday work. Read the full Impeccable test.
3. Taste Skill by Leonxlnx
Taste Skill (install name design-taste-frontend) is the strictest rulebook: a one-line "design read" before code, three dials for layout variance, motion and density, a long list of banned AI tells (it forbids the em dash everywhere) and a 40-item pre-flight check. It targets landing pages, portfolios and redesigns, not dashboards.
Taste Skill: calm, type-led, with its sample data labelled as examples.
Its page was the cleanest and shortest of the five, with zero em dashes and its sample data labelled as examples. It missed two of its own pre-flight checks: a three-line headline and a hero that floats low at 1440 px. Read the full Taste Skill test.
4. UI UX Pro Max by nextlevelbuilder
UI UX Pro Max brings data instead of opinions: 192 palettes, 88 UI styles, 74 font pairings, 119 UX guidelines and more, searched by a local Python script before the agent designs. Ask it for a design system and it returns a pattern, style, palette and type pairing; ask it a narrow question and it returns the matching UX rule.
UI UX Pro Max: the floating confirmation card covers part of a transaction row.
It was strong on accessibility (no overflow, contrast fixed, 44 px targets) and the most conventional visually: glassmorphism and a "trust blue" that the database recommended for a finance product. Its hero also had a floating card covering a transaction. Read the full UI UX Pro Max test.
5. Web Design Guidelines by Vercel
Web Design Guidelines audits UI code against more than 100 interface rules from Vercel: accessibility, focus states, forms, animation, typography, images, performance, navigation state, dark mode, touch targets and internationalisation. It does not design anything; it reviews. That makes it the natural second skill after any of the four above: build with one, then ask Claude to audit the result against Vercel's rules.
6. Emil Kowalski's design engineering skills
Emil Kowalski, known for his work on motion in web interfaces, publishes three skills: design engineering (animation decisions, component polish and the small details that make software feel right), Animate (builds one animation from scratch, choosing the curve, duration and properties) and Apple Design (Apple's spring curves, gesture physics and materials, translated to web code). Use them after the layout is settled, when the page needs to feel finished.
7. React Best Practices by Vercel
React Best Practices is Vercel Engineering's 40-plus performance rules for React and Next.js, prioritised by impact: request waterfalls, bundle size, server-side performance, client data fetching, re-renders and rendering. It is not a visual skill, but slow front ends are bad front ends, and it catches the mistakes agents make most often in React code.
8. Figma by Figma
Figma's official Claude Code plugin bundles the Figma MCP server with skills for implementing a design from a Figma file, extracting design context, and turning a product spec into a FigJam plan. If a designer has already drawn the page, this beats any taste skill: the agent builds what was designed instead of inventing a direction. You need a Figma account and access to the file.
9. Canvas Design by Anthropic
Canvas Design makes static visuals rather than web pages: posters, covers and social graphics composed on an HTML canvas with deliberate typography, grid and colour. Use it for launch images, Open Graph cards and slides that should not look like a template.
10. Logo Design
Logo Design by kaankiziltug takes a brief through discovery, concepts built as clean SVG, tests at 16 px and in one colour, and a checkpoint where it stops until you pick a direction; a full kit with lockups and guidelines follows approval. Run a trademark search before using any mark commercially; a skill's checks do not clear legal use.
How to combine them
You rarely need more than three. A setup that covers most frontend work:
- One direction skill for new pages: Frontend Design for most work, Impeccable when the page must stand out and the budget allows, Taste Skill for landing pages with strict rules.
-
One audit skill for what you build: Web Design Guidelines, or Impeccable's
auditcommand. - One specialist when the job calls for it: Emil Kowalski's skills for motion, React Best Practices for performance, Figma when a design exists.
Two direction skills at once tend to argue: Taste Skill bans what UI UX Pro Max recommends, and frontend-design discourages the accent word Taste Skill allows. Pick one per page.
A brief that works with any of them
Use <skill> to build <page> for <product>.
Product facts (do not add others): <what it does, price, trial, integrations>.
Audience: <who>. The one action: <action>.
Keep: <brand colours, fonts, routes>. Avoid: <looks you dislike>.
Show me the plan (palette, type, layout) before you write code,
then check the page at 375 px and 1440 px.
The product-facts line matters most. In our test it was the difference between a page you could ship and one with claims your product cannot back.
Review the result
| Check | What to look for |
|---|---|
| Does it match the brief? | Audience, the one action, your routes and brand kept |
| Is everything true? | No features, integrations, guarantees or numbers you did not give it |
| Does it work at 375 px? | No sideways scroll, readable type, tap targets of 44 px |
| Is it accessible? | Contrast, visible focus, reduced motion respected |
| Is it yours? | No copied layouts or brand assets; a direction you would defend |
| Can you maintain it? | Tokens and components you understand |
SkillGild also has paid skills for design work in SkillGild Pro, including Pro Preview, which checks interface and chart colours against WCAG contrast ratios with a hosted validator. The ten above are all free to install.
Originally published at skillgild.dev.
Top comments (0)