*原文发表于 recca0120.github.io*
让 Claude Code 或 Cursor 生成一个落地页，你三秒内就能猜到它长什么样：Inter 字体、蓝色按钮、紫粉渐变英雄区、大圆角卡片、用 emoji 充当图标、再加几段虚假用户好评。能用——但任何人都能一眼看出"这是 AI 写的"。
ConardLi/web-design-skill 正是为了解决这个问题。它将 Claude Design（Anthropic 于 2026 年 4 月推出的视觉产品）的系统提示提炼为一个开放的、可移植的 `SKILL.md`，放入 `.claude/skills/` 或 `.agents/skills/` 即可使用。目标：让 agent 写出有设计品味的代码，而不是千篇一律的脸。
这是一篇实战指南，同时整理了一些值得借鉴的设计理念。
## 问题：千篇一律的 AI 美学
LLM 早就过了"能不能跑"的阶段。但由于训练数据高度重叠，输出收敛到了同一种外观。作者列出了一个"AI 前端特征"黑名单：
- 紫粉蓝渐变背景
- 左侧彩色边框的卡片
- Inter / Roboto / Arial / system-ui 字体
- 用 emoji 当图标
- 虚假数据、假 logo 墙、伪造好评
这些都没错。只是太*常见*了。看到它们就等于在说"这是 AI"，会稀释任何品牌形象。
## 修复 1：反套路黑名单
这个 skill 明确列出了黑名单，让 agent 在生成之前就被提醒"不要用这些"。这比"设计得好看点"这种模糊指令有效得多——LLM 遵循负面约束的能力不错，*只要条目足够具体*。
> 不要告诉 AI"设计得漂亮"，而要明确告诉它"不要紫粉渐变、不要 Inter 字体、不要用 emoji 当图标"。约束反而打开了设计空间。
## 修复 2：oklch 色彩系统
这是 skill 中技术性最强的部分。HSL 在感知上是不均匀的——亮度 50% 的黄色看起来比亮度 50% 的蓝色亮得多，这就是为什么 AI 生成的 HSL 色板经常"数值对称但视觉歪斜"。
`oklch` 是一个感知均匀的色彩空间——相同的 L 值在人眼看来亮度确实相同。skill 要求用 oklch 定义色彩 token：
```css
:root {
--color-bg: oklch(98% 0.01 80);
--color-fg: oklch(20% 0.02 80);
--color-accent: oklch(65% 0.18 30);
}
```
附带的好处是色阶推导很干净——锁定色度和色相，只变化亮度，就能得到视觉上一致的灰色或强调色色阶。
## 修复 3：提前声明设计系统
这在我看来是 skill 的核心。AI 生成前端的最大问题是"边做边决定"：到英雄区才选颜色，到页脚才换字体，最终拼凑出一张不匹配的页面。
skill 强制要求 agent 在写代码之前*先用 markdown 声明设计 token*：
```markdown
## Design System
- **Palette**: warm paper (oklch 97% 0.01 80) / ink (oklch 18% 0.02 80) / accent caramel (oklch 65% 0.15 60)
- **Typography**: Instrument Serif (display) + Space Grotesk (UI) + JetBrains Mono (code)
- **Spacing**: 4px base, 8/16/24/40/64 scale
- **Motion**: 200ms ease-out for micro, 600ms ease-in-out for page transitions
```
只有在这些声明完成后才开始写代码。这将"设计决策"和"实现"分开——用户可以在 token 层面纠正方向，而不用等整个页面出来才发现整体调性不对。
## 修复 4：先展示 v0 草稿
不要一次性交付。skill 要求一个"v0"阶段：布局骨架 + 设计 token + 占位符，让用户确认方向后再填充细节。
这模仿了人类从线框图到高保真原型的工作流程。AI 通常会跳过这一步，因为它想一次性交付完整成果——但完整成果修改成本高，半成品修改成本低。
## 修复 5：占位符原则
AI 最蠢的习惯之一：图片缺失时，它会画一个歪歪扭扭的 SVG 假装是插图。skill 禁止这种做法，改用诚实的标记：
```html
[hero image: photographer portrait, 3:4]
```
原因很简单：劣质 SVG 会误导用户以为这是成品素材，而文字占位符清楚地表明"这里需要真实的素材"。
## 六步工作流
skill 将整个过程结构化：
1. **理解需求** — 仅在信息不足时提问
2. **收集设计背景** — 代码 > 截图，绝不从零开始
3. **声明设计系统** — 如上，用 markdown 定义 token
4. **展示 v0 草稿** — 布局 + 占位符
5. **完整构建** — 组件、状态、动效；在决策点暂停
6. **验证** — 交付前检查：无控制台错误、无杂色
这个结构抑制了 LLM"一次性给出完整答案"的冲动，强迫它进入迭代工作流。
## 六组配色 × 字体搭配
skill 中最实用的速查表。六组预验证的组合，agent 遇到困难时直接取用：
| 风格 | 配色 | 字体 | 适用场景 |
|------|------|------|----------|
| 现代科技 | 蓝紫 | Space Grotesk + Inter | SaaS、开发工具 |
| 优雅编辑 | 暖棕 | Newsreader + Outfit | 内容、博客 |
| 高端品牌 | 近黑 | Sora + Plus Jakarta Sans | 奢侈品、金融 |
| 活泼消费 | 珊瑚 | Plus Jakarta Sans + Outfit | 电商、社交 |
| 简约专业 | 青蓝 | Outfit + Space Grotesk | 仪表盘、B2B |
| 手工艺温暖 | 焦糖 | Caveat + Newsreader | 餐饮、教育 |
注意 Inter 只在"现代科技"中作为*次要*字体出现——不是默认选择。这正是反套路规则的具体体现。
## 如何使用
克隆后，将 `.agents/skills/web-design-engineer/` 复制到你的项目中（Claude Code 用 `.claude/skills/`），agent 会在处理前端任务时自动加载。
```shell
git clone https://github.com/ConardLi/web-design-skill
cp -r web-design-skill/.agents/skills/web-design-engineer .claude/skills/
```
仓库的 `demo/` 文件夹中有同 prompt 下使用和未使用 skill 的对比。差距一目了然——值得直接打开看看。
## 为什么值得借鉴
真正的价值不是"AI 的设计检查清单"——而是**将设计决策外部化**的方法论。把 token 写成 markdown、把反模式写成黑名单、把工作流分成六步——这些都把模糊的"品味"变成了 LLM 可以读取的结构。
同样的思路适用于任何领域：如果你想让 AI 在某个领域有品味，就把"做"和"不做"明确列出来。比一千字的大段 system prompt 有效得多。
## 参考资料
- ConardLi/web-design-skill GitHub Repo
- Claude Design — Anthropic Labs Announcement
- oklch Color Space
- Claude Code SKILL.md Docs
