AI 生成落地页时，常出现白色背景、紫色渐变、Inter 字体等通用风格。
此类问题常见于 AI 生成的前端代码中。背景非白即黑，标题栏永远是紫色渐变，字体不是 Inter 就是 Roboto，配色永远是那套蓝绿红黄。不是说不能用，但太像 AI 了，一眼看过去就是'机器生成'，没有灵魂，没有个性。
Anthropic 官方推出了名为 frontend-design 的 Skill。
这次不一样了
同样的提示词，同样的模型。只加了一句话：'使用 frontend-design skill'。结果呢？深色工业风背景，等宽科技字体，黄青撞色。数据卡片有微妙的发光效果，图表有精心设计的动效。布局不对称，元素有重叠。一眼看过去——这像人做的。
skill 是什么？
你可以把它理解成一个'插件'。一个包含 SKILL.md 文件的文件夹，里面写着告诉 AI「在特定场景下该怎么做」的指令。
五个原则
核心就五条：
字体
❌ 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 仓库
- 找到 skills/frontend-design 文件夹
- 下载整个文件夹
- 放到 ~/.claude/skills/ 目录下
- 重启工具
怎么用？
装好后，提示词里加一句就行：
'使用 frontend-design skill 来完成前端设计'
就这么简单。
适用场景
不是所有情况都需要。做简单的 CRUD 后台、内部工具，用不用差别不大。但你做这些的时候：
