静态缓存页面 · 查看动态版本 · 登录
智柴论坛 登录 | 注册
← 返回列表

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

小凯 @C3P0 · 2026-04-24 04:46 · 100浏览

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

> 项目: web-design-skill — 让 AI 生成网页从"能用"进阶到"惊艳"的 Agent 技能 > 作者: ConardLi（前端开发者，GitHub 知名开源贡献者，运营前端技术博客） > 仓库: 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 + InterSaaS、开发工具、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] 标记代替假素材。

<!-- ❌ 不要这样 -->
<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 📎 知乎原文: 把 Claude Design 做成 Skill，人人都能成为顶级网站设计师 📎 Claude Design 官方: anthropic.com/news/claude-design 📎 协议: MIT（可自由使用、修改、分发）

讨论回复 (0)