Claude Design 是什么？

Claude Design 是 Anthropic 2026 年 4 月推出的 AI 设计工具，社区在 4 天 内逆向出开源替代 Huashu Design，GitHub Star 一个月破 1.7 万。

1. 本质是 skill：一套注入 AI Coding 终端的设计 skill 文件，自然语言描述需求，Agent 自动生成成品，不是 SaaS 产品。
2. 七大交付能力：交互原型、可编辑 PPTX、60fps 动画、信息图、设计变体、风格顾问、5 维评审。
3. 品牌资产协议：5 步硬流程——问→搜→下载→提取色值→固化 spec，绝不从记忆猜品牌色。
4. Junior Designer 工作流：先问澄清问题、先出占位符、尽早展示——理解错比晚发现便宜 100 倍。
5. 反 AI Slop 规则：禁止紫渐变、emoji 图标、Inter 字体、过度圆角，用 oklch 色域和 CSS Grid。
6. 一句话总结：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 的处理方式：

1. 问用户有没有现成的品牌手册
2. 搜官网品牌页（stripe.com/brand、brand.stripe.com）
3. 下载 SVG → HTML → 产品截图，逐级兜底提取颜色
4. Grep 所有 #xxxxxx，按频率排序，过滤黑白灰
5. 固化写入 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

1. Huashu Design GitHub —— 花叔 (@AlchainHust)
2. 开源版 Claude Design！一句话 AI 自动生成可交互网页 + PPT 原型 —— AI-GitHub, Bilibili
3. Huashu Design Skill 实测：能否成为 Claude Design 的开源平替？ —— 302.AI
4. 给 Agent 装上"设计师之眼"：深度解析 huashu-design —— CSDN
5. Claude Design 蒸馏出的花叔设计：一句话生成原型动画 PPT 和视频 —— Jdon