开源版 Claude Design？5 分钟看懂 Open Design——本地运行、自架部署、多 Agent 协作

你有没有想过，只要跟 AI 说一句“帮我做一个 Stripe 那种简洁优雅风格的 SaaS 落地页”，就能拿到真正可编辑的代码——而不是在 Figma 里一帧一帧地打开画布？这支来自菲莉 AI 快報的视频，用五分钟讲清楚了这个想法背后的工具：Open Design。本文按照视频的结构改写，基于其讲解内容，并针对当前版本做了更新。

Open Design 的工作区：描述你想要什么、选一种模式，你接入的 agent 就会把它做出来。

什么是 Open Design？

正如视频所说，可以把 Open Design 想象成开源版的 Claude Design——但它不只是一个图片生成工具。它更像是你电脑里已经装好的 Claude Code、Codex、Cursor 或 Gemini CLI，被扩展成了一套本地优先的 AI 设计环境。

• 开源，Apache-2.0——Open Design 本身没有订阅费，代码可自由阅读、自架部署、二次修改。
• 本地优先且可自架——桌面应用、守护进程和项目文件尽量运行在你自己的环境里，而不只是别人的云端。
• 自带 Agent（多 Agent）或自带密钥——它运行在你已经在用的编码 agent 之上，包括 Claude Code、Codex、Cursor、GitHub Copilot CLI 和 OpenCode；你可以用自己的模型 API key，也可以用官方路由按 token 用量计费。
• 不止是原型——产出不只是一张图。它生成真正的 HTML、PDF、PPTX 和 MP4 产物，可以交付、也可以持续迭代，而不是一次性的截图。

它想解决的问题

视频用工程视角描述了 Open Design 的出发点：如果你已经有一个强大的编码 agent，为什么只让它写代码？Open Design 把这个 agent 的设计能力延伸出去——给它模板、设计系统等等——让产品从单纯“能跑”变成“可见、可交付、可修改”。它要的不是让模型画一张好看的图，而是一个可以持续被操作、被改动的设计产物。

视频里的四个亮点

1. 本地优先，自带 Agent。桌面应用、守护进程和项目文件尽可能运行在你自己的环境里。模型可以用自己的 API key，也可以用官方路由。把数据握在自己手里，而不是完全依赖云端祈祷。

2. 设计系统。一个核心功能是基于品牌的设计系统——从你现有的品牌网站、Figma 文件、截图或浏览器剪辑里，提取颜色、字体、组件和语气规则，整理成一套可复用的规则集。AI 不再每次都临时发挥，而是照着一套提取出来的规则来做——更像是每次打开同一个“品牌盒子”，而不是开盲盒。

设计系统：从品牌里提取可复用的颜色、字体、组件和语气，并在此基础上继续构建。

3. 实用的输出格式。落地页、仪表盘、移动应用原型、演示文稿、图片和视频，都能从同一个工作区里产出——可以导出为 HTML、PDF、PPTX 或 MP4。重点不是“哇，好好看”，而是真的能拿去进行下一步工作。

4. Agent 原生，而非又一个封闭 AI。Open Design 没有另起炉灶做一个封闭的 AI，而是接入你已经在用的工具——Claude Code、Codex、Cursor、Copilot CLI、OpenCode 等等。它不是给开发者当吉祥物的存在，而是像一个跟你现有 agent 并肩作战的队友。

插件与更广的生态

除了设计系统，Open Design 还自带一个可浏览的插件与模板库，覆盖原型、幻灯片，以及图片/视频生成的起点，让你不必每次都从空白画布开始。

插件中心：浏览可安装的 skill 与模板，扩展你接入的 agent 能生成的内容。

真实使用场景

视频里列举了一些具体的日常场景：独立开发者做产品页，产品经理搭一份季度 KPI 仪表盘，创作者为社交媒体生成一组轮播图或短视频分镜，前端团队把品牌网站整理成一份 DESIGN.md 文档。正如视频所说，Open Design 更像是一台给设计师用的咖啡机——豆子（你的方向、品牌规则和审美判断）还是得自己挑。

快速上手

有两种方式可以快速试用。普通用户直接下载桌面应用；开发者可以用 Docker 或从源码运行。要把它接入某个编码 agent，可以用 od mcp install codex（或 cursor、claude 等），然后直接对 agent 说一句话，比如“用简约风格帮我做一个 SaaS 落地页”。

和其他工具的对比

• 对比 Claude Design——Open Design 的优势在于开源、可自架、支持多 Agent；视频也指出，在整体成熟度上它可能还在追赶。
• 对比 v0、Lovable 和 Bolt——Open Design 更偏向“本地 agent + 设计系统 + 多种输出格式”的组合，而不是单一的托管式生成流程。
• 对比 Midjourney——它要的不是一张单独的图片，而是一整套能产出可交付物的工作流。

适合谁用

视频把 Open Design 推荐给四类人：已经在用编码 agent 的开发者、需要快速出 Demo 的产品经理、想做社交媒体图片和演示文稿的创作者，以及对 agent 原生设计工作流和数据自主权感兴趣的人。如果你只是想零配置打开一个网页随便看看，它可能不会取代你现在顺手的那个工具。

需要了解的局限

视频也很坦诚地指出两点局限：第一，这不是一个完全零技术门槛的工具——熟悉一点本地安装、API key 和守护进程会更顺手。第二，输出质量很大程度上取决于模型、提示词、你喂给它的设计系统，以及你自己的审美判断——别指望一键就能召唤出一位资深设计总监。对于成熟的多人协作、精细的矢量编辑和完整的交付规范，视频认为目前 Figma 依然更稳妥；Open Design 更像是一个“AI 生成并部署”的工作环境——先由你定好方向、布局和品牌规则，再交回给 agent 或设计师做进一步打磨。

常见问题

Open Design 真的是开源的吗？ 是的——它基于 Apache-2.0 协议，工具本身没有订阅费。

是不是完全不用花钱？ 模型费用不会凭空消失。自带密钥（BYOK）可以对接 OpenAI、Anthropic、Google 等服务商；使用官方路由则按 token 用量计费。

它能配合哪些编码 agent 使用？ 视频里提到了 Claude Code、Codex、Cursor、GitHub Copilot CLI 和 OpenCode 等——它的设计初衷是接入你已经在用的 agent，而不是取代它们。

它能取代 Figma 吗？ 不能。正如视频最后所说，Open Design 不是一个完美的 Figma 替代品，也不是什么一键魔法设计师。它指向的是另一个方向：未来的设计工具或许不只是画布，而是由 AI agent、设计系统、模板和插件共同组成的一套工作流。

它只能生成图片吗？ 不是——它的输出可以是 HTML、演示文稿、PDF 和视频，也可以通过设计系统来延展一个品牌，让结果不必每次都从零发挥。

---

这篇图文指南基于菲莉 AI 快報对 Open Design 的讲解。观看上方完整视频，并订阅菲莉 AI 快報获取更多 AI 工具讲解。