引言
上周尝试让 AI 生成落地页，结果白色背景、紫色渐变、Inter 字体，一眼看过去就是'机器生成'，没有灵魂。你也遇到过吧？用 AI 生前端，出来的东西都长一个样。背景非白即黑，标题栏永远是紫色渐变，字体不是 Inter 就是 Roboto，配色永远是那套蓝绿红黄。不是说不能用，但太像 AI 了。
直到发现了一个东西：Anthropic 官方出的一个 skill，叫 frontend-design。让我再试一次。
这次不一样了
同样的提示词，同样的模型。我只加了一句话：'使用 frontend-design skill'。结果呢？深色工业风背景，等宽科技字体，黄青撞色。数据卡片有微妙的发光效果，图表有精心设计的动效。布局不对称，元素有重叠。一眼看过去——这像人做的。
skill 是什么？
你可以把它理解成一个"插件"。一个包含 SKILL.md 文件的文件夹，里面写着告诉 AI「在特定场景下该怎么做」的指令。frontend-design 这个 skill 做的事很简单：把"什么是好的前端设计"这个判断标准，写清楚。
官方说明
Claude 官方账号发布过一条动态：'我们发布了一个新的前端设计 skill。它专注于几个目标提示效果良好的领域：字体、动画、配色、布局……' GitHub 仓库地址：github.com/anthropics/skills
五个原则
我去 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
