Claude 设计 skills 哪个真有用？我测了 frontend-design、taste-skill 等 8 个

概述

现在，给 Claude Code 装 skill 越来越流行。设计类的尤其多，排行榜前几名的安装量都有几十万次。

我很好奇，这些 skill 装上以后，做出来的页面到底差多少？

于是，我做了一个测试：挑出安装量最高的 8 个设计 skill，让 Claude 做同一个网页，每个跑一次，再加一个什么都不装的版本做对照。

大家猜猜看，结果怎样？

有三个 skill，装上以后做出的页面，和不装几乎一样。其中一个的安装量是 42 万次。

我的建议是，如果只装一个，就装 Anthropic 官方的 frontend-design，或者 taste-skill。原因很简单，两道题里，只有它们做出的页面，每次都和不装 skill 时明显不同。

怎么测的

参赛的 8 个 skill，都来自 skills.sh 的累计安装排行榜，条件是能设计一整个页面。动画类、组件库类的没放进来，它们管的是另一件事。

题目有两道。

（1）落地页。冲浪预报 App Tidewater，要有首屏、三个功能、三步用法、定价、常见问题和页脚。

（2）作品集。里斯本的陶艺家 Mira Okafor，要有简介、八件作品的网格和详情、创作理念、展览安排和委托表单。

每次运行，规则都一样。

• 模型用 Claude Haiku，命令是 claude -p。整个测试一共花了大约 0.9 美元。
• 每次都在一个空目录里跑，.claude/skills/ 里只放被测的那一个 skill。
• 只准读写文件，禁止执行命令和联网。这些都是第三方写的指令，我不想让它们在我的电脑上跑命令。
• 产出一个单文件 index.html，不引用外部图片和字体。
• 对照组什么都不装，做同一道题。

这里有一个容易被忽略的问题：怎么确定 skill 真的生效了？

我的办法是把每次运行的完整记录留下来，看 Claude 读了哪些文件。结果是，每个 skill 组都读了自己的 SKILL.md，大多还读了它指向的参考文件；对照组一个文件都没读。另外，作品集要求的详情弹窗和委托表单，九组都做出来了。所以下面的差别，全在设计上。

测试结果

先看落地页，桌面首屏，每组跑一次。

再看作品集。

落地页在手机上的样子。

下面是每个 skill 的情况。安装量取自 skills.sh，日期是 2026 年 10 月 30 日；花费是两道题各跑一次的 Haiku 费用。

Skill	安装量	花费（美元，落地页 / 作品集）	变化
不装 skill（对照组）		0.02 / 0.02	合格的默认长相：首屏放手机模型，柔和渐变；作品集是米色加衬线字
frontend-design（Anthropic 官方）	105 万	0.03 / 0.04	首屏用潮汐曲线图代替手机，衬线字体；作品集有一段深色的窑炉区块。两题都有明显变化
taste-skill	70 万	0.04 / 0.09	版式最大胆：超大字号、杂志式网格，作品按不同尺寸排开。读了四个参考文件
ui-ux-pro-max	42 万	0.03 / 0.03	两题都和对照组接近，连首屏都是带评分的手机模型
emil-design-eng	40 万	0.02 / 0.03	配色更暖，标题加了斜体点缀；版式和对照组差不多
impeccable	37 万	0.07 / 0.04	落地页用深海军蓝配黄色，作品集用一件安静的雕塑感器皿
hallmark	7.9 万	0.25 / 0.07	水纹背景加潮汐时刻表；作品集用冷灰色调。第一题读了 15 个文件
make-interfaces-feel-better	7.4 万	0.03 / 0.04	细节更精致，版式接近对照组
frontend-ui-engineering	7.1 万	0.02 / 0.04	落地页首屏的图表渲染成了黑色色块；作品集正常，接近对照组

看完这张表，你有什么感想？

我注意到一个规律。带参考文件的 skill，比如 taste-skill、impeccable、hallmark，都会去读这些文件，结果离默认长相更远。只有一页原则清单的 skill，大多只是在 Haiku 本来就会做的东西上，再打磨一下。

推荐

按用途分，我的推荐是这样的。

• 做新的落地页或产品官网，用 frontend-design。它篇幅短，加载便宜，两题的变化最稳定。
• 想要鲜明的视觉主张，用 taste-skill 或 impeccable。字号更大，版式更冒险，上线前要自己把关。
• 想要别人没有的样子，用 hallmark。代价是它有时要读很多参考文件，第一题的花费是别人的好几倍。
• 打磨已有的界面，可以试试 make-interfaces-feel-better 或 emil-design-eng。它们关注的是细节，从零设计页面时作用不大。

安装只要一条命令，比如：

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

更多设计类 skill 和安装命令，可以看我们的 Claude Code skills 目录。

该忽略什么

这次测试给我的教训是，挑 skill 的时候，有三样东西别太当真。

（1）安装量。ui-ux-pro-max 有 42 万次安装，在这次测试里变化最小。安装量说明有多少人试过，说明不了它对你的页面做了什么。

（2）篇幅。这次效果最稳定的 frontend-design，恰恰是最短的几个之一。

（3）单张截图。每个 skill 每道题只跑了一次，偶然性不小。定下来之前，最好用你自己的需求跑一遍。

局限

为了省钱，测试用的是 Haiku。换成更大的模型，可能会更严格地照着 skill 去做。每个 skill 每道题只跑了一次，设计的好坏也是主观判断，所以我只描述变化，不打分。这些 skill 是 2026 年 10 月 30 日从 GitHub 拉取的，之后可能已经更新。

自己复现

方法很简单。把一个 skill 的文件夹，复制到空项目的 .claude/skills/ 目录里，给 Claude 同一份需求，装和不装各跑一次，把两个页面并排看。

你的工作里，哪个 skill 改变最大？

来源

1. anthropics/skills: frontend-design · official
2. skills.sh 累计安装排行榜 · official
3. Leonxlnx/taste-skill · blog
4. pbakaus/impeccable · blog
5. nutlope/hallmark · blog