上周，我让 AI 帮我做个落地页。
十分钟过去了，生成出来的东西——
白色背景，紫色渐变，Inter 字体。
我直接关了。
你也遇到过吧？
用 AI 生前端，出来的东西都长一个样。背景非白即黑，标题栏永远是紫色渐变，字体不是 Inter 就是 Roboto，配色永远是那套蓝绿红黄。
不是说不能用，但太像 AI 了。一眼看过去就是机器生成，没有灵魂，没有个性。
直到昨天，我发现了一个东西。Anthropic 官方出的一个 skill，叫 frontend-design。让我再试一次。
这次不一样了
同样的提示词，同样的模型。我只加了一句话：
'使用 frontend-design skill'
结果呢？深色工业风背景，等宽科技字体，黄青撞色。数据卡片有微妙的发光效果，图表有精心设计的动效。布局不对称，元素有重叠。一眼看过去——这像人做的。
skill 是什么？
你可以把它理解成一个插件。一个包含 SKILL.md 文件的文件夹，里面写着告诉 AI「在特定场景下该怎么做」的指令。
frontend-design 这个 skill 做的事很简单：把'什么是好的前端设计'这个判断标准，写清楚。
五个原则
我去 GitHub 看了下这个 skill 的内容。核心就五条：
字体
❌ Inter、Roboto、Arial
✅ 有性格的、独特的字体组合
配色
❌ 紫色渐变、均匀分布的配色
✅ 大胆的主色 + 尖锐的点缀色
动效
❌ 零散的微交互
✅ 精心编排的页面加载动画
布局
❌ 对称、可预测的网格
✅ 非对称、重叠、破格元素
细节
❌ 纯色背景
✅ 渐变网格、噪点纹理、几何图案
一句话：拒绝通用，拥抱独特。
怎么装？两种方法
方法一：命令行（推荐）
打开终端，一行命令：
npx skills-installer install @anthropics/claude-code/frontend-design --client claude-code
如果你用 Codex，把 --client 改成 codex。
如果你用 Cursor：
npx skills-installer install @anthropics/claude-code/frontend-design --local --client cursor
方法二：手动下载
- 打开 github.com/anthropics/skills
- 找到
skills/frontend-design文件夹 - 下载整个文件夹
- 放到
~/.claude/skills/目录下 - 重启工具
怎么用？
装好后，提示词里加一句就行：
'使用 frontend-design skill 来完成前端设计'
就这么简单。
真实案例
有人在开发者社区分享过实战经验：第一步，用这个 skill 生成初版登录页，重点看设计风格与结构布局对不对。第二步，在同一 skill 指导下迭代优化。最后整个页面的质感直接上升了一个量级。不是那种紫色渐变的通用模板，而是有设计感、有品牌调性的页面。
还有个案例，作者直接用这个 skill 优化某项目的首页。提示词就一句：'使用 frontend-design skill，优化一下 https://www.example.com'。从平庸的 AI 风格，变成了有设计感的专业页面。
什么时候用？
不是所有情况都需要。做简单的 CRUD 后台、内部工具，用不用差别不大。但你做这些的时候：
- 产品官网
- 营销落地页
- SaaS 产品界面
- 数据可视化 Dashboard
- 需要惊艳效果的展示页
这个 skill 就能派上用场。
进阶玩法
你可以在原版 skill 的基础上，加自己的东西。比如品牌主色、偏好的字体、圆角风格、阴影参数。这样每次生成都符合你的品牌调性，效果更稳定。
为什么这么管用？
它不是教 AI'怎么做'，而是教 AI'怎么选'。AI 已经见过无数优秀设计。它缺的，是判断标准。有了标准，AI 就能调用它已有的知识库，做出正确的选择。不是注入新能力，而是激活已有能力。
最后
真正的分水岭不在'能不能做'，而在'能不能把判断写成系统、让交付稳定发生'。frontend-design skill 就是这样一个系统。官方出品，完全免费，现在就能用。
参考资源：
- GitHub 官方仓库：anthropics/skills/frontend-design
