最近尝试用 AI 生成落地页时，发现了一个普遍问题：生成的界面往往千篇一律。白色背景、紫色渐变、Inter 字体，配色永远是那套蓝绿红黄。不是说不能用，但一眼看过去就是'机器生成'，没有灵魂，缺乏个性。
直到接触了 Anthropic 官方推出的一个 Skill——frontend-design，情况才有所改变。同样的提示词和模型，加上这一句指令后，输出的深色工业风背景、等宽科技字体、黄青撞色以及精心设计的动效，瞬间有了人做的设计感。
Skill 是什么？
你可以把它理解成一个插件。它是一个包含 SKILL.md 文件的文件夹，里面写着告诉 AI「在特定场景下该怎么做」的指令。frontend-design 的核心作用很简单：把'什么是好的前端设计'这个判断标准写清楚。
五大核心原则
根据官方文档，这个 Skill 主要规范了以下五个维度：
- 字体：拒绝通用的 Inter、Roboto，拥抱有性格的独特组合。
- 配色：避免均匀分布的配色，采用大胆的主色加尖锐的点缀色。
- 动效：不只是零散的微交互，而是精心编排的页面加载动画。
- 布局：打破对称网格，尝试非对称、重叠或破格元素。
- 细节：纯色背景太单调，推荐渐变网格、噪点纹理或几何图案。
一句话总结：拒绝通用，拥抱独特。
如何安装
推荐使用命令行方式，一行命令即可搞定：
npx skills-installer install @anthropics/claude-code/frontend-design --client claude-code
如果你使用的是 Codex，将 --client 参数改为 codex；如果是 Cursor 环境，则使用 --local --client cursor。
当然，也可以手动下载 GitHub 仓库中的 skills/frontend-design 文件夹，放到 ~/.claude/skills/ 目录下并重启工具。
如何使用
安装完成后，在提示词中加上一句即可：
'使用 frontend-design skill 来完成前端设计'
就这么简单。实践表明，用它生成初版登录页，重点检查'设计风格'和'结构布局'，随后在同一指导下迭代优化，整个页面的质感会直接上升一个量级。不再是那种'紫色渐变'的通用模板，而是有设计感、符合品牌调性的页面。
适用场景与进阶
并非所有情况都需要。简单的 CRUD 后台或内部工具，差别不大。但在以下场景中，这个 Skill 能派上大用场：
- 产品官网
- 营销落地页
- SaaS 产品界面
- 数据可视化 Dashboard
- 需要惊艳效果的展示页
进阶玩法上，你可以在原版 Skill 的基础上加入自己的品牌主色、偏好字体、圆角风格或阴影参数。这样每次生成都更符合你的品牌调性，效果也更稳定。
为什么这么管用？
它不是教 AI'怎么做'，而是教 AI'怎么选'。AI 已经见过无数优秀设计，缺的是判断标准。有了标准，AI 就能调用已有的知识库做出正确选择。这不是注入新能力，而是激活已有能力。
2025 年是 MCP 元年，2026 年或许是 Skills 元年。真正的分水岭不在'能不能做'，而在'能不能把判断写成系统、让交付稳定发生'。frontend-design 就是一个这样的系统，官方出品，完全免费，值得尝试。
官方仓库地址：https://github.com/anthropics/skills/tree/main/skills/frontend-design
