20 分钟上手 Open Design — 完整安装 + 实战演示
一份完整的入门指南——安装 Open Design、接入你的编程 agent、逛一圈工作区，并构建你的第一个高保真原型。基于 CodingMenace 的上手初体验视频整理。
本指南将带你度过使用 Open Design 的头 20 分钟——从全新安装，到生成出你的第一个原型。它沿着 CodingMenace（Dennis）在他的上手初体验视频里走过的路线，结合当前版本重写并更新，方便你一步步跟做。可以观看上方视频看实操演示，也可以继续往下读文字版。
Open Design 把自己定位为开源的 Claude Design 替代品——桌面优先、agent 原生、Apache-2.0。
什么是 Open Design？
Open Design 是一个开源、本地优先的设计平台——一个 agent 原生的 Claude Design 与 Figma 替代品。它不会把你锁死在某一家模型供应商上，而是运行在你已经在用的编程 agent 之上：Claude Code、Codex、Cursor、Gemini、Copilot、OpenCode，以及十几种其他 agent。它是「自带 agent」，而不只是自带 key。
有几点让它值得一看：
- 开源，Apache-2.0 —— 可以克隆、自托管，每一行代码都看得到。
- 本地运行 —— 你的项目就放在你自己机器的文件夹里，而不是别人的云上。
- Agent 可插拔 —— 支持 21 多种编程 agent；由你来选哪个 CLI 驱动生成。
- 远不止原型 —— 原型、动态产物、幻灯片、杂志版式、图像生成、甚至视频，全部在一个工作区里完成。
- 内置一套深厚的设计系统与技能库，让你不必从一张白纸开始。
如果你用过 Claude Design，会立刻觉得这套观感很熟悉——Open Design 刻意保留了同样沉稳的美学，再在其上叠加更多能力。
开始之前
你有三种方式安装 Open Design。挑一个适合你的：
| 方式 | 适合谁 | 前置要求 |
|---|---|---|
| 桌面应用 | 大多数人——零配置 | 无。下载打开即可。 |
| 从源码运行 | 想阅读或修改代码的开发者 | Node ~24，pnpm 10.33.x |
| 装进你的 agent | 常驻终端的人 | 一个现成的编程 agent CLI |
视频里走的是从源码运行的方式，但如今推荐的路线是桌面应用——它不需要 Node、不需要 pnpm，也不用克隆仓库。
第一步 —— 安装 Open Design
方式 A —— 桌面应用（推荐，零配置）
打开 open-design.ai，点击 Download desktop。提供 macOS（Apple Silicon 与 Intel）、Windows（x64）和 Linux（AppImage）版本。安装后，应用会自动检测你 PATH 上已有的每一个编程 agent CLI，并为你加载内置的技能与设计系统。
方式 B —— 从源码运行
如果你更想从仓库直接运行——就像 Dennis 在视频里那样——你只需要三条命令：
git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable && pnpm install
pnpm tools-dev run web然后打开它打印出的本地地址。你需要 Node ~24 和 pnpm 10.33.x；Corepack 会自动为你选定锁定的 pnpm 版本。
方式 C —— 装进你的编程 agent
如果你想完全不打开图形界面就使用 Open Design——把它当作 agent 内部的一个技能或 MCP 服务来调用——运行：
curl -fsSL https://open-design.ai/install.sh | sh -s <agent>
# <agent> = claude | codex | cursor | copilot | gemini | opencode | …然后，在 agent 里直接说：Use open-design to generate a landing page with the Linear design system。
第二步 —— 首次运行：接入你的编程 agent
第一次启动 Open Design 时，它会扫描你的机器，列出它找到的每一个本地 CLI——Claude Code、OpenCode、Copilot CLI 等等。这就是「自带 agent」这一步。
- 选一个默认 agent 和模型。 让装好的 CLI 来驱动生成，或为这个项目指定某个具体模型（比如 Claude Opus）。
- 添加媒体供应商（可选）。 想生成图像、视频或音频？为 OpenAI（gpt-image）、MiniMax、ElevenLabs、fal、Suno 等供应商填上你自己的 API key。这就是自带 key 发挥作用的地方。
- 接入 MCP 服务（可选）。 如果你想让 agent 从其他来源拉取数据，可以接入像 Composio 这样的连接器。
- 开关技能与设计系统。 只启用你当前这类工作需要的能力——原型、幻灯片、移动应用、会议纪要等等。
这些以后都能改，所以第一遍尽量保持简单。
第三步 —— 探索工作区
Open Design 让你的工作以项目为单位：当你对着某个文件夹运行它时，你创建的设计就存在那个项目目录里。切换文件夹，就切换了项目。
在一个项目里，你可以创建原型、动态产物、幻灯片和动画。对于原型，你可以在两种保真度之间选择：
- 线框图 —— 只有骨架结构：用方块和形状快速搭出布局。
- 高保真 —— 你正在构建的页面的完整、带样式的原型。
跟 Claude Design 有一个关键区别：你不必先定义一套设计系统。Open Design 自带合理的默认值和一整套起点样板，所以你可以从某个现成的设计系统开始——也可以什么都不用。
设计系统库：真实世界的品牌起点（Agentic、Airbnb、Airtable 等等），可以一键嵌入任意项目。
市场远不止品牌系统。模板库覆盖原型、幻灯片，以及图像和视频生成——按类型筛选，fork 任意一个作为你的起点。
模板：原型、幻灯片、图像和视频起点——按类型筛选，fork 即可开始。
在安装任何东西之前，你都可以在网页上浏览完整的插件库：open-design.ai/plugins。
第四步 —— 构建你的第一个原型
现在到了有意思的部分。在视频里，Dennis 导入了一个现成的 Claude Design 项目，并让 Open Design 为它构建一个新页面。下面是同样的流程：
- 新建一个原型。 给它起个名字（Dennis 把他的叫做 "Expensely"），并选择 高保真。
- 导入你的设计系统。 Open Design 可以导入现成的 Claude Design ZIP，于是你的 token 和组件会一并带过来。导入的设计文件会出现在工作区里，旁边还有一个实时预览。
- 写需求。 Dennis 给出的提示是「基于前 3 个月，创建一个预测未来 12 个月支出的新页面」。你会看到那个熟悉的分栏布局：左侧是对话，右侧是预览和设计文件。
- 回答澄清问题。 agent 会问几个聪明的追问——用同样的配色吗？要哪种保真度？简单按 3 个月平均算？——然后规划一份待办清单、读取设计系统，并构建出产物（
projections-v2.html）。 - 迭代设计。 对第一版不满意？那就要求换个方向。Dennis 要求「换一种观感」，选了杂志编辑风方向，得到了一个全新的
projections-v3——一个用同样数据和设计系统做出的、确实不一样的设计。
最终结果是一个真实、可交互的原型：点开图表和页面浏览，然后导出或交接——全部基于你导入的那套设计系统构建。
用得更顺手的小贴士
- 想看到成品时就直接用高保真；想快速搭出结构就用线框图。
- 你的设计跟着项目文件夹走 —— 通过对着正确的目录运行 Open Design 来组织你的工作。
- 只为你真正用到的供应商自带媒体 key；你不需要把它们全配齐。
- 不需要设计系统也能开始。 从一个内置的开始，导入一个 Claude Design ZIP，或者让 Open Design 自己推断默认值。
常见问题
Open Design 免费吗？
免费——它在 Apache-2.0 许可证下开源。你可以免费在本地运行；只需为你接入的那些 agent 和媒体供应商的模型/API 用量付费。
它支持哪些编程 agent？
21 多种 agent，包括 Claude Code、Codex、Cursor、Gemini、GitHub Copilot 和 OpenCode。Open Design 会检测你机器上已经装好的 CLI。
开始设计之前我必须先创建一套设计系统吗？
不必。与 Claude Design 不同，Open Design 给你可用的默认值和一整套起点样板。想用自己的设计系统时再带进来即可。
它跟 Claude Design 有什么不同？
观感一样熟悉，但它开源、本地优先、agent 可插拔——还多了幻灯片、杂志版式、图像生成和视频等额外能力。
这份文字指南基于 CodingMenace 的上手初体验演示整理。请观看上方完整视频，并订阅 CodingMenace，获取更多 AI 工具实操视频。