你是否遇到过这种情况：让 AI 生成前端页面，出来的结果总是千篇一律？白色背景、紫色渐变、Inter 字体，配色永远是那套蓝绿红黄。不是说不能用，但一眼看过去就是'机器生成'，没有灵魂，缺乏个性。
直到最近发现了一个解决方案——Anthropic 官方推出的 frontend-design Skill。同样的提示词，同样的模型，加上这个技能后，生成的页面变成了深色工业风背景，等宽科技字体，黄青撞色，数据卡片有微妙的发光效果，布局不对称且元素重叠。这种质感，才像人做的。
什么是 Skill？
你可以把它理解成一个'插件'。它是一个包含 SKILL.md 文件的文件夹，里面写着告诉 AI「在特定场景下该怎么做」的指令。frontend-design 的核心作用很简单：把'什么是好的前端设计'这个判断标准，写清楚。
它不是教 AI 新能力，而是激活它已有的知识库，让它知道如何做出正确的选择。
五大设计原则
我去 GitHub 看了下这个 Skill 的内容，核心就五条：
- 字体：拒绝通用的 Inter、Roboto，拥抱有性格的独特组合。
- 配色：不要紫色渐变和均匀分布，尝试大胆的主色加尖锐的点缀色。
- 动效：从零散微交互转向精心编排的页面加载动画。
- 布局：打破对称网格，尝试非对称、重叠、破格元素。
- 细节：纯色背景太单调，试试渐变网格、噪点纹理或几何图案。
一句话总结：拒绝通用，拥抱独特。
安装与使用
命令行安装（推荐）
打开终端，一行命令即可：
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 仓库，找到 skills/frontend-design 文件夹，下载到本地 ~/.claude/skills/ 目录下并重启工具。
装好后，提示词里加一句就行：
'使用 frontend-design skill 来完成前端设计'就这么简单。
适用场景
不是所有情况都需要。做简单的 CRUD 后台、内部工具，用不用差别不大。但在以下场景，这个 Skill 能派上大用场：
- 产品官网
- 营销落地页
- SaaS 产品界面
- 数据可视化 Dashboard
- 需要惊艳效果的展示页
进阶玩法
你可以在原版 Skill 的基础上，加入自己的品牌规范。比如指定主色、偏好的字体、圆角风格、阴影参数。这样每次生成都符合你的品牌调性，效果更稳定。
为什么这么管用？
真正的分水岭不在「能不能做」，而在「能不能把判断写成系统、让交付稳定发生」。AI 已经见过无数优秀设计，它缺的是判断标准。有了标准，AI 就能调用它已有的知识库，做出正确的选择。
去试试吧，让你的 AI 生成的页面更有质感。
