Claude Design 是什么？
Claude Design 是 Anthropic 2026 年 4 月推出的 AI 设计工具，社区在 4 天 内逆向出开源替代 Huashu Design，GitHub Star 一个月破 1.7 万。
- 本质是 skill：一套注入 AI Coding 终端的设计 skill 文件，自然语言描述需求，Agent 自动生成成品，不是 SaaS 产品。
- 七大交付能力：交互原型、可编辑 PPTX、60fps 动画、信息图、设计变体、风格顾问、5 维评审。
- 品牌资产协议：5 步硬流程——问→搜→下载→提取色值→固化 spec，绝不从记忆猜品牌色。
- Junior Designer 工作流：先问澄清问题、先出占位符、尽早展示——理解错比晚发现便宜 100 倍。
- 反 AI Slop 规则：禁止紫渐变、emoji 图标、Inter 字体、过度圆角，用 oklch 色域和 CSS Grid。
- 一句话总结：Claude Design 是更好的图形工具，Huashu Design 让图形工具这层消失。
先搞清楚 Claude Design 是什么
2026 年 4 月 17 日，Anthropic 正式发布了 Claude Design——一个浏览器里的 AI 设计工具。输入描述，输出高保真 UI 原型、幻灯片、动画。目标直接对准 Figma、Adobe、Canva 的设计工具市场。
但我没用过 Claude Design，估计你也没有。因为它是个付费云端产品，有订阅配额，而且只能在 claude.ai 里用。
真正让这件事有趣的，是花叔。
花叔（@AlchainHust），一位中国独立开发者，在 Claude Design 发布当天就开始逆向它的系统提示词。4 天后——2026 年 4 月 21 日——他在 GitHub 上开源了 Huashu Design。
不是"参考了 Claude Design 的思路"，是直接从 Claude Design 的系统提示词里提取设计哲学、重构工作流、写成一套可执行的 skill 文件。他在 README 里写得很直白：品牌资产协议的哲学是从 Claude Design"偷师"来的。
一个月后，GitHub 17,000+ Star，Fork 2,100+，MIT 协议全开源。
Huashu Design 怎么用
不用打开浏览器，不用学任何设计工具。
npx skills add alchaincyf/huashu-design
装完之后，在 Claude Code 里说人话就行：
- "做一份 AI 心理学的演讲 PPT，推荐 3 个风格方向让我选"
- "做个 AI 番茄钟 iOS 原型，4 个核心屏幕要真能点击"
- "把这段逻辑做成 60 秒动画，导出 MP4 和 GIF"
Agent 会自动生成单文件 HTML——里面是完整的高保真设计，能点、能交互、能在浏览器里演示。PPT 能导出成可编辑的 PPTX 文件，不是截图贴进去的。动画能导出 MP4 和 GIF。
花叔管它叫"打字。回车。一份能交付的设计。"我试了几次，3-15 分钟出成品，取决于复杂度。
不是"AI 帮你画图"，是"AI 替你干活"
Huashu Design 和 Midjourney、DALL·E 这类生图工具的根本区别：
生图工具给你像素，Huashu Design 给你 HTML。像素是死的。你拿到一张 PNG，改个文字得打开 Photoshop，换个颜色得重新生成。HTML 是活的——CSS 变量控制全局配色，改一个字就真只改一个字，动画是真 CSS animation 不是录屏。
这就是"设计交付物"和"设计灵感图"的区别。
具体能交付什么：
| 能力 | 产物 | 耗时 |
|---|---|---|
| 交互原型 | 单文件 HTML，真机边框，可点击 | 10-15 分钟 |
| 演讲幻灯片 | HTML Deck + 可编辑 PPTX | 15-25 分钟 |
| 时间轴动画 | MP4 (60fps) + GIF + 背景音乐 | 8-12 分钟 |
| 设计变体 | 3+ 风格并排对比 | 10 分钟 |
| 信息图 | 可导 PDF/PNG/SVG | 10 分钟 |
| 设计顾问 | 40 种风格库，3 版并行出图 | 5 分钟 |
| 5 维评审 | 雷达图 + Keep/Fix 清单 | 3 分钟 |
三个让我觉得"这才是对的"的设计
扒了一遍 skill 文件和源码，有三件事做得特别对。
品牌资产协议：别猜，去查
大多数 AI 设计工具对品牌色的处理是灾难级的——你让它"用 Stripe 的配色"，它从训练数据里回忆，出来的色值偏差 20 个点以上。
Huashu Design 的处理方式：
- 问用户有没有现成的品牌手册
- 搜官网品牌页（
stripe.com/brand、brand.stripe.com） - 下载 SVG → HTML → 产品截图，逐级兜底提取颜色
- Grep 所有
#xxxxxx，按频率排序，过滤黑白灰 - 固化写入
brand-spec.md+ CSS 变量
绝不从记忆猜品牌色。 这是一条硬规则，写死在 skill 文件里。A/B 测试显示 v2 版本的颜色稳定性方差比 v1 低 5 倍。
Junior Designer 工作流：先犯错，早犯错
这是 Huashu Design 的默认工作模式。核心理念：理解错比晚发现便宜 100 倍。
具体做法：
- 先问：把澄清问题批量丢出来，等你全部回答完才开始干活
- 先出占位符：HTML 先塞灰色方块 + 假设标注 + 推理注释
- 尽早展示：哪怕只有几个灰框也先给你看，确认方向对了再填内容
- 增量修改：内容填充 → 风格变体 → 细节微调，每个 checkpoint 等你确认
这其实是把资深设计师的工作习惯写进了 Agent 流程——你敢跳过澄清 直接出图，客户改 5 轮也是活该。
反 AI Slop 规则
"AI Slop"是 2025-2026 年设计圈最火的词，指的是 AI 生成内容的"AI 味"——紫渐变背景、emoji 当图标、Inter 字体、过度圆角、左边框加重色块。
Huashu Design 的 skill 文件里有一组硬性禁止规则：
- ❌ 禁止紫色渐变
- ❌ 禁止 emoji 作为设计元素
- ❌ 禁止过度圆角 + 左边框装饰的模板套路
- ❌ 禁止 SVG 绘制人脸
- ❌ 禁止 Inter 字体用作展示字体
- ✅ 使用
text-wrap: pretty、CSS Grid、serif 展示字体、oklch 色域
这些规则不是"建议"，是 skill 代码里的约束。这个区别很重要——prompt 里的建议可以被模型绕过去，skill 代码层的禁止不行。
Claude Design vs Huashu Design
| 维度 | Claude Design | Huashu Design |
|---|---|---|
| 形态 | 网页产品 | 终端 skill 文件 |
| 收费 | 订阅配额 | API 消耗，可并行 |
| 操作 | 拖拽、点击、编辑 | 对话，Agent 执行 |
| 交付物 | 画布 + Figma | HTML/MP4/PPTX/PDF |
| 动画 | 有限 | Stage+Sprite 时间轴，60fps |
| 跨平台 | 仅 claude.ai | Claude Code / Cursor / Codex 等 |
花叔自己的总结很准：Claude Design 是更好的图形工具，Huashu Design 是让图形工具这层消失。 两条路，不同受众。
我倾向于后者。不是因为开源免费，是因为——我不想学新工具。我已经在终端里干活了，能一句话出设计为什么还要打开浏览器？
局限也很明显
说了这么多好的，短板也得讲：
- 不擅长从零设计品牌。没有品牌资产的项目，设计质量会掉到 60-65 分。品牌协议的存在就是为了避免这种场景。
- 不支持图层级可编辑的 PPTX/Figma 往返。导出的 PPTX 文本可编辑，但不能拖进 Keynote 重新排版。
- 复杂动画超出边界。3D、物理模拟、粒子系统做不了。
- 完全依赖 Agent 的质量。Agent 执行不稳定时，输出自然也不稳定。
本质上是把"设计交付"这件事从 GUI 搬到了终端对话里。搬得还不错，但不是万能。
为什么这件事重要
2025-2026 年 AI 最大的叙事是"Agent 能干活的边界在哪"。
编程、写作、数据分析——这些已经被证明。设计一直是最后一个堡垒——因为设计需要审美判断，审美判断被认为是最"人"的能力。
Claude Design 和 Huashu Design 证明了：审美判断可以被系统化 为可执行的规则。 品牌协议=数据收集规则，Junior Designer 工作流=协作规则，反 AI Slop=品味规则，5 维评审=质量规则。
当审美变成规则，设计就变成了 Agent 可以执行的任务。
这不是"AI 取代设计师"的故事。是会写设计规则的工程师能用上 Agent 的杠杆，不会写的还是得打开 Figma。
References
- Huashu Design GitHub —— 花叔 (@AlchainHust)
- 开源版 Claude Design！一句话 AI 自动生成可交互网页 + PPT 原型 —— AI-GitHub, Bilibili
- Huashu Design Skill 实测：能否成为 Claude Design 的开源平替？ —— 302.AI
- 给 Agent 装上"设计师之眼"：深度解析 huashu-design —— CSDN
- Claude Design 蒸馏出的花叔设计：一句话生成原型动画 PPT 和视频 —— Jdon