告别 Claude Design！这是最强的开源 AI UI 生成器

本指南面向想在自己机器上运行 Open Design 的 Windows 用户——不用云账号，也不用为按月额度发愁。它沿用了 AI Automation 在他们的 Windows 安装演示中走的路线，并按当前版本重新撰写、更新到最新，让你能逐条命令跟着操作。可以观看上方视频看实时运行，也可以继续往下阅读文字版。

Open Design 在 Windows 上本地运行：一个开源、agent-native、完全由你掌控的设计工作区。

什么是 Open Design？

Open Design 是一个开源、本地优先的设计平台——是 Claude Design 和 Figma 的 agent-native 替代方案。它不会把你锁定在某一家模型提供商，而是运行在你已经在用的编码 agent 之上：Claude Code、Codex、Cursor、Gemini、Copilot、OpenCode，还有十几种其他选择。它做到的是“自带你的 agent”，而不仅仅是自带你的密钥。

有几点值得一看：

• 开源，采用 Apache-2.0 许可——可以克隆、自托管、逐行阅读源码。
• 本地运行——你的项目保存在自己机器上的文件夹里，而不是别人的云端。
• 可插拔 agent——支持 21 种以上编码 agent；你来选择由哪个 CLI 驱动生成，输出质量则取决于你选的模型。
• 不止于原型——原型、实时产物、幻灯片、杂志版式、图像生成，乃至视频，全部出自同一个工作区。
• 内置设计系统与模板库，让你不必从一张白纸开始。

如果你用过 Claude Design，会立刻感到熟悉——Open Design 保留了同样从容的美学，又在此之上叠加了更多能力（以及由你选择的模型）。

开始之前

在 Windows 上安装 Open Design 有三种方式。挑一个适合你的：

路线	适合谁	前置要求
桌面应用（Windows x64）	大多数 Windows 用户——零配置	无。下载即可打开。
从源码运行（WSL）	想阅读或修改代码的开发者	WSL2 + Ubuntu、Node ~24、pnpm 10.33.x
安装进你的 agent	长居终端的人	一个现成的编码 agent CLI

视频用的是 WSL 从源码运行的路线，如果你想常驻在仓库里，这条很棒。但对大多数人来说，推荐走原生 Windows 桌面版——有一个 Windows（x64）安装包，不需要 WSL、不需要 Node、也不需要克隆。本指南两条路都会讲到；下面的 WSL 演示是给特别想走源码路线的人准备的。

第 1 步——配置 WSL

如果你只想要桌面应用，直接跳到第 2 步的选项 A。如果你想走源码路线，首先需要在 Windows 内部有一个 Linux 环境。这正是 WSL（适用于 Linux 的 Windows 子系统）所提供的——一个与 Windows 并行运行的真实 Ubuntu shell，无需双系统，也不用照看虚拟机。

1. 安装 WSL 和 Ubuntu。打开 PowerShell 并运行 wsl --install——这会启用 WSL2 并默认安装 Ubuntu。如果 Windows 提示重启就重启，然后从开始菜单启动 Ubuntu，首次打开时设置你的 Linux 用户名和密码。（已经通过其他工具装好了 Ubuntu？复用它即可——不必重复这一步。）

2. 更新基础软件包。在 Ubuntu shell 里刷新软件包索引并安装必要组件：

sudo apt update && sudo apt install -y curl git

视频里的排错提示：如果后面某一步抛出奇怪的错误，就干净地重启你的 Linux 实例——在 PowerShell 里运行 wsl --shutdown，然后重新打开 Ubuntu。重新启动能解决大多数首次运行的小问题。

3. 安装 Node 24。源码构建针对的是 Node ~24。全新的 Ubuntu 还没有 nvm，所以先安装它，再用它来获取 Node 24：

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash
source ~/.bashrc            # 把 nvm 加载到当前 shell
nvm install 24
nvm use 24
node --version              # 应当打印 v24.x

Ubuntu 配置好、Node 24 也已启用后，你就可以安装 Open Design 了。

第 2 步——安装 Open Design

选项 A——Windows 桌面应用（推荐，零配置）

前往 open-design.ai 并点击 Download desktop。有一个原生 Windows（x64）版本（同时也提供 macOS 和 Linux 版）。运行安装程序、打开应用，它会自动检测你 PATH 上已有的每一个编码 agent CLI，然后为你加载内置的 skill 和设计系统。无需 WSL，也无需终端——这是 Windows 上最简单的路线。

选项 B——从源码运行（在 WSL 内）

这是 AI Automation 演示的路线。在已启用 Node 24 的 Ubuntu shell 里，克隆仓库并启动 web 运行时：

git clone https://github.com/nexu-io/open-design.git ~/open-design
cd ~/open-design
corepack enable && pnpm install
pnpm tools-dev run web

corepack enable 让 Corepack 选用仓库中固定的 pnpm 版本（10.33.x），这样你就不必自己安装 pnpm。pnpm install 会拉取依赖并编译原生模块——首次运行可能要花上几分钟，这是预期之内，并非失败。随后 pnpm tools-dev run web 会启动本地守护进程和 web 服务器。

完成后，命令会打印一个本地 URL——复制它并粘贴到你的 Windows 浏览器里。WSL 会自动把端口转发到 Windows，所以应用直接就能打开。

重要：端口是在启动时动态分配的——请读取命令实际打印出的地址。不要假设是固定端口；地址在不同机器和不同次运行之间可能不一样。

选项 C——安装进你的编码 agent（WSL）

更想跳过图形界面、把 Open Design 当作 agent 内部的 MCP 服务器来调用？在 WSL 上需要先多做一步。Linux 本身自带 /usr/bin/od（八进制转储工具），它会盖过 Open Design 自己的 od——否则 od mcp install … 会因为找不到 mcp/install 而报“file not found”。添加一个小小的包装脚本，让 od 指向你的克隆，并把它放到 PATH 的最前面：

mkdir -p ~/.local/bin
cat > ~/.local/bin/od <<'EOF'
#!/usr/bin/env bash
repo="$HOME/open-design"     # Option B 里的 ~/open-design 克隆
cd "$repo" || exit 127
exec corepack pnpm exec od "$@"
EOF
chmod +x ~/.local/bin/od
export PATH="$HOME/.local/bin:$PATH"
hash -r
type -a od                   # 现在应当是 Open Design 的 od 胜出

然后把它接入你的 agent：

od mcp install <agent>
# <agent> = claude | codex | cursor | copilot | gemini | opencode | …

然后，在 agent 里直接发出请求：Use open-design to generate a landing page with the Airbnb design system。

首次运行：连接你的编码 agent

工作区第一次加载时，Open Design 会扫描你的环境并显示它找到的每一个 CLI。因为 WSL 是一台真正的 Linux 机器，它会识别出装在 Ubuntu 内部的 agent——所以驻留在 WSL 里的 Gemini CLI 或其他 agent 会在那里被检测到。如果有什么还没出现，点击 rescan。

• 选择默认 agent 和模型。让装好的 CLI 来驱动生成，或者把它指向特定的提供商和模型。正如视频所强调的，更强的模型意味着明显更好的输出，所以当结果很重要时，请选一个有实力的。
• 添加媒体提供商（可选）。要生成图像、视频或音频，就粘贴你自己的 API 密钥——自带密钥，只针对你真正会用到的提供商。
• 连接 MCP 服务（可选）。如果你想让 agent 从其他来源获取内容，就接入相应的连接器。
• 设置偏好。语言、外观、通知——甚至还有一只桌面宠物。这些之后都能改，所以第一次过一遍时保持简单就好。

探索工作区

Open Design 让你的工作保持以项目为单位：当你针对某个文件夹运行它时，你创建的设计就保存在那个项目目录里。你的第一个项目列表会是空的——这很正常。

在一个项目内，你可以构建原型、幻灯片、图像、视频，等等。有两个起点能让空白画布消失：

设计系统库：挑一个真实的品牌外观——Airbnb、Airtable 等等——Open Design 会把它的 token、颜色和字体带进你的设计。

• 设计系统把一个品牌的外观凝练为一份由 token 组成的 DESIGN.md——主色与辅色、字体、间距。预览其中一个，你就能直接在它之上构建，而不必从零定义一套配色。
• 模板涵盖原型、幻灯片，以及图像和视频生成。按类型筛选，fork 任意一个作为起步。

模板：原型、幻灯片、图像和视频的起点——按类型筛选，fork 即可开始。

在安装任何东西之前，你可以在网页上浏览完整的库：open-design.ai/plugins。

动手做点东西

这是 AI Automation 走的流程，按当前版本重新整理：

1. 挑一个设计系统。选一个你喜欢的——比如 Airbnb——打开它来查看它的 DESIGN.md 和 token。
2. 把它作为起点导入。使用 Share → Download as ZIP，然后在你的项目里选择 Import flat design ZIP。设计就会出现在工作区里，可以在它之上继续构建。
3. 用提示词描述你想要的改动。输入一段大白话需求——“能把背景改成深色吗？”——然后发送。agent 会读取设计系统、规划它的工作，并产出该产物的一个新版本。
4. 自由迭代。换字体、添加或移除 logo、上传你自己的素材并让它们被放到合适的位置。每条提示都会产出一个新方案，留下或舍弃由你。
5. 满意了就导出。点 Share 并把结果下载为 ZIP。

输出是一份真实、可编辑、由你所连接模型驱动的设计——所以一个有实力的 agent 会直接反映在你拿回的成果里。

用得更顺手的几点提示

• 选一个强模型。输出质量取决于你连接的 agent——免费模型足以学会整个流程，但真要做正事，一个有实力的模型值得投入。
• 每次都读打印出来的 URL。本地地址是动态的；复制 tools-dev 打印出的内容，别复用旧链接。
• 把你的 agent 装在 Open Design 会查找的地方。在 WSL 里从源码运行？就把你的 CLI 装在 Ubuntu 内部，这样工作区才能检测到它们；桌面应用读取的是你 Windows 的 PATH。
• 不需要先有设计系统才能开始。可以从内置的某一个起步、导入一个 ZIP，或让 Open Design 推断默认值。你的设计会留在项目文件夹里，所以通过针对正确的目录运行来组织你的工作。

常见问题

Open Design 免费吗？ 是的——它是采用 Apache-2.0 许可的开源软件。你可以免费在本地运行；你只需要为所连接的 agent 和媒体提供商的模型/API 用量付费。

我该用 WSL 还是 Windows 桌面应用？ 对大多数人来说，原生 Windows（x64）桌面版更简单——不用 WSL、不用 Node、不用克隆。当你特别想阅读或修改代码时，再用 WSL 从源码运行的路线。请注意，WSL2 是主要受支持的路线，而 Windows 原生版属于尽力支持；如果一条路遇到阻碍，可以试试另一条。

它支持哪些编码 agent？ 21 种以上的 agent，包括 Claude Code、Codex、Cursor、Gemini、GitHub Copilot 和 OpenCode。Open Design 会检测你机器上已经安装的 CLI——源码路线下在 WSL 内部检测，桌面应用则在你的 Windows PATH 上检测。

它和 Claude Design 有什么不同？ 同样熟悉的体验，但开源、本地优先、可插拔 agent——所以你不会被锁定在某一个模型上，也不会去消耗一个固定的额度池。它还超越了原型，提供幻灯片、杂志版式、图像生成和视频。

---

这份文字指南基于 AI Automation 的 Windows 安装演示。请观看上方的完整视频，并订阅 AI Automation 以获取更多 AI 工具的实操视频。