为什么 Claude 默认设计的作品千篇一律，5 个技能在实践中如何解决这个问题，以及当没有现成技能适合你的品牌时，如何一步步构建自己的技能。
你已经知道怎么认出它了：白色背景上的紫色渐变，Inter 字体，卡片上的柔和阴影，版块中央一个突兀的 emoji。你一看就知道：这是 Claude 做出来的。
这不是模型的错，这是它的默认行为。
当你要求“构建一个落地页”而没有给出任何进一步的指示时，模型不会去寻找最有趣的选择，而是去寻找最可能的选择。而最可能的选择就是它在训练期间见过的所有内容的平均值：数百万个安全、千篇一律、令人过目即忘的页面。结果就是设计看起来像 AI 设计，因为它实际上就是网络上现存内容的统计中心。
Anthropic 对此有一个说法，他们称之为“分布收敛”。在实践中，这意味着：如果没有方向指引，Claude 总是会落入平庸。
技能就是如何把它从那个地方拉出来。
快速了解什么是技能
把它想象成一个 Markdown（文本）文件，Claude 在开始工作前会读取它。你不需要在每个提示词中重复你的偏好、你的设计系统和你的语气，你只需写一次，它就会自动加载。这就像在传递任务之前，先给它一份工作描述。
输出结果的差异是巨大的。同样的提示词，同样的 Claude，但加载了正确的技能后，它就不再是一个通用的设计师，而变成了一个了解你工作的协作者。
我测试了一系列技能，对同一个提示词做了前后对比，看看什么才能真正带来改变。我们可以区分出 5 个真正能改变网页设计指针的技能。
1. [Frontend Design](https://claude.com/plugins/frontend-design)（Anthropic 官方出品）
这是生态系统中流行度最高的，原因很充分：它由 Anthropic 自己发布。安装量已超过 277,000 次。
它的秘诀不在于教 Claude 如何画得漂亮，而在于教它 不要 做什么。该文件明确列出了要避免的套路：过度使用的字体、常见的配色方案、每个人都能认出的卡片阴影结构。这是一堂嵌入模型中的、关于良好品味的简短课程。
在前后对比测试中，这一点变得非常明显。同一个落地页，之前输出的是紫色渐变加 emoji，之后变成了更具编辑风格的设计，优雅的衬线字体与干净的无衬线字体搭配，带有滚动淡入动画和考究的悬停状态。而且只用了这一个提示词。
何时使用： 当你从头开始一个新项目，并希望第一次就摆脱默认风格时。这是你的基础技能。
而且它不会把你锁定在它的风格里。如果你想要其他规则，但只使用无衬线字体，只需编辑 markdown 文件并告诉它：“只使用 Geist、Google Sans 或 DM Sans。”Claude 会调整文件。
2. [Impeccable](https://github.com/pbakaus/impeccable)（工具箱）
由 Paul Bakaus 制作，在短时间内成为社区最爱之一，GitHub 上星标数超过 45.9k。原因很容易理解。
它的亮点在于命令。有纯粹的 /impeccable，但还有大约 20 个子命令，你可以根据上下文调用：
- /impeccable animate 以连贯、对页面有意义的方式添加入场动画和动效。
- /impeccable quieter 对设计进行“噪音”审计（过多的渐变、每个标题上沉重的字体粗细、散落的 emoji），并修剪多余部分，带来优雅而非喧闹。
- /impeccable audit 进行质量和可访问性检查。
- /impeccable document 生成一个 design.md，捕获你的整个设计系统，供任何 Agent 稍后读取。
在底层，它拥有 46 条用于检测“垃圾内容”的确定性规则——这些规则运行时无需依赖模型猜测。它能精确地捕捉 AI 生成的模式。
何时使用： 用于迭代你已经有的内容。有一个现成的页面，想控制一下夸张的部分？用 quieter。缺少活力？用 animate。只需两个提示词，网站的水平就提升了。
一个超越工具本身的细节：Impeccable 有一个“slop”标签页，展示了它教 AI 避免的模式。你自己看看这个列表。学会识别出卡片侧边的强调边框已经成为 AI 的套路，这也会让你手动设计时做得更好。
3. [UIUX Pro Max](https://ui-ux-pro-max-skill.nextlevelbuilder.io/)（迫使 Claude 思考的那个）
这是一个功能超强的设计数据库，也是本列表中获得星标最多的：GitHub 上星标超过 105k。它包含 67 个 UI 风格、161 个调色板、57 个字体配对、99 个 UX 指南和 16 个技术栈，以便它知道如何在每个框架中实现。
它的重点不是快速给你代码；恰恰相反。它迫使 Claude 在写任何一行代码之前先进行推理。它会并行地在五个领域（产品、风格、颜色、落地页、排版）中搜索你的布局，应用推理规则，然后才返回一个完整的设计系统，其中已经标记了要避免的反模式。
https://x.com/nett0eth/status/2073490435066982554
结果是具有意图的区块，而不是装饰性的。在测试中，它做了诸如在 KPI 区块内恰当地进行从亮到暗的过渡，专门为了突出需要跳出来的数字。这是你期望从人类设计师那里得到的决策，而不是从生成器那里得到的。
何时使用： 当你对内容有清晰的想法，并希望设计有深度时。还有一个价值千金的建议：你对每个部分想要什么描述得越具体，效果越好。技能不能读懂你的心思；它只会放大你的方向。发送“使用这个技能，做一个更彻底的重设计，探索调色板和字体配对”会完全改变返回的结果。
4. [Web Design Guidelines](https://github.com/vercel-labs/agent-skills)（来自 Vercel Labs 的审计员）
这个技能适用于项目结尾，而不是开头。它来自 Vercel Labs，GitHub 上星标 29k，它会根据 Vercel 的网页界面指南列表（超过 100 条规则）审计你的代码：键盘焦点是否正常工作、从不禁用缩放、不阻止粘贴、按钮上的加载指示器、标题层级、ARIA 等等。
而且它有一个我喜欢的小技巧：你可以让 Claude 直接在预览屏幕上注释问题。你不需要阅读列表，而是直接在网站上看到，用橙色标出哪里缺少 aria-label、哪里键盘导航中断、哪里 CTA 缺少焦点。它变得可视化。
何时使用： 当设计已经很好了，你想确保它可访问，不会让使用键盘或屏幕阅读器的人感到尴尬时。它是上线前的质量保证。
5. [Astryx](https://github.com/facebook/astryx)（来自 Meta 的 Agent 就绪设计系统）
https://x.com/nett0eth/status/2073826299789889884
第五个属于另一个类别：它不是品味技能，而是一个完整的设计系统。上面 4 个技能教 Claude 如何设计得更好，一次一个屏幕。Meta 则选择了相反的道路，开源了 Astryx，这个设计系统在公司内部发展了 8 年，成为公司最大、使用最广泛的设计系统，运行在超过 13,000 个应用中。现在它是开源的，而且这里重要的细节是：Agent 就绪。
关键在于：你不需要希望模型对每个组件都有常识，而是给它一个系统，其中所有东西生来就是可访问和一致的。它有超过 150 个组件、7 个现成主题、暗色模式，以及一个 CLI，人和 Agent 都可以用同样的方式使用，读取同样的文档。仓库里甚至还有一个 CLAUDE.md，让 Claude 在写第一行代码之前先了解这个体系。
它基于 React 和 StyleX 构建，目前处于测试阶段，已获得 8.2k 星标。
何时使用： 当你想要系统的一致性，而不仅仅是一个漂亮的屏幕时。技能提升模型的品味；Astryx 则确保在任何提示词之前，基础就已经是稳固的。两者相辅相成。
去哪里寻找更多技能
这 5 个技能覆盖了网页设计师在 Claude 中大约 90% 的工作。但如果你想探索，这里有一些不错的目录：
- UI Skills 专注于设计工程师，但也适用于网页设计。它列出了上述几个技能，并包含可访问性和 Shadcn 相关的内容。
- Type UI 是我个人最喜欢的，适合那些先考虑视觉效果的人。你可以滚动浏览，预览每种美学风格（极简主义、新粗野主义、精致企业风），然后直接调用你想要的，无需写一段指令。
- MCP Market 是一个大型社区仓库；进入 Agent Skills > Categories > Design Tools，那里有数不清的列表。
- skills.sh 是 Vercel 和其他公司正式发布的地方，适合直接从源头获取。
如何创建你自己的技能
当没有一个现成的技能 100% 适合你的品牌或技术栈时。就是时候创建你自己的了。
在 Claude 应用或 Claude Code 中，进入 Customize > Skills > Create Skill > Create with Claude。它会先问你技能应该做什么。
区分一个有用技能和一个无用技能的关键在于你在这里描述得有多具体。不要写“做漂亮的设计”，而是给出推理规则。例如：
- 始终先识别产品类型（仪表盘、落地页、应用），因为设计会随上下文而改变。
- 在绘制之前始终推断屏幕的目标：什么动作最重要，用户应该首先注意到什么。
- 默认使用一个克制的调色板，更中性的背景和表面。
- 一种主要的正文字体，如果需要，再为大的标题使用一种展示字体。
Claude 会开始对话，询问你的技术栈（例如 Tailwind 令牌）、你的间距比例、你的布局限制。要详细；这决定了技能的价值。最后，它将所有内容打包成一个带有参考文件夹的 .md 文件，你可以通过你自己的斜杠命令访问它。
但创建技能是容易的部分。困难的部分是确保它在下一次会话中不会失效，而这正是许多人跳过的重要环节。我已经在另一篇文章中详细介绍了 Matt Pocock 的 8 步框架，用于编写能够自我维持的技能（触发、结构、方向、剪枝），它比任何你安装的设计技能都更有价值：
https://x.com/nett0eth/status/2075976597513830727
值得一起阅读；这是“给模型提供正确的尺子”这一思路在更高一层上的应用。Anthropic 的官方指南《为 Claude 构建技能的完整指南》也详细介绍了这些原则。
总结
Claude 默认情况下并不是一个令人印象深刻的设计师。对于任何曾经要求一个落地页却收到惯常的紫色渐变的人来说，这并不新鲜。
技能就是缩小这个差距的方法。不是因为模型变得更聪明了，而是因为你给了它一个真正设计师头脑中携带的尺子。模型本身的重要性远不如你围绕它构建的循环。
一次性配置好它。输出质量的提升非常大，以至于你再也无法忍受没有它工作。
问题依然存在：你的项目中有多少仍然输出着惯常的紫色渐变，仅仅因为你在提问之前从未加载过技能？收藏并分享 👍
