[深度研究] 把 Claude Design 的设计品味偷出来，做成开源 Skill

# 把 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](https://github.com/ConardLi/web-design-skill) > **协议**: MIT > **作者**: ConardLi > **灵感来源**: [Claude Design (Anthropic)](https://www.anthropic.com/news/claude-design-anthropic-labs)