让 AI 生成的前端不再千篇一律
最近尝试用 AI 生成落地页时，发现了一个普遍问题。
同样的提示词，同样的模型，出来的结果往往大同小异：白色背景配紫色渐变，字体非 Inter 即 Roboto，配色永远是那套蓝绿红黄。不是说不能用，但一眼看过去就是'机器生成'，缺乏灵魂和个性。
后来发现 Anthropic 官方推出了一个 frontend-design skill，专门解决这个问题。加上这个技能后，同样的指令下，AI 能输出深色工业风背景、精心编排的动效以及不对称布局，质感直接提升了一个量级。
什么是 Skill？
你可以把它理解成一种'插件'。它是一个包含 SKILL.md 文件的文件夹，里面写着告诉 AI「在特定场景下该怎么做」的指令。
frontend-design 的核心作用很简单：把'什么是好的前端设计'这个判断标准写清楚。
根据官方文档，它专注于几个关键领域：字体、动画、配色、布局等。简单来说，它不是教 AI 新能力，而是激活它已有的知识库，让它知道如何做出正确的审美选择。
五大设计原则
我去 GitHub 看了下这个 skill 的具体内容，核心就五条原则，拒绝通用，拥抱独特：
字体
❌ Inter、Roboto、Arial（太通用） ✅ 有性格的、独特的字体组合
配色
❌ 紫色渐变、均匀分布的配色 ✅ 大胆的主色 + 尖锐的点缀色
动效
❌ 零散的微交互 ✅ 精心编排的页面加载动画
布局
❌ 对称、可预测的网格 ✅ 非对称、重叠、破格元素
细节
❌ 纯色背景 ✅ 渐变网格、噪点纹理、几何图案
安装与配置
装好后，只需要在提示词里加一句：'使用 frontend-design skill 来完成前端设计'。
方法一：命令行（推荐）
打开终端，一行命令即可安装：
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 仓库
- 找到
skills/frontend-design文件夹 - 下载整个文件夹到本地
- 放到
~/.claude/skills/目录下 - 重启工具生效
适用场景
不是所有情况都需要这个 skill。做简单的 CRUD 后台或内部工具，差别不大。但在以下场景，它能派上大用场：
