Claude Design Skills Tested: Frontend Design, Taste Skill and 6 More

Summary

Installing skills in Claude Code is getting popular. Design skills are especially popular: the top few on the leaderboard have hundreds of thousands of installs each.

I was curious. Once you install one, how different does the page actually get?

So I ran a test. I took the 8 most installed design skills, asked Claude to build the same web page with each one, and added a run with no skill at all as the control.

Want to guess the result?

Three of the skills produced pages that look almost the same as the control. One of them has 424,000 installs.

My advice: if you install only one, make it Anthropic’s own frontend-design, or taste-skill. The reason is simple. On both briefs, they were the only two whose pages clearly moved away from the no-skill version every time.

How we tested

All 8 skills come from the skills.sh all-time install leaderboard, and each one designs a whole page. I left out animation helpers and component libraries, because they do a different job.

There were two briefs.

1. A landing page for Tidewater, a surf forecast app: hero, three features, three steps, pricing, FAQ and footer.
2. A portfolio for Mira Okafor, a ceramic artist in Lisbon: introduction, a grid of eight works with a detail view, a process statement, exhibitions, and a commission form.

Every run followed the same rules.

• The model was Claude Haiku, run with claude -p. The whole test cost about $0.90.
• Each run had its own empty folder, with only the skill under test in .claude/skills/.
• Claude could read and write files, and nothing else: no shell, no web. These are instructions written by strangers, and I did not want them running commands on my machine.
• The output was one index.html, with no external images or fonts.
• The control run had no skill and the same brief.

There is a question people often skip here: how do you know the skill was actually used?

I kept a full log of every run and checked which files Claude read. Every skill run read its own SKILL.md, and most also read the reference files it points to. The control read nothing. All nine runs also built the portfolio’s detail view and form. So the differences below are about design, with the features held equal.

Results

The landing page first. Desktop, first screen, one run each.

Then the portfolio.

And the landing page at phone width.

Here is what each skill did. Installs are from skills.sh on October 30, 2026; cost is the Haiku bill for one run of each brief.

Skill	Installs	Cost in USD (landing / portfolio)	What changed
No skill (control)		0.02 / 0.02	A competent default: phone mockup hero, soft gradients, cream and serif for the portfolio
frontend-design (Anthropic)	1.05M	0.03 / 0.04	A tide chart instead of a phone in the hero, serif type, a dark kiln section in the portfolio. Distinct both times
taste-skill	702k	0.04 / 0.09	The boldest layouts: huge type, editorial grids, works shown at different sizes. Read four reference files
ui-ux-pro-max	424k	0.03 / 0.03	Close to the control both times, down to a phone mockup with a conditions score in the hero
emil-design-eng	400k	0.02 / 0.03	Warmer palette and an italic accent; layout much like the control
impeccable	372k	0.07 / 0.04	Dark navy and yellow on the landing page, a calm sculptural vessel on the portfolio
hallmark	79k	0.25 / 0.07	Water texture and a tide timetable; a cool gray palette on the portfolio. Read 15 files on the first brief
make-interfaces-feel-better	74k	0.03 / 0.04	Polished details on a layout close to the control
frontend-ui-engineering	71k	0.02 / 0.04	The landing hero chart rendered as black blobs; the portfolio was fine and close to the control

What do you make of this table?

I noticed one pattern. The skills that ship reference files, such as taste-skill, impeccable and hallmark, read those files and moved further from the default. The skills that are a single page of principles mostly polished what Haiku would have made anyway.

Our picks

By use case, here is what I would pick.

• A new landing page or product site: frontend-design. It is short, cheap to load, and gave the steadiest change on both briefs.
• A strong visual point of view: taste-skill or impeccable. Expect bigger type and riskier layouts, and review them before you ship.
• A look nobody else has: hallmark. The cost is that it sometimes reads many reference files; on the first brief it cost several times as much as the others.
• Polishing an existing interface: try make-interfaces-feel-better or emil-design-eng. They care about details, and did little when designing a page from scratch.

Installing takes one command, for example:

npx skills add anthropics/skills --skill frontend-design

More design skills, with install commands, are in our Claude Code skills directory.

What to ignore

The lesson I took from this test: when you choose a design skill, take three things lightly.

1. Install counts. ui-ux-pro-max has 424,000 installs and changed the least in this test. Installs tell you how many people tried a skill, and say nothing about what it does to your page.
2. Length. frontend-design gave the steadiest results here, and it is one of the shortest.
3. A single screenshot. Each skill ran once per brief, so luck plays a part. Before you settle on one, run your own brief.

Limitations

To keep the cost down, the test used Haiku. A larger model may follow these skills more closely. Each skill ran once per brief, and design quality is a judgment call, so I describe what changed instead of scoring it. The skills were fetched from GitHub on October 30, 2026 and may have changed since.

Reproduce it

It is simple. Copy a skill folder into .claude/skills/ of an empty project, give Claude the same brief with and without it, and put the two pages side by side.

Which skill changes your own work the most?

Sources

1. anthropics/skills: frontend-design · official
2. skills.sh all-time install leaderboard · official
3. Leonxlnx/taste-skill · blog
4. pbakaus/impeccable · blog
5. nutlope/hallmark · blog