引言
上周我试着让 AI 生成一个落地页，结果还是老样子：白底、紫色渐变、Inter 字体，第一眼就能看出是机器拼出来的。问题不在'能不能生成'，而在于默认产物太容易落进同一套模板里。背景非白即黑，标题区爱用渐变，字体不是 Inter 就是 Roboto，配色也总绕不开那几种安全色。
后来我换了个思路，试了 Anthropic 官方出的 frontend-design skill。
这次效果确实不一样
提示词还是原来的提示词，模型也没换，只是在后面加了一句'使用 frontend-design skill'。结果出来的页面一下子就稳了很多：深色工业风背景、等宽科技字体、黄青撞色，卡片有一点发光，图表动效也不是随便抖两下。布局不再四平八稳，元素之间还有重叠和错位。它未必适合所有产品，但至少不再是那种看一眼就知道'这是 AI 默认审美'的东西。
这个 skill 到底是什么
可以把它理解成一个带有明确规则的插件。它本质上是一个包含 SKILL.md 的文件夹，里面写的是：在前端设计这个场景下，AI 应该优先关注什么、避开什么。frontend-design 做的事情不复杂，就是把'什么算好看、什么算普通'这件事说清楚。
官方怎么描述
Claude 官方账号提过这个 skill，重点放在字体、动画、配色、布局这些对效果影响最明显的地方。仓库在这里：github.com/anthropics/skills
里面的几个关键点
我看了一遍它的内容，核心其实很直接。
字体
不要一上来就用 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 -- --client cursor
