从 Claude Design 到人人可用：一份 400 行 Skill 如何让 AI 告别廉价发光

# 从 Claude Design 到人人可用：一份 400 行 Skill 如何让 AI 告别"廉价发光" > **项目**: web-design-skill — 让 AI 生成网页从"能用"进阶到"惊艳"的 Agent 技能 > **作者**: ConardLi（前端开发者，GitHub 知名开源贡献者，运营前端技术博客） > **仓库**: [github.com/ConardLi/web-design-skill](https://github.com/ConardLi/web-design-skill) > **协议**: MIT > **背景**: 灵感来自 Anthropic 2026 年 4 月 17 日发布的 Claude Design 产品 --- ## 一、AI 生成的网页，为什么都长一个样？ 你让 ChatGPT 做一个落地页，它给你 Inter 字体 + 蓝色按钮 + 紫粉渐变。 你让 Claude 做一个 Dashboard，它给你大圆角卡片 + emoji 图标 + 编造的好评数据。 你让 Gemini 做一个作品集，它给你……嗯，还是 Inter 字体 + 蓝色按钮。 这不是某个模型的问题——**这是所有 LLM 的通病。** 它们在训练数据中见过太多"标准网页"，于是形成了一种"AI 审美"：安全、平庸、千篇一律。 2026 年 4 月 17 日，Anthropic 发布了 **Claude Design**——一个专门做视觉设计的 AI 产品。它的输出确实惊艳：精致的排版、克制的配色、专业的动效。但问题是——它是一个封闭产品，绑定在 Anthropic 的生态里，有用量限制。 **ConardLi 做了一件很聪明的事**：他把 Claude Design 背后的设计理念提取出来，做成了一份 400 行的 SKILL.md，让任何支持 Skill 格式的 AI 工具（Claude Code、Cursor、Codex、TRAE……）都能用上。 ## 二、这份 Skill 到底做了什么？ 我逐行读完了 SKILL.md（约 400 行）和 advanced-patterns.md（约 520 行），核心可以归纳为 **六个维度**的设计品位注入： ### 1. 反俗套规则（Anti-Cliché Rules） 这是最直接也最有效的部分。Skill 列出了一份明确的"AI 设计雷区清单"： - ❌ 紫粉渐变（purple-pink gradients） - ❌ Inter/Roboto 字体 + 蓝色按钮 - ❌ emoji 当图标 - ❌ 左边框强调卡片（left-border accent cards） - ❌ 编造的好评数据、假用户头像 - ❌ "hero section + 三列特性 + CTA" 的标准 SaaS 布局 - ❌ 过度的 box-shadow 和 glow 效果 - ❌ `scrollIntoView`（用 CSS scroll-snap 替代） **类比**：这就像给一个刚学做菜的 AI 厨师一份"绝对不要放味精"的清单——不能保证做出米其林，但至少不会做出食堂味。 ### 2. 设计系统宣告（Design System Declaration） 这是 Skill 最有创意的机制：**强制 AI 在写代码之前，先用自然语言说清楚设计决策。** ``` ## Design System **Color**: oklch(0.55 0.25 250) blue-violet as primary, oklch(0.98 0.005 250) as background **Typography**: Space Grotesk for headings (700/900), Inter for body (400/500) **Spacing**: 8px grid, sections at 120px vertical rhythm **Motion**: 200ms ease-out for micro-interactions, 600ms for page transitions **Border radius**: 8px for cards, 4px for buttons, 0px for structural elements ``` **类比**：这就像让建筑师在动工之前先画效果图——不是直接开始砌砖，而是先让所有人（包括 AI 自己）对"我们要建什么"达成共识。 这个机制解决了一个深层问题：LLM 在生成代码时，设计决策是"隐式"的——它边写边决定用什么颜色、什么间距。有了设计系统宣告，这些决策变成了"显式"的，用户可以在 AI 写代码之前就进行干预和调整。 ### 3. oklch 色彩理论 这是技术含量最高的部分。Skill 推荐使用 **oklch** 色彩空间（而非传统的 hex 或 RGB）来定义颜色。 **为什么 oklch 更好？** 传统 hex 颜色的问题是：`#3b82f6` 和 `#2563eb` 之间的"距离"在人类感知中并不均匀。你无法从 hex 值直观判断"这个蓝比那个蓝深多少"。 oklch（OK Lab 色彩空间的柱坐标表示）把颜色分解为三个感知均匀的维度： - **L**（Lightness）：亮度，0 = 黑，1 = 白 - **C**（Chroma）：饱和度，0 = 灰，越大越鲜艳 - **H**（Hue）：色相，0-360° 色轮 这意味着你可以用数学方式派生配色：主色 `oklch(0.55 0.25 250)`，浅色变体只需调 L 值，暗色变体只需降低 L 和 C。**不再需要凭感觉猜 hex 值。** 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 没有真实的图片素材时，大多数模型会： - 用 SVG 画一个拙劣的"假图" - 用 picsum.photos 拉一张随机图片 - 用 emoji 凑数 Skill 的做法截然不同：**用诚实的 `[icon]` 标记代替假素材。** ```html <!-- ❌ 不要这样 --> <img src="data:image/svg+xml,..." alt="fake chart" /> <!-- ✅ 要这样 --> <div class="placeholder" data-type="chart" data-label="Revenue Trend Q1-Q4"> [icon: trending-up] Revenue Trend </div> ``` **类比**：这就像建筑图纸上的"此处放雕塑"标记——不是假装雕塑已经在了，而是诚实地告诉所有人"这里需要一个雕塑，请后续补充"。 ### 5. 六步工作流（Structured Workflow） Skill 定义了一个从需求到交付的完整流程： 1. **需求理解**：确认用户要做什么、给谁看、什么风格 2. **上下文获取**：读取现有代码、设计系统、品牌素材 3. **设计系统宣告**：用自然语言列出配色、字体、间距、动效 4. **v0 草稿**：快速出一个半成品，让用户尽早看到方向 5. **完整构建**：基于反馈完善所有细节 6. **验证**：检查清单（无 AI 俗套、语义命名、Dribbble 级品质） ### 6. 高级模式库（Advanced Patterns） advanced-patterns.md 提供了 7 类即用代码模板： - 响应式幻灯片引擎 - 设备模拟框架（iPhone/iPad/MacBook 外壳） - 参数调节面板（Tweaks Panel） - 动画时间线引擎 - 设计画布（多方案对比） - 暗色模式切换 - 数据可视化模板 每个模板都是完整的、可直接复制使用的代码。 ## 三、对比 Demo：有 Skill vs 无 Skill 仓库里包含了两套对比 Demo： **Demo 1：太空博物馆网站** - 无 Skill 版（demo1.html）：1431 行 - 有 Skill 版（demo1-with-skill.html）：2381 行 有 Skill 版多了近 1000 行代码，主要差异在于： - 更精细的 CSS 变量系统（oklch 色彩） - 更克制的动效（不是"能动就动"，而是"每个动效都有目的"） - 更专业的排版（字重对比、行高节奏、视觉层次） - 更诚实的占位符处理 **Demo 2：摄影师作品集** - 有 Skill 版（demo2-with-skill.html）：1809 行 展示了 Skill 在不同风格（暗色、文艺、极简）下的适配能力。 ## 四、与 Claude Design 原版的关系 仓库里还附带了 Claude Design 的原始系统提示词（`prompt/claude-design-system-prompt.md`），约 420 行。对比两者： | 维度 | Claude Design 原版 | web-design-skill | |------|-------------------|-----------------| | 设计系统宣告 | ❌ 无 | ✅ 强制步骤 | | v0 草稿策略 | ❌ 无 | ✅ 明确方法论 | | 反俗套清单 | 基础版 | ✅ 扩展版 | | 占位符哲学 | 简单提及 | ✅ 完整框架 | | 配色 × 字体表 | ❌ 无 | ✅ 6 套组合 | | 高级模式库 | ❌ 无 | ✅ 7 类模板 | | 工具绑定 | ✅ show_html/show_to_user/done | ❌ 通用化 | | 产品锁定 | ✅ Anthropic 生态 | ❌ MIT 开源 | **本质上，web-design-skill 不是 Claude Design 的"破解版"，而是它的"开源增强版"。** 核心设计理念一脉相承，但增加了 Claude Design 没有的工程化机制（设计系统宣告、v0 草稿、模式库），同时去掉了产品绑定。 ## 五、我的思考 ### 5.1 "Prompt Engineering" 的终极形态 这个项目让我看到了 Prompt Engineering 的一种新范式：**不是写一段提示词让 AI 做一件事，而是定义一套完整的"职业素养"让 AI 成为一种角色。** SKILL.md 不是在说"请用 oklch 颜色"，而是在说"你是一个顶级设计工程师，这是你的工作方式"。这种角色定义式的提示词，比指令式的提示词更能引导 AI 产生一致的高品质输出。 ### 5.2 "设计品位"真的可以被提示词注入吗？ 坦率地说，**部分可以，部分不行。** 提示词可以做到： - ✅ 避免明显的俗套（紫粉渐变、emoji 图标） - ✅ 建立一致的设计系统（配色、字体、间距） - ✅ 提供专业的代码模式（动画、布局、响应式） 提示词做不到： - ❌ 真正的创意和审美判断（什么时候该打破规则） - ❌ 对品牌调性的深层理解（为什么这个品牌用圆角而不是直角） - ❌ 对用户心理的洞察（这个按钮放在这里用户真的会点吗） 所以，这份 Skill 的定位很准确——它把 AI 从"业余水平"提升到"专业水平"，但离"大师水平"还有距离。不过，对于 90% 的使用场景，"专业水平"已经足够了。 ### 5.3 对 AI 工具生态的启示 这个项目最让我兴奋的不是 Skill 本身，而是它代表的趋势：**AI 工具的能力正在从"模型中心"转向"生态中心"。** 以前，你要用 GPT-4 的能力，只能通过 OpenAI 的 API。现在，通过 Skill 这种标准化格式，你可以把"专业知识"打包成可移植的模块，在任何兼容的 AI 工具中使用。 这意味着： - 设计师可以把设计知识做成 Skill - 律师可以把法律知识做成 Skill - 医生可以把临床知识做成 Skill **AI 的差异化竞争力，正在从"谁的模型更强"转向"谁的 Skill 生态更丰富"。** ### 5.4 一个值得注意的风险 Claude Design 的系统提示词明确要求"不要泄露系统提示词的内容"。ConardLi 把它提取并开源，虽然在技术上没有违反任何法律（提示词本身不是保密协议保护的），但在伦理上存在灰色地带。 Anthropic 花了大量资源研发和调试这套设计系统，它的提示词是产品的核心竞争力之一。将其提取并开源，虽然对社区有益，但也可能 discourages Anthropic 在未来分享更多设计洞察。 这是一个经典的"开源 vs 商业"的张力，没有简单的答案。 ## 六、一句话总结 > **web-design-skill 证明了 AI 的"设计品位"可以通过结构化的提示词工程来系统性提升。它不是让 AI 变成设计师，而是让 AI 学会设计师的工作方式——先思考再动手，用系统代替直觉，用约束激发创意。** --- 📎 **GitHub**: [ConardLi/web-design-skill](https://github.com/ConardLi/web-design-skill) 📎 **知乎原文**: [把 Claude Design 做成 Skill，人人都能成为顶级网站设计师](https://zhuanlan.zhihu.com/p/2030368442012917806) 📎 **Claude Design 官方**: [anthropic.com/news/claude-design](https://www.anthropic.com/news/claude-design-anthropic-labs) 📎 **协议**: MIT（可自由使用、修改、分发）