引言
上周我试着让 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

