开源版 Claude Design —— 完全免费的 AI 设计系统
WorldofAI 拆解了 Open Design 究竟是什么、为何能在 GitHub 上爆火，以及如何在你已经在用的编码 agent 之上，用它来生成落地页、路演 PPT 和移动应用——不绑定单一模型，也无需付费订阅。
本指南是 WorldofAI 那期 Open Design 概览视频的文字版伴读——与其说是一份安装教程，不如说是一次“这东西到底是什么、为什么重要”的拆解。我们沿用 WorldofAI 的视频的叙述框架，重新改写并对照当前版本做了更新。想看实时演示就直接看上方视频，想先理解概念就接着往下读：Open Design 是什么、为何能火、你能用它做什么，以及如何上手。
Open Design 工作区：原型、幻灯片、图片和视频都从同一个地方开始。
Open Design 是什么？
Open Design 是一个开源、本地优先的设计平台——它是 Claude Design 和 Figma 的 agent 原生替代品。其核心理念简单却不落俗套：它不是一个绑死在单一模型供应商上的封闭应用，而是运行在你已经在用的编码 agent 之上。
把它指向某个项目文件夹，它就会扫描你机器上已安装的编码 agent CLI——Claude Code、Codex、Cursor、Gemini、Copilot、OpenCode，以及一长串其他工具——然后让你挑一个来驱动生成。被选中的那个 CLI 就成了你的设计 agent。你不是自带 key 再被加价抽成；你是自带 agent，用你本就在付费的订阅或套餐来跑设计。
而且它是真正本地化的。底层有一个 daemon，拥有真实的文件系统访问权限：它读写文件、执行命令，并把状态持久化到本地的 SQLite 数据库里。你的设计就在你自己的文件夹中，你的项目归你所有，没有任何东西必须绕道别人的云端来回跑一趟。在这个本地运行时之上，还有导出管线（HTML、PDF、幻灯片、ZIP）、Claude Design 的 ZIP 导入，以及供 agent 间访问你设计文件的 MCP 服务器——所以它是嵌进你已有的工具链，而不是取而代之。
为什么它火了
Open Design 成了 GitHub 上增长最快的开源项目之一，WorldofAI 把原因讲得很清楚，归结为三点。
它开源且免费。采用 Apache-2.0 许可——可以克隆、可以自托管、每一行代码都能读。没有订阅来卡你的访问，也没有额外的席位要买。你只需为所连接的 agent 和供应商的模型与媒体用量付费。相比之下，Claude Design 藏在付费墙后面，且很快就会把速率额度烧光；认真做几次生成，你就已经在掂量那笔超额用量的账单了。
它是自带 agent，而不只是自带 key。正是这一点改写了整套算账逻辑。大多数“开源替代品”仍把你拴在单一模型上——你换了个 API key，可你还是身处别人的生态里。Open Design 会检测你系统上已有的编码 agent CLI，并把生成路由到你选定的那一个。想用高推理强度跑 Codex？还是更偏好 Claude Code、OpenCode、Gemini CLI，或者像 MiniMax 这类高效开源模型来做 Web 活儿？你说了算，可按项目而定。没有多模型锁定。而如果你没有配置任何 CLI，还有一个 OpenAI 兼容的自带 key 代理，能在不做本地配置的情况下跑同样的工作流。
可以一键嵌入任何项目的真实设计系统——这样你就不必从一张白纸开始。
设计是建立在代码之上的，而不只靠一个图像模型。这是它低调却关键的差异化所在。Open Design 自带一个由可组合的 skill 和完整设计系统构成的库，所以你生成的不是一张一次性的图——你生成的是真实、结构化、生产级的设计。因为产出的构建方式与代码一致，它能从设计直接走向生产：把生成的文件交给另一个编码 agent，继续往下做。WorldofAI 的结论是：其产出质量足以与 Claude Design 抗衡，同时做得更多——而且不会把你困在某一家供应商上。
你能用它做什么
Open Design 不是只会一招的 UI 生成器。在同一个工作区里，你可以产出：
- 高保真原型和落地页——完整的带样式页面，不只是线框图，且是基于真实的设计系统构建。
- 幻灯片和路演 PPT——结构清晰、带动画、分段规整的演示文稿。
- 杂志与编辑版式——长滚动的编辑稿件、年报式文档，以及其他丰富的版式。
- 移动应用界面——看上去是精心设计、而非自动生成的精致 App 界面。
- 图片——通过你所连接的媒体供应商生成素材（例如 OpenAI 的图像模型）。
- 视频与音频——动效与声音同样从一处产出，依旧用你自己的供应商 key。
应用里内置的示例画廊——落地页、幻灯片、设计系统——一眼就能让人看清它的覆盖范围。这一切都出自同一个工具，由你选定的 agent 驱动，而且你可以自由混用模型，不必被限定在某一家供应商上。
如何上手
你有三种方式来运行 Open Design，挑一种适合你的：
| 方式 | 适合谁 | 需要什么 |
|---|---|---|
| 桌面应用 | 大多数人——零配置 | 无。下载即开。 |
| 从源码运行 | 想读或改代码的开发者 | Node ~24、pnpm（通过 Corepack） |
| 装进你的 agent | 常驻终端的人 | 一个已有的编码 agent CLI |
桌面应用（推荐）。访问 open-design.ai，下载对应你平台的桌面版本并打开它。无需 Node、无需 pnpm、无需克隆——应用会自动检测你 PATH 上的编码 agent CLI，并为你加载内置的 skill 和设计系统。
从源码运行——也就是 WorldofAI 在视频里走的那条路——只需四条命令：
git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable && pnpm install
pnpm tools-dev run web然后打开它打印出来的本地 URL（端口是动态分配的——请复制你终端里的那个，别假定是某个固定数字）。你需要 Node ~24；Corepack 会为你选定锁定的 pnpm 版本。
装进你的编码 agent——这样就能在 agent 内部把 Open Design 当作一个 skill 来调用，完全不必打开 GUI：
od mcp install <agent>
# od 自带 Open Design；<agent> = claude | codex | cursor | copilot | gemini | opencode | …首次启动会打开欢迎 daemon，你可以在那里配置基本项：选一个默认 agent 和模型（应用会自动检测本地 CLI，或者填入一个 OpenAI 兼容的 key），按需添加用于图片/视频/音频的媒体供应商 key，并接好任何 MCP 服务。保存、开始，然后创建一个原型——给它起个名字，选高保真而非线框图，写下你的需求简介。agent 会问几个澄清性的问题（平台、文章切入角度、设计方向），规划它的工作，读取设计系统，然后构建出成品。在 WorldofAI 的那次运行中，Codex 大约五分钟就做出了一个干净利落的新闻通讯落地页——账记在他自己的 Codex 套餐上，且全程经由 Open Design 的 skill 路由。
小贴士
- 为不同任务挑对 agent。Open Design 会路由到你选定的那个 CLI——做快速 Web 活儿可以试试像 MiniMax 这样高效的模型，想要最精致的产出就把 Codex 设成高推理强度。
- 想看真实成品时从高保真开始；只在需要快速搭出结构骨架时才退回线框图。
- 只为你真正会用的供应商自带媒体 key——开始设计并不需要把它们全配齐。
- 你不必先有一套设计系统。可以从内置的某一套起步、导入一个 Claude Design 的 ZIP，或者让 Open Design 推断出合理的默认值。
- 设计成果随项目文件夹走。把 Open Design 对准正确的目录来运行，借此把你的工作组织好。
常见问题
Open Design 真的免费吗？ 是的——它基于 Apache-2.0 开源，没有订阅。你只需为所连接的 agent 和供应商的模型与媒体用量付费。
“自带 agent”和“自带 key”有何不同？ 自带 key 仍然把你绑在某一家供应商上——你只是提供了 key 而已。Open Design 会检测你机器上已有的编码 agent CLI，并让你按项目选择由哪一个来驱动生成。没有单一模型锁定。
我一定要用 Claude 吗？ 不必。Claude Code 只是众多选项之一——Codex、Cursor、Gemini、Copilot、OpenCode 等都受支持，而且你随时可以在工作区里切换 agent。
它只能做 UI 原型图吗？ 不是。同一个工作区能产出落地页、幻灯片与路演 PPT、杂志版式、移动应用界面、图片和视频——而且因为设计是建立在代码之上的，它能从设计直接走向生产。
这份文字指南基于 WorldofAI 那期 Open Design 概览。请观看上方完整视频，并订阅 WorldofAI，获取更多最新的 AI 工具与工作流。