You ask Claude for a landing page and get the same cream background, serif headline and rounded cards everyone else gets. That is what the right claude design skills are for: small instruction packs you install into Claude Code or another coding agent. Claude Design, Anthropic’s separate design product, is a different thing, and this list is not about it.
So where do the picks come from? We scouted the internet for the claude design skills real humans actually rate, reading Hacker News threads, GitHub issues and developer blogs. The good reports and the bad ones both made it in.
Need a skill for a design job no list covers? Create your own Claude skill from screenshots of designs you like, and download it as a ZIP.
The Rundown
- Problem: Your Page Works But Looks AI-Made. Impeccable: point it at pages you already built and fix what looks off.
- Problem: Claude Picks The Same Safe Look Every Time. Frontend Design: get a fresh look for a new page built from a blank brief.
- Problem: One-Prompt Landing Pages Look Templated. Taste Skill: generate a full landing page or portfolio from one short brief.
- Problem: Your Animations Feel Slow And Clumsy. Emil Kowalski’s Skills: sharpen motion, easing and interaction timing across your interface.
- Problem: You Have No Design System To Start From. UI UX Pro Max: generate a first design system for a new site or MVP.
The Best Claude Design Skills, Ranked
Impeccable
Price | Free, Apache-2.0 license |
Install | npx impeccable install, or the Claude Code plugin marketplace |
Platforms | Claude Code, Cursor, Codex CLI, GitHub Copilot, Gemini CLI and more |
Best for | Reviewing and fixing pages you already have |
The problem. The page works and the layout is clean. But something about it reads as generated the second it loads, and you cannot name what.
What it does. Run /impeccable init once per project. Impeccable reads your code, asks who the product is for, and writes PRODUCT.md, which later commands read. Then name a command and a target, like /impeccable critique the pricing cards. critique scores the design against usability heuristics and ranks what to fix first. audit checks accessibility, performance, theming and responsive behaviour, ranked P0 to P3, and /impeccable document writes your visual system to DESIGN.md. A separate detector runs 62 deterministic rules with no LLM and no API key, so npx impeccable detect src/ flags the tells without burning tokens. The README says it works best on interfaces that already exist, and that narrow targets get better results.
What people found
- A developer on Hacker News found it “helpful for critiquing designs, developing a DESIGN.md guide” and iterating on UIs.
- A developer on Hacker News uses Impeccable inside Codex to make up for weaker UI taste. But they say it “still does not quite match the polish and instinct” Claude Code once had.
- GitHub issue 744: an outside tester measured version 4.2.1. When the model reached for the skill, it activated 28 times out of 28, with no false positives in 70 negative attempts. Asking for the existing visual system never triggered it: 0 of 10, while the base model wrote DESIGN.md anyway.
- GitHub issue 740: ESET and Windows Defender flagged the unsigned Windows engine. The maintainer confirmed the file came from their own build and shipped a signed one in CLI 4.0.3, and another user confirmed Defender stopped warning.
- A developer on Hacker News groups it with other design tools and says “They ship someone else’s taste and hand you a 95% website.”
Skip it if the page does not exist yet, since the README says this one is strongest on interfaces already built. And skip it if a binary outside the model’s approval flow is a problem. Impeccable downloads an engine into ~/.impeccable/bin/. Its design hook runs outside approval in Claude Code. Telemetry stays on until you run npx impeccable telemetry off. Live mode can fall back to running the codex or claude CLI with approvals off.
Frontend Design
Price | Free |
Install | Claude Code plugin from the official marketplace, or npx skills add |
Platforms | Claude Code, Claude apps, other agents via npx skills |
Best for | Building a new page from a blank brief |
The problem. You ask Claude for a fresh look and it hands back the one it gave the last three projects. Everything is tidy, and that tidiness is the tell.
What it does. Install it, then ask for a page from a blank brief. Before any code, it writes a short plan: 4 to 6 named hex colours, typefaces, a layout and principles. Frontend Design then checks that plan against your brief and revises anything that reads like a default. The defaults it names include a warm cream background near #F4F1EA with a serif display and a terracotta accent. Another is the kit of identical rounded cards. The skill also asks for responsive layout, visible keyboard focus and reduced motion. Frontend Design is Anthropic’s own skill, rewritten on 3 September 2026. Add it with npx skills add https://github.com/anthropics/skills –skill frontend-design, or the frontend-design plugin in Claude Code’s plugin list. Never installed one? Here is how to add skills to Claude.
What people found
- A developer on Hacker News calls the plugin “solid for web apps” and says an app built with it impressed their wife’s design eye.
- A developer on Hacker News asks for about 5 designs, picks what they like, then asks for a new set based on those preferences.
- A developer on Hacker News says “even adding a simple frontend design skill improves the output substantially”.
- A developer on Hacker News who uses it says “I haven’t yet had it give me something I actually like”.
- A developer on Hacker News calls it “good but only gets you so far” and says it still needs a ton of steering.
- A developer on Hacker News on 28 October 2026 still sees a mix of sans serif and serif italics in titles from /frontend-design.
Skip it if the page is already built and you want it fixed in place. Also skip it if you need a look nobody could trace back to a skill. The repeated title styling reported on 28 October came after the September rewrite. Frontend Design is written for a blank brief, so bring it in at the start of a build, not at the end.
Taste Skill
Price | Free, MIT license |
Install | npx skills add with design-taste-frontend, or the Claude Code plugin |
Platforms | Claude Code, Codex, other agents via npx skills |
Best for | A full landing page or portfolio from one brief |
The problem. You give Claude one prompt and get a landing page that could belong to anyone. Centred hero, three feature cards, a stock photo, and nothing that says who the client is.
What it does. Install it with npx skills add https://github.com/Leonxlnx/taste-skill –skill “design-taste-frontend”, or through the Claude Code plugin. Then type a short brief, say a landing page for a local coffee roaster. Version 2 runs the build in six steps. Taste Skill reads the brief and lists what only this client has. A script deals three of 20 researched directions and the agent picks one. It builds with credited real pictures from open collections. Then it opens the page in a real browser at three widths and fails it on slop. Last, it looks at its own screenshots and fixes the top three problems, up to three rounds. Dashboards and app screens take their own route since v2.1.
What people found
- A developer on Hacker News loads it before generation on their own sites and calls it “preventive rather than detective”, paired with Impeccable’s scanner to check afterwards.
- GitHub issue 86: a user who has been using it as a base says “The v2 rewrite is genuinely strong”. Their complaint is that parts of it assumed a React and Next.js stack. The maintainer says the v2 branch is no longer tied to one framework.
- GitHub issue 106: a user says the agent never follows every rule in the skill and still returns AI-looking pages. Two other users replied that prompting alone cannot enforce a long rule list, and the maintainer pointed to v2’s browser checks.
- GitHub issue 151: a plugin install of v2.1.1 left the main skill unloaded in Claude Code, because a colon in its description broke the YAML frontmatter. The issue is now closed.
Skip it if you want a quick page. A build runs roughly 30 to 45 minutes and a few hundred thousand tokens. Taste Skill also needs Node 22+, an installed Chrome, Edge or Chromium, and network access to find pictures. Wrong call for one component or a fast draft.
Emil Kowalski’s Skills
Price | Free, MIT license |
Install | npx skills@latest add emilkowalski/skills |
Platforms | Claude Code and other agents via npx skills |
Best for | Motion, easing and interaction polish |
The problem. The page looks fine in a screenshot. Then you click it and everything drags. Panels creep open, hovers trail the cursor, and users wait on motion instead of content.
What it does. This is a pack of 16 skills from Emil Kowalski, who built the Sonner toast library and worked at Vercel and Linear. Add them with npx skills@latest add emilkowalski/skills, or pick one via –skill emil-design-eng. Run /review-animations on a component and it reviews every animation strictly against his rules, then lists what to change. The main skill, emil-design-eng, is mostly animation with some design advice. The rest include animate, improve-animations and remove-animations. prototype builds several versions of one UI piece behind a switcher, and break-ui fills your UI with long names and empty lists.
What people found
- Dani Primo of Web Reactiva ran two agents on the same model with the same prompt for a SaaS notification centre. The screenshots looked nearly the same. The timing did not. Without the skill the panel opened with staggered 450 ms animations that ended at 615 ms. With it, one 200 ms open, and closing dropped from 280 ms to 120 ms. Their verdict, translated from Spanish: the skill does not turn the agent into a designer. It also missed white text on pale pink in one button state.
- A developer on Hacker News with 25 years in magazine layout says “Emilkowalski/skills is good too” for typography and design output. They also recommend it for a site whose UI “screams AI”.
- GitHub issue 30: on a Next.js 16 PWA, prototype called one colour variant readable when two text pairs measured 3.05:1 and 2.62:1, which fails WCAG AA. break-ui and mobile-native also assumed they could edit the repo.
- GitHub issue 26: an audit found four checkable errors. One is a toast.getActiveToasts() call that does not exist in Sonner, another is a useSpring snippet that never tracks the mouse.
Skip it if your problem is layout, colour or type hierarchy. Emil Kowalski’s pack is strongest on motion, so the design advice is a side dish. Also skip it if skills must stay read-only, since several of them assume they can edit files.
UI UX Pro Max
Price | Free, MIT license, with a paid Premium tier |
Install | Claude Code plugin marketplace, or npm install -g ui-ux-pro-max-cli then uipro init –ai claude |
Platforms | Claude Code, Cursor, Codex CLI, Gemini CLI, GitHub Copilot and more |
Best for | A first design system for a new site or MVP |
The problem. A new site or an MVP needs colours, type and a page layout, and there is nothing in the repo to build on. So Claude picks each one fresh, and each page can end up looking like a different brand.
What it does. Ask in plain words, for example “Build a landing page for my beauty spa”. A local search script runs over CSV databases of styles, colour palettes, landing page patterns and font pairings, with rules set per industry. UI UX Pro Max returns one design system: a page pattern, a style, five named hex colours, a font pair, anti-patterns to avoid, and a pre-delivery checklist. The spa example in the README comes back as Soft UI Evolution with Cormorant Garamond and Montserrat. A paid Premium tier adds brand identity, logos and image generation; the open-source UI UX Pro Max repository is the basic version.
What people found
- Wilmer Hurtado, a marketing and AI consultant, ran it for three weeks across four client projects. A landing page redesign for an accounting service took about two hours, plus 30 minutes fixing a stock hero photo and testimonials that sat too symmetric. A Figma-to-code flow takes about two days, by their count. On a SaaS dashboard with 18 months of design history it was a constant fight with the existing system. In Spanish, they write that in those cases the skill gets in the way more than it helps.
- GitHub issue 484: an outside tester ran 200 attempts in Claude Code. The skill triggered in 40, and its two reference files holding the full guideline list were never opened once. Passing –stack with –design-system silently dropped the stack. A maintainer confirmed it, and a fix now prints a warning.
- GitHub issue 161: a buyer of the paid Premium tier says their subscription vanished after 7 credits and refund emails went unanswered. A second buyer called it not very useful. A maintainer asked for the email address, then closed the issue for lack of response.
Skip it if the project already has a design system. That is the case where it fights you instead of helping. And skip it if you wanted the brand, logo and image work without paying, since that lives in Premium.
Which Claude Design Skill To Install First
Install Impeccable first. Run /impeccable critique on one component of a page you already have, like the pricing cards. Impeccable drew the most consistent praise, and it is built for work that exists already, so you see results before starting anything new.
Add Frontend Design when you begin a fresh page and need a look that is not the default. Add Emil Kowalski’s skills when the page is up and the motion feels clumsy; for that side of things, see the Claude animation skills roundup.
If AI slop in your copy bothers you as much as AI slop in your layouts, the anti AI slop Claude skills list covers both.
