Open Design 对比 Figma 与 Claude Design —— 完整上手实录
围绕一个问题，对 Open Design 做一次完整巡礼：一个 agent 原生的工作空间，在 Figma 旁边到底该摆在什么位置？安装它、配置任意 agent、用设计系统干活、从头做一个真实的落地页、用画布上的工具迭代，然后导出。基于 Anton Larichev 的实操演练整理。
本指南是对 Open Design 的一次完整上手实录，围绕一个问题展开：一个 agent 原生的设计工作空间，在 Figma 和 Claude Design 旁边到底该摆在什么位置？我们会安装这款应用、配置一个 agent、用内置的设计系统干活、从头到尾做一个真实的落地页、用画布上的工具迭代，并把成果导出。整篇沿着 Anton Larichev（PurpleSchool）在他的实操演练中走过的路线，重写并对齐到了当前版本。想看实操过程，请观看上方视频；想看文字版，请继续往下读。
Open Design 工作空间：原型、幻灯片、图像和视频，统统汇聚在一块沉静而熟悉的画布上。
什么是 Open Design？
Open Design 是一个开源、本地优先的设计平台，它运行在你已经在用的那个编码 agent 之上。它不绑定到某一个模型，而是检测你机器上已有的各种 CLI —— Claude Code、Codex、Cursor、Gemini、Copilot、OpenCode，以及另外数十种 —— 让那个 agent 来驱动生成。Anton 的概括很到位：它表面上看着很像 Claude Design，但底层其实是“多了一层 UI，去驱动你本就已经装好的那些 agent”。你不必在编码套餐之外再付第二份订阅费。
它值得认真一看的地方在于：
- 开源，采用 Apache-2.0 —— 你可以克隆它、自托管它，也可以用在客户项目里。
- 本地运行 —— 什么都不会上传；你的项目以文件夹形式存放在你自己的机器上。
- 可插拔 agent —— 把它指向任意受支持的 CLI，或者自带 API key 接入另一套 harness。
- 内置一座庞大的设计系统与技能库，让你不必从一张白纸开始。
- 不止于静态设计 —— 原型、幻灯片、图像生成、视频，全都在同一个工作空间里完成。
它与 Figma 有何不同
这是大多数人真正想看的对比，那我们就直说。
Figma 是一款手动的协作式矢量编辑器。每一个画框都靠你来移动，每一个组件都靠你来画，它的强项是精确和实时的团队协作。这里没有任何东西替你生成设计 —— 设计师就是你，活也是你来干。
Open Design 把这个过程反了过来。你描述你想要什么、挑一个设计系统，agent 就生成一个真实、可交互的 HTML 产物，再由你来打磨。它的产出是代码，而不是矢量文件 —— 这意味着你做出来的东西，天生就离你真正的项目更近一步。
有一点 Anton 说得很坦诚：Open Design 目前在从 Figma 文件里抽取设计系统这件事上还很弱。今天如果你喂给它一个 Figma 导出文件，抽出来的系统往往一团乱。所以如果你的事实源在 Figma 里，更干净的路线是先让你的 agent 把那份 Figma 设计转成代码，再把代码带进 Open Design（下文详述）。把 Open Design 当成一个生成与迭代的工作面，而不是一个 Figma 导入器。
它与 Claude Design 有何不同
如果你用过 Claude Design，这个界面会让你瞬间觉得亲切 —— 同样沉静的美学，同样以产物为先的工作循环。真正重要的区别在于：
- 任意模型，而不只一个。Claude Design 把你锁死在 Opus 4.7 上。Open Design 则驱动你选定的任意 agent —— 而且你可以在项目进行到一半时切换。
- 内置媒体生成。加上各家服务商的 key（OpenAI GPT Image、MiniMax、ElevenLabs 等），Open Design 就能在原地生成图像、音频和视频。这正是 Anton 着重点出的标志性差异 —— 一款绑定单一服务商的设计工具给不了你这些。
- 本地，且商用无忧。Apache-2.0 加上本地优先，意味着客户项目永远不离开你的机器，也永远不需要任何人的许可。
第 1 步 —— 安装 Open Design
你有三种入门方式。挑一个适合你的：
| 路径 | 最适合谁 | 前置要求 |
|---|---|---|
| 桌面应用 | 大多数人 —— 零配置 | 无。下载打开即可。 |
| 从源码运行 | 想读或改代码的开发者 | Node ~24，pnpm 10.33.x |
| 装进你的 agent | 常驻终端的人 | 一个已装好的编码 agent CLI |
方式 A —— 桌面应用（推荐，零配置）
前往 open-design.ai/download，下载对应你操作系统的版本。安装后，应用会自动检测你 PATH 上已有的每一个编码 agent CLI，并为你加载内置的技能和设计系统。这是抵达一个可用工作空间最快的路。
方式 B —— 从源码运行
如果你更想从仓库里运行它 —— 就像 Anton 在视频里那样 —— 只需要几条命令：
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 内部调用，全程不打开图形界面：
od mcp install <agent>
# <agent> = claude | codex | cursor | copilot | gemini | opencode | …然后，在 agent 里：Use open-design to generate a landing page with the Stripe design system。
第 2 步 —— 配置你的 agent
首次启动时，Open Design 会扫描你的机器、列出它找到的每一个 CLI，然后带你走一遍简短的设置流程：
- 选 agent 和模型。Anton 用的是跑在 Opus 4.7 上的 Claude Code（“做设计最好的之一”），但你也可以指向 Codex、Gemini CLI 或任何其他被检测到的 agent。有一个 Test 按钮可以确认连接是否正常。
- 或者用 API key。不想用本地 CLI？那就改为设置一个 base URL、key 和模型。
- 添加媒体服务商。这就是那个差异点 —— 加上 OpenAI GPT Image、MiniMax、ElevenLabs 等的 key，就能当场生成图像、音频和视频。
- 开关技能。启用你需要的设计技能（系统设计、原型、品牌规范等等），其余的关掉。
这些之后都能改，所以第一遍尽量配得简单些。
第 3 步 —— 用设计系统干活
设计系统库是这款工具的核心。每一个条目都拿一个真实品牌作底，把它的配色、字体排印、组件和整体气质归纳成一套可复用的系统。
设计系统库：每个条目都把一个真实品牌拆解成配色、字体排印、组件和视觉气质，供你复用。
把你自己的品牌带进来有两种方式，Anton 两种都试了：
- 导入一个 Claude Design ZIP（今天最干净的方式）。在 Claude Design 里建好了一套系统？在那边打开它，选 Share → Download project as .zip，把那个 ZIP 拖进 Open Design。你的所有 token 和组件都会原样带过来。
- 从现有代码里抽取一套系统。新建一个不挂任何设计系统的高保真文件，把它的导入指向一个装着你真实代码的文件夹，让 agent 从里面推导出一套设计系统 —— 配色、字体排印、间距，以及一套 JSX 组件包。它不会完美，但作为一个可以再调的起点已经相当扎实。
在装任何东西之前，你都可以先在网页上浏览完整的插件库：open-design.ai/plugins。
第 4 步 —— 做一个真实页面并迭代
真正的工作流是做原型和幻灯片。在视频里，Anton 基于一套导入的设计系统，为 PurpleSchool 做了一个定价/落地页：
- 新建一个项目，选 web/桌面/移动端，再挑线框图还是高保真。
- 挂上设计系统，粘贴你的简报（Anton 用了一份短规格：hero、定价、功能、FAQ、页脚）。
- 在项目里选好你的模型（这里是跑在 Opus 上的 Claude Code），然后发送。
- 回答 Open Design 提的澄清问题，它在动笔之前会先问 —— 面向什么端、受众是谁、什么调性 —— 然后看它照着一份待办清单一项项推进。
模板库：原型、幻灯片、图像和视频的各类起点，可按类型筛选，fork 一个就能开工。
Open Design 真正立得住脚的地方在于画布上的迭代：选中任意一个区块去评论它、直接在预览上画出你想改的地方、就地编辑字体和字号、并在桌面/平板/移动端各种宽度下检查布局。这正是那个快速反馈循环 —— 在终端里用一个光秃秃的 agent 很难复刻。
满意之后，把成果导出成独立的 HTML 或一个 ZIP 交给你的团队 —— 或者直接把代码拉进你的项目里。
小贴士
- 别直接喂它原始的 Figma 文件。Figma 抽取是今天最弱的一条路；先把 Figma 转成代码，再导入代码。
- 需要带入自己的品牌时，就导入一个 Claude Design ZIP —— 这是最顺滑的入口。
- 用本地 CLI，让生成搭在你本就在付的订阅上，而不是按调用计费的 API 费用上。
- 多倚重画布上的评论和绘制工具 —— 选中一个区块在上面画，比用文字描述改动要快得多。
- 预期会先得到一份不错的初稿，然后再精修。早点导出，以便揪出间距和排版上的小偏差。
常见问题
我该用 Open Design 取代 Figma 吗？ 不该 —— 它们干的是不同的活。Figma 是一款精确、协作的手动编辑器；Open Design 是一个 agent 原生的、输出代码的生成与迭代工作面。用 Open Design 快速从一份简报走到一份真实、契合品牌的初稿，而把那些需要手工精度和实时协作的活留给 Figma。
它能导入我的 Figma 设计吗？ 间接可以。直接的 Figma 抽取今天还很粗糙。可靠的路线是用你的 agent 把 Figma 设计转成代码，再把那份代码（或者一个 Claude Design ZIP）导入 Open Design。
我必须用 Claude 吗？ 不必。Open Design 能驱动任意受支持的 agent —— Codex、Gemini CLI、Cursor、OpenCode 等等 —— 你可以在项目进行到一半时切换模型，或者自带 API key。
它免费吗？ 这款应用在 Apache-2.0 下开源，本地运行免费。你只需为你接入的那个 agent 和那些服务商的模型与媒体用量付费。
这份文字指南基于 Anton Larichev 的实操演练。请观看上方的完整视频，并订阅 PurpleSchool | Anton Larichev，获取更多关于开发和 AI 工具的深度内容。