我用这款开源替代品替换了 Claude Design！
把 Open Design 配置成完全本地运行——搭配 Ollama 这样的本地模型运行器和你自己的命令行 agent（OpenCode、Claude Code、Codex、Gemini），打造一个私密、免费、自带 agent 的 Claude Design 替代方案。
本指南将带你在自己的机器上完整运行 Open Design——无需云端账号，无需按设计计费，所有内容都不会离开你的笔记本。核心思路是把 Open Design 与本地模型运行器（比如 Ollama）以及你已经装好的命令行编码 agent 搭配起来，让生成过程在本地完成，工作内容始终保持私密。本文沿用 AI Automation Station 在他们的本地配置实操视频中走过的路径，并经过重写和更新以匹配当前版本。想看实时演示就看上方视频，想读图文版就继续往下看。
在本地运行的 Open Design 工作区——你的项目、你的 agent、你的机器。
什么是 Open Design？
Open Design 是一个开源、本地优先的设计平台——一个 agent-native 的 Claude Design 和 Figma 替代方案。让完全本地化配置成为可能的，是它的核心架构：Open Design 没有绑定到单一的模型供应商，而是运行在你已经使用的编码 agent 之上。Claude Code、Codex、Cursor、Gemini、GitHub Copilot、OpenCode 等都可以接入。它是“自带 agent”，而不仅仅是自带密钥。
这对本教程很关键，因为如果你选的 agent 在本地运行——一个开源命令行 agent 通过 Ollama 这样的运行器驱动本地模型——那么整个循环就都留在你的机器上。不消耗额度，也不会把提示词发送到远程 API。
有几点值得了解：
- 开源，Apache-2.0——可以克隆、自托管、逐行阅读每一行代码。
- 本地运行——你的项目存放在自己的文件夹里，而不是别人的云端。
- agent 可插拔——支持 21+ 个编码 agent，你来选择用哪个 CLI 驱动生成。
- 不止是原型——原型、实时产物、幻灯片、杂志版式、图像生成乃至视频，全部在一个工作区里完成。
- 内置真实的起点——参照知名品牌（Airbnb、Airtable 等）建模的设计系统，外加模板和图像预设，让你永远不必面对一张空白画布。
如果你用过 Claude Design，会觉得很熟悉。Open Design 保留了同样沉静的美学，并且和 Claude Design 一样在浏览器里运行——然后把底层引擎敞开，让你换上任何你喜欢的 agent。
开始之前
你有三种方式安装 Open Design，选最适合你的那一种：
| 方式 | 适合谁 | 前置要求 |
|---|---|---|
| 桌面应用 | 大多数人——零配置 | 无。下载打开即可。 |
| 从源码运行 | 想阅读或修改代码的开发者 | Node ~24、pnpm 10.33.x |
| 装进你的 agent | 常驻终端的人 | 一个已有的编码 agent CLI |
视频走的是从源码运行这条路，但如今桌面应用才是推荐方式——它不需要 Node、不需要 pnpm，也不需要克隆代码。
要做完全本地化的配置，你还需要在开始前装好一个支持本地的命令行 agent——比如 OpenCode，它内置了免费模型，并且可以指向 Ollama 这样的本地运行器。只要它在你的 PATH 里，Open Design 就会自动检测到。
第 1 步——安装 Open Design
方式 A——桌面应用（推荐，零配置）
前往 open-design.ai 并点击 Download desktop。提供 macOS（Apple Silicon 和 Intel）、Windows（x64）和 Linux（AppImage）的构建版本。安装后，应用会自动检测你 PATH 上已有的每一个编码 agent CLI，并为你加载内置的技能和设计系统。
方式 B——从源码运行
要像视频那样直接从仓库运行，你只需要几条命令：
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 和 pnpm 10.33.x；Corepack 会为你选好固定的 pnpm 版本。端口是动态分配的，所以请使用命令显示的地址，不要自己猜。
方式 C——装进你的编码 agent
要从终端驱动 Open Design——在 agent 内把它作为技能或 MCP 服务调用，无需 GUI——运行：
od mcp install <agent>
# od 随 Open Design 一同提供；<agent> = claude | codex | cursor | copilot | gemini | opencode | …然后在 agent 内提问：Use open-design to generate a dense analytics dashboard with the Airbnb design system。
首次运行：连接你的本地 agent
第一次启动 Open Design 时，它会扫描你的机器，并显示找到的每一个命令行 agent——Claude Code、OpenCode、Codex、Gemini 等。正是这一刻让纯本地工作流变得真实：你来选择由哪个 agent 生成你的设计。
- 选一个本地 agent，避免消耗额度。Claude Code 很出色，但它会动用你的 Claude 额度。换用 OpenCode 这样免费的本地选项，意味着生成在你的机器上免费运行。OpenCode 捆绑了若干免费模型（其中包括 MiniMax），并且可以挡在 Ollama 这样的本地运行器前面，让模型永远不会离开你的电脑。
- 只在需要时才添加供应商 API 密钥。这里有地方可以粘贴 Anthropic、OpenAI、Azure 和 Google Gemini 的密钥，以备你想调用托管模型之需。要做完全本地化运行，这一步可以完全跳过。
- 添加媒体供应商（可选）。如果你想生成图像、视频或音频，请为这些供应商添加你自己的密钥。这就是自带密钥的部分——而且是可选加入的。
- 开关技能和设计系统。只启用手头工作需要的能力。
这里的一切之后都能更改，所以第一遍保持简单：选好你的本地 agent，然后往下走。
探索工作区
Open Design 让你的工作以项目为单位——你创建的设计存放在你正在使用的项目文件夹里。切换文件夹，就切换了项目。
开始一个新原型（视频里把其中一个命名为“Tube Analytics”），你会立刻面临一个选择：从设计系统起步，还是自由发挥。你并不会被强制先定义设计系统。你可以选一个内置系统——Claude/Anthropic 系统、Airbnb、Airtable 等——或者导入一个 Claude Design ZIP，把你现有的所有 token 和组件一并带过来。
设计系统库：真实的品牌起点，你可以预览、获取它们的 DESIGN.md，并一键套进任何项目。
这里不止有品牌系统。Open Design 还附带了一个示例设计的画廊，你可以在使用前预览——点击其中一个，它会打开实时预览，连同生成它的提示词一起呈现。点 Use prompt 即可从那里起步。在这些示例旁边，还有你可以 fork 当作起点的图像模板。
示例设计和图像模板——预览任意一个，然后 fork 它或复用它的提示词。
动手做点东西——在本地
现在到了证明本地循环确实可行的部分。在视频里，作者打开了一个 SaaS 分析仪表盘，并请 Open Design 对它进行扩展。
- 启动原型。选一个设计系统（或自由发挥），并可选择导入你的 Claude Design ZIP，让 agent 掌握你现有设计的完整上下文。
- 附上参考。拖入或粘贴图像作为视觉参考，或者输入
@从项目中附加一个文件——比如一个“SaaS Analytics dashboard”文件。 - 写下需求。用具体的内容提示它：“用你的设计系统把仪表盘里剩下的标签页都做出来。”你会看到熟悉的分屏布局——左边是对话，右边是实时预览和设计文件。
- 看它在你的 agent 上运行。Open Design 会调用你选定的 CLI——视频里是 OpenCode——并构建出新页面。因为它通过 OpenCode 的免费模型在本地运行，这不消耗任何额度：不会向 Claude、Gemini 或 Codex 计费。新的标签页（趋势、内容脚本生成器、转写、评论）相继出现，样式与现有系统保持一致。
- 导出或部署。设计就绪后，可以请它下载为 ZIP 以便交接进你的代码库，或者直接在 Open Design 里部署到 Vercel——这是 Claude Design 所不提供的。要把改动并回你的应用，把这个 ZIP 丢进 Claude Code 这样的编码 agent，然后说“用这个 ZIP 文件实现这些设计改动”。
最终成果是一个真实、可交互的设计——从头到尾在你自己的机器上、用你自己的 agent、免费构建出来。
小贴士
- 选一个免费的本地 agent，实现零成本生成。OpenCode 配上它捆绑的免费模型（或通过 Ollama 跑本地模型），能让每一次运行都零额度。
- 把托管密钥留到真正需要时。只有当你想调用高端模型时才粘贴 Anthropic/OpenAI/Gemini 密钥；本地 agent 一个都不需要。
- 起步不一定需要设计系统。可以从内置系统开始、导入一个 Claude Design ZIP，或者干脆自由发挥。
- 你的设计跟着项目文件夹走——通过对正确的目录运行 Open Design 来组织工作。
- 导出是交接，不是锁定。下载为 ZIP、部署到 Vercel，或者把文件喂给编码 agent 合并进你现有的代码。
常见问题
我真的能零云端成本运行 Open Design 吗？ 可以。Open Design 本身是开源的（Apache-2.0），免费运行。如果你让它指向 OpenCode 这样的免费本地 agent——并可选地由 Ollama 这样的本地运行器支撑——生成就在你的机器上以零额度成本完成。只有当你选择连接付费的托管模型或媒体供应商时，才需要付费。
怎样才能让一切保持本地和私密？ 首次运行时选一个本地命令行 agent，而不是云端的。因为 Open Design 运行在你所选的 agent 之上，本地 agent 加本地模型就意味着你的提示词和设计永远不会离开你的电脑。
它支持哪些编码 agent？ 21+ 个 agent，包括 Claude Code、Codex、Cursor、Gemini、GitHub Copilot 和 OpenCode。Open Design 会检测你机器上已经安装的 CLI，并让你选择由哪一个驱动生成。
它和 Claude Design 有什么不同？ 同样熟悉的、基于浏览器的体验，但它是开源、本地优先、agent 可插拔的。你自带 agent（本地或托管），不会被强制预先定义设计系统，还能做一些 Claude Design 做不到的额外事情——比如直接部署到 Vercel，以及在同一个工作区里生成幻灯片、图像和视频。
本图文指南基于 AI Automation Station 的本地配置实操视频。请观看上方完整视频，并订阅 AI Automation Station 获取更多 AI 工具实操教程。