你的 AI 写的网页,为什么一眼就能被认出来?

Claude Code Skill

你的 AI 写的网页
为什么一眼就能被认出来？

同一个需求，同一个模型。
差了 43 行 SKILL.md——上面是 AI 的默认审美，下面是加了 Anthropic 官方 frontend-design Skill 之后。

没有 Skill：Inter 字体 + 紫色渐变 + 白底圆角卡片 + 三列 feature 横排。100 个 AI 生成的页面里一模一样

 有 Skill：暗底 + 衬线标题 + 声波可视化 signature + 不对称排版 + 暖色调——这是一个「播客产品」的页面，不是「任何产品」的页面

这是什么？

它叫 frontend-design，是 Anthropic 官方维护的 Claude Code Skill，放在 anthropics/skills 这个 GitHub 仓库里——和 PDF 处理、Excel 操作、网页抓取等几十个 Skill 并列。

本质就一句话：在 AI 写任何一行前端代码之前，先让它停下来想一想——这个页面，到底应该长什么样？

它只有一个文件：SKILL.md，43 行。不引入任何依赖，不增加运行时开销。它做的事就一件——改变 AI 的思考流程。

安装：

# Claude Code 终端中执行 claude plugin add anthropic/frontend-design

等 5 秒。不需要配置。之后每次你让 Claude Code 写前端，Skill 自动激活——不需要手动调用。它就像一个设计总监，在你每次要写页面时先过目。

ReactVueSvelteHTML/CSSNext.js任意框架

Skill 不管框架——它管的是「设计决策」，不是「技术选型」。

AI 设计的「三板斧」

打开 Claude Code，说一句「帮我做个 landing page」。出来的东西你见过 100 次了。

SKILL.md 自己就承认了这件事——它开篇就说，AI 生成的前端设计高度集中在三种风格：

1. 1暖奶油底色 + 高对比衬线体 + 赤陶色点缀近 #F4F1EA 的底色，粗衬线标题，一抹陶土色 accent。精品咖啡、SaaS、播客、设计师作品集……不管什么产品，AI 都往这个方向靠。 
2. 2近黑底色 + 荧光绿 / 朱红色单点强调暗色背景上放一行荧光色文字或一个亮色按钮。科技公司、Web3、黑客松、AI 工具……都长这样。
3. 3报纸式排版 + 细线分隔 + 零圆角 + 密集分栏像是《纽约时报》编辑被请来做 SaaS 登录页。细线分割线到处都是，所有角都是直角。

这三个风格本身没有任何问题。问题是：不管什么需求，AI 都往这三个方向靠。

「不是选择，而是默认」——SKILL.md 原话。

它怎么解决的？

整个 SKILL.md 的核心就一个机制——在写代码之前，先出设计方案。

第一遍：出设计方案，不出代码。

AI 必须先拿出一份完整的设计方案，四个维度：

1. 1Color —— 4-6 个命名色值不是「蓝色」，是具体的 #hex。必须有一个主导色 + 点缀色 + 背景色的完整 token 系统。
2. 2Type —— 2-3 种字体角色有个性的展示字体 + 克制的正文字体 + 功能性的等宽/数据字体。不能用 Inter / Roboto / Arial 这些「默认脸」。
3. 3Layout —— 一句话概念 + ASCII 线框图用文字描述布局意图，用 ASCII 线框图对比不同方案。选择前先比较。
4. 4Signature —— 这个页面会被记住的「那一个」元素可以被描述、可以被记住、不能和其他产品混淆。它是这个设计的指纹。

第二遍：自我审视。

「如果我把产品名换掉，这个设计方案还能用吗？」
如果能 —— 打回去重做。
如果不能 —— 开始写代码。

Chanel 有一句名言，精准概括了这个机制：

"Before leaving the house, take a look in the mirror and remove one accessory."
出门前照镜子，摘掉一件配饰。

把大胆用在一个地方。让那个 signature 元素成为唯一被记住的东西。其他一切保持安静、克制、精准。

实机对比

回头再看文章开头那两张截图。

需求是同一句话：「给一个播客转录工具做 landing page hero」。

没有 Skill 时，AI 直接开始写代码。出来的是它被训练出的「最安全答案」——Inter 字体、紫色渐变按钮、三列卡片。你能认出它是 AI 做的，就像你能认出酒店走廊里的印刷画。

有 Skill 之后，AI 先停下来做了一轮设计思考：播客 → 声音 → 声波 → 有机/自然美学 → 暖色调 → 波形可视化作为 signature → 不对称双栏 → 只有一个 Listen 按钮。

同一个模型。同一个需求。差了 43 行 SKILL.md 文件。

几个不起眼的细节

1. 少动画。SKILL.md 明确说：多余的动画会让设计「更像 AI 生成的」。一个精心编排的入场序列，远好过满屏散落的微交互。

2. 文案也是设计材料。按钮说「发布」，Toast 就说「已发布」。动词一致，时态闭合。错误提示不道歉，但一定说清楚发生了什么。

3. 尊重你的偏好。如果你在 CLAUDE.md 里写过品牌色、字体倾向，Skill 会参考。它不是覆盖你的审美，是放大它。

4. 43 行代码。零运行时开销。它只是一个文本文件，不引入任何依赖。改变的只有一件事：AI 从「需求→代码」变成了「需求→设计→审视→代码」。

总结

frontend-design Skill 解决的不是「AI 不会写前端代码」的问题。

AI 写前端已经很熟练了。它缺的不是能力，是审美判断。

这个 Skill 不给你任何组件、任何模板、任何 CSS 片段。它只做一件事：让 AI 在动手之前先动脑。