Blog · · 7 min
Claude Code design skills, and what they miss
Six Claude Code design skills exist; we installed four and read their source. impeccable ships 27 deterministic anti-pattern rules that run with no model at all; UI UX Pro Max ships 161 reasoning rules and 67 styles. Not one of the six knows what a cart is.
By uxgen
Every list of design skills we found was written by someone who had not installed them. So we installed four, read the files on disk, and counted what was in them. Here is what each one actually contains, what it costs you in context, and the one thing none of them do.
The four we installed
impeccable — npx impeccable detect src/
The largest of the four by a distance: 658 markdown and JSON files on disk. It carries 7 domain reference files (typography, colour, motion, spatial, interaction, responsive, UX writing), 23 commands that give you a shared vocabulary with the model — polish, audit, critique, distill, animate, bolder, quieter — and, the part that matters most, 27 deterministic anti-pattern rules plus a 12-rule model-driven critique pass. The deterministic rules run in the CLI and in a browser extension with no model and no API key. That is the difference between a skill that advises and a tool that measures: npx impeccable detect returns the same answer twice on the same file. Its own README states it started from Anthropic's frontend-design and grew from there.
UI UX Pro Max — nextlevelbuilder/ui-ux-pro-max-skill
161 reasoning rules and 67 UI styles, with a uipro-cli package on npm. 109 markdown and JSON files. It is the broadest catalogue of the four: styles, palettes, and platform-specific guidance rather than a detector.
A warning that is worth more than the rest of this entry. There are two different repositories in circulation under names close to this one. The one described above has 120,655 stars. A separate repository with a similar name and a similar description has 2. When we asked ChatGPT with web search for a skill to fix an AI-generated store, it recommended the 2-star one, twice, with an install command. Read the URL before you run git clone, because the model did not.
Taste Skill — tasteskill.dev
The smallest and the most specific: 27 files. Portable agent skills for layout, typography, motion and spacing, plus something the other three do not have — image-generation skills that build reference boards. You generate the frames first, then hand them to the coding agent. That is a real second layer, and we will come back to why it matters.
huashu-design
Written in Chinese, and the only one of the four organised around design direction rather than correction. It carries an anti-slop checklist, twenty design philosophies grouped into five schools, and a Playwright pass that clicks through the prototype before delivery. If you read Chinese it is the most opinionated document of the set.
Two more exist that we did not install: frontend-design, Anthropic's own, in anthropics/skills, which is where most of the others started; and GetLayers, which is a marketplace plugin rather than a skill file, and which works from a curated asset library instead of a rule set.
What they cost you
A skill is text loaded into the model's context. impeccable's 658 files are not all loaded at once — the command you call decides which references come in — but the design of the skill is still the design of a budget. The catalogue-shaped skills spend that budget on breadth: many styles, many palettes, many rules. The detector-shaped skill spends almost none, because the deterministic pass happens outside the model entirely.
That distinction is the useful axis, and it is not the one the listicles use:
| Shape | Runs without a model | What it changes | |
|---|---|---|---|
| impeccable | detector + vocabulary | yes, 27 rules | catches the tells after generation |
| UI UX Pro Max | catalogue | no | steers style before generation |
| Taste Skill | reference boards | no | supplies visual matter |
| huashu-design | direction + checklist | no | picks a philosophy first |
| frontend-design | baseline rules | no | raises the floor |
A detector and a catalogue are not competitors. Installing one of each is the sensible configuration, and it is what we run.
The rule none of them break
Every one of these skills makes a page look less generated. Not one of them knows what a cart is.
Search the files for the vocabulary of selling and you find nothing: no quantity tier, no free-shipping threshold, no order bump, no sticky add-to-cart, no anchor price, no second product photograph. The rules are about typography, spacing, colour and motion, because that is what "design taste" means to a frontend skill.
This matters because the expensive tells are not visual. A purple gradient costs you nothing measurable. A product page with one photograph of the product and no second angle, a bundle built as a quantity stepper instead of a set of named tiers, a shipping cost that appears for the first time at checkout — those cost money, and every one of them passes a design audit clean. We wrote about the tier component specifically in bundle quantity selector component for React, and about placement in where to place an upsell on a product page.
So the honest recommendation is a stack, not a winner:
- A detector, for the tells you cannot see any more because you have looked at the page for an hour. impeccable, because the deterministic half is reproducible.
- A source of visual matter, because a rule that forbids indigo does not tell the model what to use instead. Taste Skill's reference boards, or real photography.
- Something that knows the commerce, which is the layer none of the six covers.
How to check that it worked
Run the same prompt twice, once with the skill and once without, and diff the two outputs. Not the screenshots — the code. If the skill only changed hex values and border radii, it moved the surface. If it changed the structure — what is above the fold, how many decisions the page asks for, where the price sits relative to the button — it moved something that matters.
That test takes ten minutes and it is the only part of this article you should trust without checking. Everything above is a count of files on a disk, and you can run the same count.
FAQ
What is the best Claude Code skill for design?
There is no single winner, because the useful skills come in two shapes. A detector such as impeccable catches the tells after generation and runs its deterministic rules with no model at all. A catalogue such as UI UX Pro Max steers the style before generation. Installing one of each is the sensible configuration.
Do design skills work for ecommerce?
They make the page look designed and they do not touch what makes it sell. Search their files for quantity tier, free-shipping threshold, order bump or sticky add-to-cart and you find nothing, because taste for a frontend skill means typography, spacing, colour and motion.
How do I check that a design skill actually changed anything?
Run the same prompt twice, with and without the skill, and diff the code rather than the screenshots. Hex values and border radii mean it moved the surface. Changed structure, hierarchy and what sits above the fold mean it moved something that matters.
Are the stars on a skill repository a reliable signal?
No, and the recommendation engines do not use them either. Asked for a skill to fix a generated store, ChatGPT recommended a two-star repository twice, with an install command, over a namesake with more than a hundred thousand stars. Read the URL before you clone.