近期尝试用 AI 生成落地页时，生成的页面往往风格单一。背景非白即黑，标题栏永远是紫色渐变，字体不是 Inter 就是 Roboto。虽然功能可用，但缺乏个性，一眼看过去就是'机器生成'。
随后发现 Anthropic 官方推出了一个名为 frontend-design 的 Skill。同样的提示词和模型，仅添加'使用 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
方法二：手动下载
- 打开 Anthropic Skills 仓库
- 找到
skills/frontend-design文件夹 - 下载整个文件夹
- 放到
~/.claude/skills/目录下 - 重启工具
使用方法
装好后，提示词里加一句就行：
'使用 frontend-design skill 来完成前端设计'
就这么简单。
应用场景
有人在开发者社区分享过实战经验：第一步，用这个 Skill 生成初版登录页，重点看'设计风格'和'结构布局'对不对。第二步，在同一 Skill 指导下迭代优化。最后整个页面的质感直接上升了一个量级。不是那种'紫色渐变'的通用模板，而是有设计感、有品牌调性的页面。
还有个案例，作者直接用这个 Skill 优化某网站首页。从平庸的