上周,我让 AI 帮我做个落地页。
十分钟过去了,生成出来的东西——
白色背景,紫色渐变,Inter 字体。
我直接关了。

你也遇到过吧?
用 AI 生前端,出来的东西都长一个样。
背景非白即黑,标题栏永远是紫色渐变,字体不是 Inter 就是 Roboto,配色永远是那套蓝绿红黄。
不是说不能用,但——
太像 AI 了。
一眼看过去就是"机器生成",没有灵魂,没有个性。
直到昨天,我发现了一个东西。
Anthropic 官方出的一个 skill,叫 frontend-design。
让我再试一次。

这次不一样了
同样的提示词,同样的模型。
我只加了一句话:
'使用 frontend-design skill'
结果呢?
深色工业风背景,等宽科技字体,黄青撞色。
数据卡片有微妙的发光效果,图表有精心设计的动效。
布局不对称,元素有重叠。
一眼看过去——这像人做的。
skill 是什么?
你可以把它理解成一个"插件"。
一个包含 SKILL.md 文件的文件夹,里面写着告诉 AI「在特定场景下该怎么做」的指令。
frontend-design 这个 skill 做的事很简单:
把"什么是好的前端设计"这个判断标准,写清楚。
官方怎么说?
GitHub 在这:github.com/anthropics/skills
搜 "frontend-design skill" 就能找到。
五个原则
我去 GitHub 看了下这个 skill 的内容。
核心就五条:
字体
❌ Inter、Roboto、Arial
✅ 有性格的、独特的字体组合
配色
❌ 紫色渐变、均匀分布的配色
✅ 大胆的主色 + 尖锐的点缀色
动效
❌ 零散的微交互
✅ 精心编排的页面加载动画
布局
❌ 对称、可预测的网格
✅ 非对称、重叠、破格元素
细节
❌ 纯色背景
✅ 渐变网格、噪点纹理、几何图案

