背景
在使用 AI 生成前端落地页时，常遇到风格单一的问题。白色背景、紫色渐变、Inter 字体是常见配置。生成的页面往往缺乏个性，一眼看过去就是'机器生成'，没有灵魂。
解决方案
Anthropic 官方推出了一款名为 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
方法二：手动下载
- 打开 GitHub 仓库 anthropics/skills
- 找到
skills/frontend-design文件夹 - 下载整个文件夹
- 放到
~/.claude/skills/目录下 - 重启工具
