解决 AI 生成前端同质化问题
近期尝试用 AI 生成立地页，发现生成的页面往往风格单一。白色背景、紫色渐变、Inter 字体，缺乏个性，一眼就能看出是机器生成。
解决方案：frontend-design Skill
Anthropic 官方发布了一个名为 frontend-design 的 Skill，用于优化前端设计效果。
Skill 是什么
可以将其理解为一个包含 SKILL.md 文件的插件文件夹，其中定义了特定场景下的操作指令。该 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
方法二：手动下载
- 访问 GitHub 官方仓库。
- 找到
skills/frontend-design文件夹。 - 下载整个文件夹。
- 放到
~/.claude/skills/目录下。 - 重启工具。
使用方法
安装完成后，在提示词中添加一句即可：
'使用 frontend-design skill 来完成前端设计'
适用场景
并非所有情况都需要。简单的 CRUD 后台或内部工具差别不大，但在以下场景中效果显著：
- 产品官网
- 营销落地页
- SaaS 产品界面
- 数据可视化 Dashboard
- 需要惊艳效果的展示页
进阶玩法
可以在原版 Skill 的基础上添加自定义配置，如品牌主色、偏好字体、圆角风格、阴影参数等，使生成结果更符合品牌调性。
