开源 Figma 替代方案。
Figma 是一块托管、协作的画布,你在上面手工设计。Open Design 是面向 Claude Code 的自我进化设计 agent —— 本地优先、BYOK、Apache-2.0 —— 你通过编码 agent 来驱动设计,并把一份可移植的品牌保留为文件。形态不同,目标相同:交付上线的界面。
Open Design 是围绕你已经在用的编码 agent 的开源、本地优先设计层 —— 你的密钥、你的文件,一套精选的 skill 与设计系统库。
Figma 把一块云端画布变成共享的、亲手操作的界面设计。Open Design 是面向 Claude Code 及其他编码 agent 的自我进化设计 agent —— 本地优先、BYOK、Apache-2.0 —— 你通过你的 agent 来驱动设计,并把一份可移植的品牌以文件形式留在你自己的仓库里。
这是一份坦诚的对比:Figma 是什么、团队为何寻找替代方案、本地优先 + BYOK 如何改变工作的形态、一张逐项功能表、谁该选哪个,以及如何把一份设计迁移过来。它会直言 Figma 在哪些地方更胜一筹。
Figma 是什么
Figma 是一个托管、协作的界面设计工具:一块基于浏览器的矢量画布,具备实时多人协作编辑、原型设计、庞大的插件与组件生态,以及设计师到开发者的交接。它是亲手做 UI 设计的默认选择,而且它自己也加入了 AI 功能。
它是闭源的,运行在厂商云上,按编辑者席位计费。Open Design 是另一种形态:一个本地优先、开源的设计 agent,你用自己的编码 agent 对准它 —— 两者在产出界面上有交集,但不在实时画布编辑上。
- 厂商:Figma —— 托管 SaaS
- 定价:按编辑者席位计费
- 主要产出:云端设计文档
团队为何寻找 Figma 替代方案
当团队想要让设计成为他们拥有的文件、由他们已经在用的 agent 来生成和迭代,而不是存活在厂商云里的文档时,他们就开始把目光投向 Figma 之外。
- 掌控文件: 设计应当是你仓库里受版本控制的产物,而不是只能通过单一应用才能触及的云端文档。
- 开源: Apache-2.0 且可自托管:fork 它、为你的工作室重新打牌子,或把它嵌入 CI —— 而不是一个闭源、按席位计费的 SaaS。
- agent 驱动: 用你已经在用的编码 agent 来生成和迭代设计,而不是逐帧手工绘制。
- 可移植品牌: 一份 DESIGN.md 编码一个品牌,每个 skill 都会遵循它,并与你的代码一同版本化。
本地优先 + BYOK,详解
Open Design 在你的机器上运行一个桌面应用、一个本地守护进程,以及 Markdown 的 skill 和设计系统目录。你的设计是文件,而不是云端文档,你的品牌以一份可移植的 DESIGN.md 文件存在于你的仓库里,每个 skill 都会遵循它。
你自带 agent 密钥。凭证留在本地配置或环境变量里 —— Open Design 绝不代理它们 —— API 花费直接记到你头上。
Open Design vs Figma,逐项功能对比
| 功能 | Open Design | Figma |
|---|---|---|
| 你如何设计 | 提示你的编码 agent | 手工画布,逐项手绘 |
| 许可证 | Apache-2.0,GitHub 上完整源码 | 闭源、托管产品 |
| 运行时 | 你机器上的本地守护进程 | 厂商云 |
| 产物归属 | 你项目目录里的文件 | 云端文档 |
| 设计系统 | 你仓库里可移植的 DESIGN.md | 托管库 |
| 协作 | Git / 你的仓库 | 实时多人协作画布 |
| 定价 | 产品免费;你支付 agent 的 API 成本 | 按编辑者席位计费 |
| 自托管 | 可以,凡是能跑 Node 24 的地方都能跑 | 不可以 |
| 交接 | 你仓库里的代码产物 | Dev Mode / 检视 |
Figma 胜在哪里:亲手的矢量编辑、一块实时多人协作画布,以及一个深厚、成熟的插件与组件生态。如果那块亲手操作的画布正是你的活,Figma 很难被击败 —— 而 Open Design 走的是设计优先、agent 驱动的路线。
谁该选哪个
选 Figma,如果:
- 你想要亲手的矢量编辑和一块实时多人协作画布。
- 你的团队扎根于一个成熟的插件与组件生态。
- 比起文件,你更喜欢托管的设计师到开发者交接。
选 Open Design,如果:
- 你想要把设计产物和品牌作为受版本控制的文件。
- 你想用现有的编码 agent 做 BYOK。
- 你想要可以 fork、重新打牌子、嵌入 CLI 或自托管的开源软件。
- 你想要每个品牌一份 DESIGN.md,并被每个 skill 遵循。
把一份设计从 Figma 迁入 Open Design
目前没有从 Figma 自动导入的方式;用一次性的品牌提取流程来开启设计优先。
- 按快速上手安装 Open Design。
- 打开 Web UI,让你的 agent 对准一个你喜欢的 Figma 画框或截图。
- 让 agent 把品牌提取到一个 DESIGN.md 文件里。
- 挑一个 skill,针对你的新品牌渲染它。
从那以后,每个 skill 都会按你的品牌渲染,无需重复提示 —— 而文件始终留在你的仓库里。
FAQ
-
01 Open Design 是 Figma 的即插即换替代品吗?
不是。Figma 是一块亲手操作的协作画布;Open Design 是一个 agent 驱动、本地优先的设计层。两者在产出界面上有交集,但不在实时画布编辑上。
-
02 我能在用 Open Design 的同时继续用 Figma 吗?
可以。很多团队在 Figma 里做设计,并用 Open Design 从一份可移植品牌出发去生成和迭代;目前迁移是手动的。
-
03 Open Design 用哪个 agent?
由你选 —— 用 Claude Code、Codex、Cursor、Gemini、OpenCode 或 Qwen 做 BYOK。凭证绝不经我们代理。
-
04 Open Design 真的是开源的吗?
是的。它在 github.com/nexu-io/open-design,采用 Apache-2.0,可自托管。
-
05 Open Design 与 Figma 有关联吗?
没有。Open Design 是一个独立的开源项目。Figma 是其所有者的商标;这是一份无关联的对比。
设计优先,三条命令搞定。
给仓库点个 star、拿桌面版构建,或在终端里跑安装。从第一次渲染起,你的 DESIGN.md 系统就一直留在你的仓库里。