AI 生成的前端页面常存在同质化问题。
白色背景,紫色渐变,Inter 字体。这种风格一眼看过去就是'机器生成',没有灵魂,没有个性。
问题现状
用 AI 生前端,出来的东西都长一个样。 背景非白即黑,标题栏永远是紫色渐变,字体不是 Inter 就是 Roboto,配色永远是那套蓝绿红黄。 不是说不能用,但太像 AI 了。
解决方案:frontend-design skill
Anthropic 官方发布了一个 skill,叫 frontend-design。
同样的提示词,同样的模型,只加了一句话:'使用 frontend-design skill'。
结果变成了深色工业风背景,等宽科技字体,黄青撞色。
数据卡片有微妙的发光效果,图表有精心设计的动效。
布局不对称,元素有重叠。一眼看过去——这像人做的。
skill 是什么?
你可以把它理解成一个'插件'。
一个包含 SKILL.md 文件的文件夹,里面写着告诉 AI「在特定场景下该怎么做」的指令。
frontend-design 这个 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 仓库 anthropics/skills
- 找到
skills/frontend-design文件夹 - 下载整个文件夹
- 放到
~/.claude/skills/目录下 - 重启工具
如何使用
装好后,提示词里加一句就行:
'使用 frontend-design skill 来完成前端设计'
就这么简单。
实战案例
实战经验表明,第一步用这个 skill 生成初版登录页,重点看'设计风格'和'结构布局'对不对。 第二步,在同一 skill 指导下迭代优化。 最后整个页面的质感直接上升了一个量级。 不是那种'紫色渐变'的通用模板,而是有设计感、有品牌调性的页面。
适用场景
不是所有情况都需要。 做简单的 CRUD 后台、内部工具,用不用差别不大。 但你做这些的时候,这个 skill 就能派上用场:

