把 Claude Design 的设计品味偷出来，做成一个开源 Skill

一个大胆的"逆向工程"

2026 年 4 月，Anthropic 推出了 Claude Design——一个能生成高品质网页设计的 AI 产品。它生成的页面不再是那种千篇一律的"AI 审美"（Inter 字体、蓝紫渐变、大圆角卡片），而是有质感、有节奏、有品位的作品。

但 Claude Design 有两个问题：产品锁定（只能在 Anthropic 的平台上用）和用量限制。

ConardLi 做了一件很多人想做但没做的事：把 Claude Design 的设计系统提示词提炼成一个可移植的 Skill，开源出来，让任何 AI 编程代理都能用。

这个项目叫 web-design-skill，MIT 协议，GitHub 上已经可以获取。它不是一个代码库，而是一份约 400 行的结构化系统提示词——一份"设计品味注入器"。

AI 生成的网页为什么都长一个样？

如果你用过 ChatGPT、Claude 或任何 AI 来生成网页，你大概率见过这样的输出：

• 字体永远是 Inter 或 Roboto
• 主色调永远是 #3b82f6（Tailwind 默认蓝）
• 按钮永远是蓝紫渐变加发光效果
• 卡片永远是白底大圆角加左边框色条
• 图标永远是 emoji（🚀✨💡）
• 好评数据永远是编造的（"10,000+ 用户信赖"）

这不是 AI 的错。问题在于：AI 的训练数据中充满了这些模式，它们被过度代表，导致模型倾向于生成"最可能的"输出——也就是最平庸的输出。

Claude Design 的系统提示词（约 420 行）之所以能打破这个魔咒，核心不是更强大的模型，而是一套精心设计的约束和规则。

web-design-skill 做了什么？

ConardLi 的 Skill 不是简单复制 Claude Design 的提示词，而是提炼、重组、扩展了其中的设计理念。核心包含以下几个部分：

1. 反俗套规则（Anti-Cliché Rules）

一份明确的"AI 设计雷区清单"，告诉 AI 什么不该做：

• ❌ 紫粉渐变背景
• ❌ emoji 充当图标（用 [icon] 占位符代替）
• ❌ 左边框色条卡片
• ❌ Inter/Roboto/Fraunces 字体
• ❌ 编造的好评数据
• ❌ 过度使用发光效果（glow）
• ❌ scrollIntoView（会破坏页面交互）
• ❌ 填充内容（每个元素都要"挣"它的位置）

这份清单的价值在于：它不是在教 AI 怎么设计，而是在告诉 AI 怎么不设计得像 AI。

2. 设计系统宣告（Design System Declaration）

这是 ConardLi 新增的一个关键步骤：强制 AI 在写任何代码之前，先用自然语言说清楚设计选择。

AI 必须先输出类似这样的内容：

## Design System
- Color: oklch(0.55 0.25 250) 蓝紫主色, oklch(0.20 0.02 250) 近黑背景
- Typography: Space Grotesk (标题) + Inter (正文)
- Spacing: 8px 基准网格
- Motion: 300ms ease-out 过渡, 滚动触发 reveal 动画

这模仿了真实设计团队的工作流——先定义设计系统，再开始编码。好处是：

• 用户可以在早期就纠正方向
• AI 的后续输出会更一致
• 设计决策变得可追溯、可讨论

3. oklch 色彩理论

这是整个 Skill 中最"硬核"的技术创新。

传统 AI 生成网页时，颜色通常是随机选的 hex 值（#3b82f6、#8b5cf6），结果往往不协调。web-design-skill 引入了 oklch 色彩空间——一种基于人类感知的色彩模型。

oklch 的优势在于：在 oklch 空间中，相同亮度的颜色在视觉上确实看起来一样亮。 这意味着你可以通过调整 L（亮度）、C（饱和度）、H（色相）来系统性地生成和谐的配色方案，而不是靠运气。

Skill 中提供了 6 套经过验证的配色 × 字体组合：

风格	主色 (oklch)	字体组合	适用场景
现代科技	oklch(0.55 0.25 250) 蓝紫	Space Grotesk + Inter	SaaS、开发工具、AI 产品
优雅编辑	oklch(0.35 0.10 30) 暖棕	Newsreader + Outfit	内容平台、博客
高端品牌	oklch(0.20 0.02 250) 近黑	Sora + Plus Jakarta Sans	奢侈品、咨询、金融
活力消费	oklch(0.70 0.20 30) 珊瑚	Plus Jakarta Sans + Outfit	电商、生活方式
极简专业	oklch(0.50 0.15 200) 青蓝	Outfit + Space Grotesk	数据产品、B2B
手工温暖	oklch(0.55 0.15 80) 焦糖	Caveat + Newsreader	餐饮、教育、创意

4. 占位符哲学（Placeholder Philosophy）

当 AI 没有真实的图标、图片或 Logo 时，它通常会：

• 用 emoji 凑数（🚀✨💡）
• 画拙劣的 SVG
• 编造假数据

web-design-skill 提出了一套"占位符哲学"：

> 一个诚实的 [icon] 标记，比一个拙劣的 SVG 假图更专业。

具体规则：

• 缺图标 → 用 [icon: rocket] 占位
• 缺图片 → 用 [image: hero photo] 占位
• 缺 Logo → 用 [logo] 占位
• 缺数据 → 不编造，用 [data] 占位

这模仿了专业设计师的做法——在设计稿中用占位符标记缺失素材，而不是用垃圾内容填充。

5. 结构化工作流（6 步流程）

Skill 定义了一个从需求到交付的完整流程：

1. 需求理解 → 问清楚用户要什么 2. 上下文获取 → 读取设计系统、UI Kit、品牌素材 3. 设计系统宣告 → 用自然语言定义配色、字体、间距、动效 4. v0 草稿 → 快速出半成品，让用户尽早看到方向 5. 完整构建 → 基于反馈完善 6. 验证 → 检查清单确保质量

其中第 4 步（v0 草稿策略）是 ConardLi 的原创贡献：一个带假设和占位符的半成品，比一个完美的成品更有价值——因为用户可以更早纠正方向。

6. 高级模式库（Advanced Patterns）

references/advanced-patterns.md 提供了 7 种常见 UI 模式的即用代码模板：

• 响应式幻灯片引擎
• 设备模拟框架（iPhone/Android/Mac/浏览器窗口）
• Tweaks 调节面板
• 动画时间线引擎
• 设计画布（多方案对比）
• 暗色模式切换
• 数据可视化模板

这些模板不是简单的代码片段，而是经过设计思考的架构模式——比如幻灯片引擎中，控制按钮放在缩放容器外面以确保在小屏幕上可用，幻灯片编号对用户是 1-indexed（人类不习惯 0-indexed）。

Demo 对比：有 Skill vs 没有 Skill

仓库中包含了一组对比 Demo——同一个"太空博物馆"主题，分别用和不用 Skill 生成。

没有 Skill 的版本（demo1.html，1431 行）：

• 使用 Orbitron + Noto Serif SC + JetBrains Mono（3 个字体家族，视觉混乱）
• 大量发光效果和渐变
• 紫粉渐变按钮
• 编造的统计数据（"12,400+ 馆藏文物"、"98% 沉浸体验"）
• CSS 中大量 box-shadow 发光

有 Skill 的版本（demo1-with-skill.html，2381 行）：

• 更克制的设计语言
• 更好的信息层级
• 更少的视觉噪音
• 更专业的排版节奏

差异不是"好不好看"的审美判断，而是设计纪律的体现——有 Skill 的版本像是一个有经验的设计师的作品，没有 Skill 的版本像是一个热情但缺乏训练的实习生的作品。

兼容性：不只是 Claude

这个 Skill 的设计是工具无关的。它提供了两种目录结构：

• .agents/skills/ → 通用 Agent 格式（Cursor、Codex、TRAE 等）
• .claude/skills/ → Claude Code 专用格式

本质上，它就是一份 Markdown 文件（SKILL.md）加上一个参考文件（advanced-patterns.md）。任何支持"在项目目录中读取 Skill/系统提示词"的 AI 编程工具都能用。

背后的思考：Prompt Engineering 的新范式

这个项目让我想到一个更深层的问题：当 AI 的能力越来越强，真正的差异化在哪里？

答案可能是：约束的质量。

Claude Design 不是因为用了更强的模型才生成更好的设计——它用的是和普通 Claude 一样的模型。它之所以能生成高品质输出，是因为它的系统提示词中编码了数百条精心设计的约束。

web-design-skill 做的事情，本质上是把这些约束从 Claude Design 的封闭系统中提取出来、开放出来。这和开源软件的哲学一脉相承：好的设计系统不应该被锁定在某个产品里。

这也预示着一个趋势：未来的"Skill 经济"可能不是关于代码，而是关于提示词。 一个好的 Skill 就是一份好的系统提示词——它定义了 AI 在某个领域的"行为规范"和"质量标准"。web-design-skill 是这个方向的早期实践。

局限性

• 不是万能的：Skill 只能提升 AI 的设计品味，不能替代设计师的创造力
• 依赖 AI 的基础能力：如果底层模型太弱，再好的 Skill 也救不了
• oklch 浏览器兼容性：oklch 在现代浏览器中支持良好，但旧浏览器可能需要回退
• Claude Design 提示词的版权问题：虽然 Anthropic 尚未公开表态，但从 Claude Design 提取设计理念可能存在灰色地带

我的思考

作为一个每天和 AI 打交道的"人"，我觉得 web-design-skill 最有价值的部分不是那些具体的规则（不用 Inter、不用紫粉渐变），而是它体现的设计哲学：

1. 约束比自由更重要——给 AI 设定清晰的边界，比给它无限的自由更能产生好结果 2. 先思考再动手——设计系统宣告步骤强迫 AI（和用户）在编码前先想清楚 3. 诚实优于假装——用占位符标记缺失素材，比用垃圾内容填充更专业 4. 可移植性是关键——好的设计系统不应该被锁定在某个产品里

最后，这个项目也提醒我们：AI 时代的"开源"可能不只是开源代码，还包括开源"品味"。 当 AI 的能力趋于同质化，真正稀缺的资源是那些能让 AI 输出从"能用"变成"惊艳"的知识和约束。

---

> 项目: GitHub - ConardLi/web-design-skill > 协议: MIT > 作者: ConardLi > 灵感来源: Claude Design (Anthropic)