第42章：设计工具全景：Claude Design、OpenDesign、huashu-design 和 baoyu-design
"Claude Design 是给 Figma 这代工具续命。huashu-design 是让 Figma 这代工具自然消亡。"
—— 花叔（@AlchainHust），2026 年 4 月
第 41 章解决了品牌记忆的问题：DESIGN.md 把视觉身份写成文件，谁都能读。这一章解决生成的问题：把一句需求变成能看、能点、能交付的设计。
2026 年 4 月 17 日，Anthropic 发布 Claude Design，第一个给出答案。设计圈把那几天称作"设计圈的 Claude Code 时刻"：Figma 股价当天应声下跌，Anthropic 内部一位设计师覆盖了 7 条产品线。接下来的一个月，社区逆向公开了它的系统提示词，三个开源项目接连出现：花叔的 huashu-design、宝玉的 baoyu-design、nexu-io 的 OpenDesign。一个闭源产品，一个月内带出一个开源生态。
四个工具站在同一条光谱上，一端是画布，另一端是终端。
42.1 Claude Design：从对话到可交付的设计作品
Claude Design 是 Anthropic Labs 的产品，跑在 claude.ai/design，由 Opus 4.7 的视觉能力驱动。输出是代码驱动的设计作品：线框图、可交互原型、演示文稿、营销物料，还支持语音、视频、shader、3D 这类前沿原型。
工作方式是一条直线：描述需求，Claude 出第一版；然后用内联评论、直接编辑、自定义滑块做迭代；满意了导出 HTML、PDF、PPTX，或直接发到 Canva；最后打包交接给 Claude Code 去实现。
真正值钱的是入场动作。第一次使用时，Claude 会读你的代码库和设计文件，自动提炼出团队的设计系统：品牌色、字体、组件样式。之后每次生成，产出自动落在团队规范里。第 41 章讲的 DESIGN.md 干的是同一件事，Claude Design 把这个动作做成了产品功能。
产品很完整，但它闭源，跑在别人的服务器上。发布之初没有 API，没有审计日志，也没有数据驻留保障。重度使用 Agent 工作流的人很快开始问：能不能本地跑？能不能接我自己的模型？
42.2 OpenDesign：把整套产品搬回本地
开源阵营的第一个大动作是 OpenDesign（github.com/nexu-io/open-design）。Claude Design 发布 11 天后它就上线了，Apache-2.0 协议，到 9 月已经 98k star、3700 多次提交。
它是 macOS 和 Windows 的本地桌面应用。README 里那句话说得很准：你的 CLI 就是设计引擎，你的笔记本就是工作室，你团队的 DESIGN.md 就是品牌契约。
设计引擎指的就是你机器上已有的编码 Agent。OpenDesign 官方适配 Claude Code、Codex、Cursor、OpenCode、Copilot、Hermes、Kimi、OpenClaw 等 26 个本地 CLI，还能通过 BYOK 接任意 OpenAI 兼容接口。Anthropic 那套 agent-native 流程：读懂 brief、锁定方向、流式产出、自我批评、交付。OpenDesign 把它拆开摊平，变成一堆 skill、渲染模板、设计系统和插件，放在文件系统里，你笔记本上的编码 Agent 都能读、能写、能改。
Studio 里六类产物共用一个工作台：Prototype（网页原型）、Deck（演示文稿）、Mobile app（手机原型，带真机预览）、Image（图像）、Document（文档）、HyperFrame（代码驱动的动效图形）。预览跑在沙箱 iframe 里，导出 HTML、PDF、PPTX、MP4。
和第 41 章的接口在这里：Design System 页面从品牌参考资料里提取视觉语言，生成一份 brand-grade 的 DESIGN.md，之后 Studio 里所有产物都遵守这份契约。你可以自己写 DESIGN.md 喂给它，也可以让它替你起草。
接入方式延续 skill 生态的路数，一条命令挂成 Claude Code 的 MCP 服务：
od mcp install claude
想省事可以订阅 OpenDesign Cloud，官方托管的模型服务，GPT、Claude、DeepSeek 都能用；不想订阅就全走本地。
42.3 huashu-design：agent-first，让工具层消失
花叔（@AlchainHust）走了另一条路。Claude Design 发布当晚他玩到凌晨四点，几天后却发现再没点开过它。他把原因归到自己身上：他宁愿让 Agent 在终端里干活，不愿打开任何图形界面。于是他把社区逆向出来的系统提示词蒸馏成结构化 spec，结合自己之前的设计探索写成一个 skill，装进自己的 Claude Code。上亿 token 的测试迭代之后，他把 skill 开源，仓库在 github.com/alchaincyf/huashu-design，2026 年 5 月起改用 MIT 协议，个人和商用都免费。安装一条命令：npx skills add alchaincyf/huashu-design，Claude Code、Cursor、Codex、OpenClaw、Hermes 都能装。
他的判断是 agent-first 和 GUI-first 的分野。Claude Design 本质是把设计师塞进 Claude 里，你还是在一个更好的图形工具上操作。huashu-design 想让图形工具这一层消失：你告诉 Agent 要什么，Agent 自己读品牌资产、自己建 spec、自己生成 HTML、自己跑验证。你最后看到的是一个能直接用的 MP4、一套能截图的 PPT、一个能给产品经理演示的 iOS 原型。
他说过一个例子：要准备一场 AI 心理学演讲的 PPT，他在终端里说，不知道用什么风格，推荐 4 个差异化方向。huashu-design 启动"设计方向顾问"模式，从 20 种预置设计哲学里（Pentagram 的信息建筑、原研哉的东方极简、Sagmeister 的实验先锋）挑出差异最大的 4 个方向，并行 4 个 agent。40 分钟后，4 套 17 页的 PPT 摆在面前：北大学术版、博尔赫斯文学版、投行严肃版、禅意极简版。他要做的只剩选。
huashu-design 最核心的一条规矩继承自 Claude Design 的提示词：好的高保真设计不从白纸开始，从已有的设计上下文里长出来。凭空画高保真稿一定是 generic 的，他说这是 65 分作品和 90 分作品的分水岭。花叔把它落成 5 步硬流程，专门处理"用户只给了一个品牌名"的场景：
- 问：这个品牌有 brand guidelines 吗？有就直接给，没有我去搜。
- 搜官方品牌页：brand.com/brand、brand.brand.com、brand.com/press，这些页面藏着最权威的 logo 和色值。
- 下载资产，三条兜底：独立 SVG 文件，官网 HTML 里的 inline SVG，产品截图取色。前一条失败立刻走下一条。
- grep 提取真实色值：正则抓出全部 6 位 hex，按频率排序，过滤黑白灰。绝不从记忆里猜品牌色。
- 固化成项目根目录的 brand-spec.md，所有 CSS 变量引用这份文件。留在内存里，下一页就忘。
5 步每步都有兜底，但不许静默跳过。他做过 A/B 测试：加入这套协议后，同一批任务的稳定性方差低了 5 倍。均值没高多少，方差小了很多。稳，才是 skill 的护城河。
还有一条硬规则：App 原型交付前必须跑 Playwright 自动点击测试，确保每个按钮点了不白屏。没有这条，一半的"可点击原型"最后都不能点。
他能做什么、做不到什么，自己列得很清楚。能做到：17 页以上的完整 PPT、真 iPhone bezel 的可点击原型、60fps 动画导出 MP4、信息图、设计变体探索。做不到：图层级可编辑的 PPTX（Claude Design 能导去 Figma），Framer Motion 级别的复杂动画，品牌资产完全为零的原创设计（质量掉到 60 到 65 分）。他的自我评价："我做的是一个 80 分的 skill，不是 100 分的产品。但对不愿打开图形界面的人，80 分的 skill 比 100 分的产品好用。"
42.4 baoyu-design：把引擎打包成一个 skill
宝玉（JimLiu）的做法最直接：把 claude.ai/design 背后的设计引擎打包成一个可移植的 Agent Skill（github.com/JimLiu/baoyu-design，MIT 协议）。装进本地 Agent，网页版的大部分能力就都在编辑器里了：UI 高保真稿、交互原型、线框图、落地页、dashboard、手机 App、幻灯片。产物全部是自包含的 HTML，落在项目的 designs/
官方 README 用同一个 prompt 在四个环境里各跑了一遍 Reader Mac App。下面两张分别是 Claude Design 官网和 Cursor 里 baoyu-design 的输出：
安装走 Vercel Labs 的 skills CLI，自动识别你用的 Agent：
npx skills add JimLiu/baoyu-design # 装进当前项目
npx skills add JimLiu/baoyu-design -g # 全局安装
npx skills add JimLiu/baoyu-design --agent cursor
它支持 70 多个 Agent，Cursor、Claude Code、Codex 三个有一等公民待遇：skill 内部带了各自的工具映射文档。
整个 skill 就是 markdown 加几个 JSX/JS 脚手架，没有构建步骤，没有运行时：
skills/baoyu-design/
├── SKILL.md # 入口，编排整个流程
├── system-prompt.md # 设计方法论和工艺标准，唯一事实来源
├── references/
│ ├── claude.md # Claude Code 的工具映射
│ ├── cursor.md # Cursor 的工具映射
│ └── codex.md # Codex 的工具映射
├── built-in-skills/ # 专项提示词：deck、mobile、导入导出
└── starter-components/ # 设备壳、画布、幻灯、图表、3D、水彩画运行时
工艺规则与 harness 无关，放在 system-prompt.md 里；提问、预览、截图、验证用什么工具，各环境查自己的映射文档。这一层拆分让 skill 可移植。
它比网页版强的地方在迭代方式。产物是跑在 localhost 的纯 HTML，你用编辑器自带的浏览器预览加元素标注工具，指着一个按钮说要改什么，Agent 直接改源码。指哪改哪的迭代，网页版做不了。
官方建议配 Claude Opus 4.8。skill 本质是一份很长、要求很高的设计 brief，模型越强，效果越好。
42.5 四个工具，一张光谱
| Claude Design | OpenDesign | huashu-design | baoyu-design | |
|---|---|---|---|---|
| 形态 | 闭源网页产品 | 开源桌面应用 | Agent Skill | Agent Skill |
| 界面 | 画布、评论、滑块 | 桌面 Studio | 终端对话 | 终端加编辑器预览 |
| 设计引擎 | Opus 4.7，官方托管 | 你自己的 Agent，26 个 CLI 可选 | 你自己的 Agent | 你自己的 Agent |
| 品牌来源 | 入场时自动建设计系统 | 提取或自备 DESIGN.md | 品牌资产协议 5 步 | 收集设计上下文 |
| 产物 | 线框、原型、deck、物料 | 原型、deck、App、图像、文档、动效 | PPT、App 原型、动画、信息图 | 自包含 HTML |
| 导出 | HTML、PDF、PPTX、Canva | HTML、PDF、PPTX、MP4 | MP4、图片、可点原型 | designs/ 目录 |
| 费用 | 订阅 | 免费自托管，云服务可选 | 免费 | 免费 |
选型可以这样定：设计师，或者需要 Figma 级交接的团队，用 Claude Design；要开源、要本地、要多 Agent 混跑，用 OpenDesign；终端重度用户，用 huashu-design；想在编辑器里指着画面迭代，用 baoyu-design。
42.6 与全书方法论的对接
- 第 41 章：DESIGN.md 是这四个工具的公共地基。Claude Design 把"提炼设计系统"做成入场动作，OpenDesign 直接拿 DESIGN.md 当品牌契约，huashu-design 的 brand-spec.md 是它的民间变体。格式是开放的，工具在哪都能用。
- 第 40 章：品味的载体都是 prompt 和 skill。四个工具里没有一个靠微调模型改品味，全是把设计规则写进提示词：负面清单、工艺标准、设计哲学。
- 第 22 章 和 第 36 章：花叔的路径是逆向、蒸馏、重组，把一个闭源产品的行为拆成 spec，再写成自己的 skill。这和用 UML 拆代码、用 teach 读代码库是同一个动作，对象从代码换成了产品。
- 第 25 章：交付前自动验证的思想到处都是。huashu-design 的 Playwright 点击测试、baoyu-design 的预览验证，都是把质量闸门写死在流程里，不靠自觉。
- skill 的通用形态：baoyu-design 整个就是 markdown 加脚手架，无构建、无运行时，和第 35 章那些 Bonus Skill 长得一样。设计工具没有发明新形态，它只是把 Agent Skill 用在了设计上。
42.7 本章小结
- Claude Design 开了 Agent 设计这个品类：对话生成、内联迭代、入场自动提炼设计系统、交接 Claude Code。产品完整，但闭源托管。
- OpenDesign 把它搬回本地：桌面应用，你的 Agent 做引擎，DESIGN.md 做品牌契约。Apache-2.0，5 个月 98k star。
- huashu-design 走 agent-first：品牌资产协议 5 步，设计方向顾问，Playwright 硬验证，定位是 80 分的 skill。
- baoyu-design 最轻：把设计引擎打包成一个 markdown skill，70 多个 Agent 可装，指哪改哪。
- 四个工具共享同一个地基：DESIGN.md 式的品牌文件、prompt 承载的品味、交付前的自动验证。选哪个，看你想站在光谱的哪一端。
下一章换个话题看架构图：怎么让 Agent 把系统的结构画给人看。