00 建设目标
让 AI（Claude Code / Codex / 各类 Coding Agent）生成网页时，几乎一定会得到同一张脸：紫蓝渐变 Hero、圆角卡片网格、emoji 当图标、居中大标题加药丸 badge。看一眼就知道是 AI 做的，社区称之为「AI Slop」。
目标很明确：找到一种可复用的方式，让 AI 生成的网站拥有明确、克制、有记忆点的设计风格，而不是每次都在提示词里手写一大段审美要求。
*
01 技术选型
社区的解法大致分三派：
- 负面清单派：先穷尽「AI 味」的特征清单，让 AI 逐条规避（代表：kill-ai-slop）
- 正向锚点派：给 AI 一份真实品牌的设计系统文档（DESIGN.md），让它照着抄（代表：awesome-design-md）
- 审美指导派（Skill）：把设计师的方法论写成 Agent Skill，让 AI 自己承诺一个设计方向并贯彻到底（代表：各类 frontend-design skill）
我收集了 10 个候选方案做横向对比：
| 方案 | 来源 | 思路 |
|---|---|---|
| frontend-design | anthropics/claude-code（官方插件） | 审美指导：Bold 方向 + OKLCH 色彩 + AI 指纹黑名单 |
| web-design-engineer | ConardLi/garden-skills | 审美指导：设计学派（如 Pentagram 版面建筑）+ 风格配方 |
| frontend-design | vipulgupta2048/codex-skills | 审美指导：aesthetic playbook + signature move |
| ui-ux-pro-max | 社区 Skill | 85+ 风格、161 配色、字体配对规则库 |
| design-first-ui-prompting | MengTo/skills | 九段式设计规格先行（目标/布局/字体/色彩…） |
| web-design-guidelines | vercel-labs/agent-skills | Web 界面工程规范清单 |
| kill-ai-slop | yetone/kill-ai-slop | 负面清单：35 条 AI 味视觉/文案通病 |
| Stripe DESIGN.md | VoltAgent/awesome-design-md | 正向锚点：73 个真实品牌设计系统 |
| pencil-design-skill | chiroro-jr/pencil-design-skill | 设计令牌驱动的 UI 生成 |
| 内置 website-design | 自建场景×主题路由体系 | 场景规则 + 主题 token 组合 |
*
02 技术方案
实验设计非常朴素，核心是保证「只有注入物不同」：
- 同一道题：给 10 个并行 Agent 完全相同的建站任务（一个企业技术官网）和完全相同的内容素材
- 唯一变量：每个 Agent 只额外注入一个上表中的 Skill / 设计文档，提示词不透露任何风格偏好
- 自主决策：信息架构、配色、字体、版式全部由 Agent 按各自拿到的 Skill 自行决定
- 人工评审：全部部署后逐个打开对比观感
*
03 实施效果
10 个页面横向看下来，差距非常明显：注入物质量直接决定出品上限。最终 3 个 Skill 胜出，都值得放进你的 Agent 工具箱：
🏆 vipulgupta2048/codex-skills · frontend-design
仓库：github.com/vipulgupta2048/codex-skills
本次实验的全场最佳。它的美学手册（aesthetic-playbook）要求 AI 先选定一个明确的 signature move（辉光/颗粒/扫描线/杂志堆叠…），其余所有元素都为这一个记忆点服务。实际产出的页面把「深色控制台 + 霓虹辉光 + 扫描线网格」贯彻得非常彻底，是 10 个页面里唯一让人「哇」出声的。同时它对设计令牌、动效曲线、无障碍（skip link、reduced-motion）都有硬规定，工程完成度最高。
🥈 anthropics/claude-code · frontend-design（官方插件）
地址：claude-code/plugins/frontend-design
Anthropic 官方出品，方法论最成体系：要求 AI 先 commit 一个 BOLD 的设计方向；用 OKLCH 感知均匀色 + 60-30-10 法则；明确黑名单（禁 Inter/Roboto 默认字体、禁紫蓝渐变、禁万物皆卡片、禁一切居中）；还有一条「AI Slop Test」——好的设计应该让人问「这是怎么做的」，而不是「这是哪个 AI 做的」。产出的页面是暖纸底 + 衬线大标题的编辑档案风，克制且有辨识度。
🥉 ConardLi/garden-skills · web-design-engineer
仓库：github.com/ConardLi/garden-skills（skills/web-design-engineer）
中文社区出品，特色是把真实设计史学派做成了可调用的「风格配方」——比如它这次选中的 Pentagram（五角设计）式「版面建筑」：字体即图像、超大破边标题、平涂色块做章节分隔、零圆角零阴影零渐变。对于不知道「好设计长什么样」的 AI 来说，给一个具体学派当锚点，比一百条抽象原则都管用。
顺带说下没胜出的：负面清单派（kill-ai-slop）能保证下限（不丑）但出不了彩；品牌 DESIGN.md 锚点出品最稳定但也最没惊喜；规则库越庞大的 Skill（如 ux-pro-max）反而容易让 AI 顾此失彼、产出平庸。
*
04 演进方向
三个 Skill 都已固化到我的 Agent 全局 skills 目录，后续生成任何网页默认点名其一。用法也很简单——把 skill 目录拷到 ~/.claude/skills/ 或你所用 Agent 的 skills 目录，生成网页时用自然语言点名即可。
接下来的计划：
- 把三个 Skill 的「AI 指纹黑名单」交叉合并成一份通用的负面清单，作为所有建站任务的公共约束
- 继续观察「正向锚点 + 审美 Skill」的组合打法：先给 DESIGN.md 定品牌调性，再用 Skill 约束执行细节
- 如果社区出现新的设计 Skill，用同样的对照实验流程快速验证
结论一句话：AI 不是做不出好设计，是你没给它看过好设计。与其每次在提示词里临时描述审美，不如把设计方法论固化成 Skill，一次沉淀，次次受益。