使用 Frontend Design Skill 提升大模型前端设计质量
在使用 AI 生成落地页时，经常遇到输出结果同质化的问题：白色背景、紫色渐变、Inter 字体，配色永远是那套蓝绿红黄。虽然功能可用，但缺乏灵魂和个性，一眼就能看出是机器生成。
直到发现 Anthropic 官方推出的 frontend-design skill，情况才有所改变。同样的提示词和模型，加上该技能后，生成的页面呈现深色工业风背景、等宽科技字体、黄青撞色，数据卡片有发光效果，图表有动效，布局不对称且元素重叠，看起来更像人工设计。
Skill 是什么
Skill 可以理解为一种插件，是一个包含 SKILL.md 文件的文件夹，里面写着告诉 AI 在特定场景下该如何操作的指令。frontend-design 的核心作用是把'什么是好的前端设计'这个判断标准写清楚。
五大设计原则
该技能的核心包含五条原则：
- 字体：拒绝 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 来完成前端设计'n就这么简单。
适用场景
不是所有情况都需要。做简单的 CRUD 后台、内部工具，用不用差别不大。但在以下场景中，这个 skill 能派上用场：
- 产品官网
- 营销落地页
- SaaS 产品界面
- 数据可视化 Dashboard
- 需要惊艳效果的展示页
进阶玩法
你可以在原版 skill 的基础上，添加自己的品牌主色、偏好的字体、圆角风格、阴影参数。这样每次生成都符合你的品牌调性，效果更稳定。
原理分析
它不是教 AI'怎么做'，而是教 AI'怎么选'。AI 已经见过无数优秀设计，缺的是判断标准。有了标准，AI 就能调用它已有的知识库，做出正确的选择。这不是注入新能力，而是激活已有能力。
官方资源
- GitHub 官方仓库：
