Figma 开源替代方案怎么选：OpenDesign 本地优先设计工作流深度解析

2026-09-04 20:00:43作者：鲍丁臣Ursa

🎨 Best DeepSeek Harness Design Plugin. The open-source Claude Design alternative. 🖥️ Local-first desktop app. 🖼️ Your coding agent becomes the design engine: prototypes, landing pages, dashboards, slides, images & video — real files, HTML/PDF/PPTX/MP4 export. 🤖 Claude Code / Codex / Cursor / DeepSeek Harness / OpenCode & 20+ CLIs via BYOK.

项目地址：https://gitcode.com/gh_mirrors/opend/open-design

这篇指南基于 open-design 仓库中的博客文档 figma-alternative-open-design.md，给出 Figma 与 OpenDesign 的诚实对照：Figma 最擅长什么、它在哪四重意义上把你锁住，以及 OpenDesign「skill 层 + 本地 daemon + BYOK」这套本地优先工作流如何落地——读完后你能掌握完整的选型判断框架，并可以直接复制仓库中的三行命令在本机跑通第一个设计产物。

Figma 不是问题，问题是文件归谁所有

Figma 是默认的协作设计工具：浏览器里的实时多人画布、面向交付的 Dev Mode、白板 FigJam，以及不断挂在同一界面上的 AI 功能。定价按席位、按月，再按角色和组织分档。它有几件事做得比任何工具都好：

实时画布协作：五个人在同一个文件里，光标实时可见，评论就地展开。开源生态里目前没有能匹配这种多人协作打磨度的方案。
像素级矢量工作：Auto Layout、约束、变体、组件——画布原语成熟，设计师的肌肉记忆扎得很深。
庞大的插件生态：十年沉淀的第三方插件、社区文件和模板，拿来即用。
团队已熟悉的交付方式：Dev Mode、inspect、标注红线，是工程师被训练了多年的那套流程。

如果你的工作是设计师在共享画布上画精确屏幕、给其他人 review，Figma 仍然是好答案。真正值得在意的差异在下一层：谁拥有这个文件、这套工作流和这条成本曲线。Figma 带着四重定价页不会说的锁定：

文件是专有的。 设计活在 Figma 的格式、Figma 的服务器上。你能导出 PNG 和交付规格，但真正的事实来源——组件、变体、活的设计系统——只有在 Figma 里才完全可读，没有纯文本版本能在工具之外存活。
运行时是托管的。 画布就是云。对代理商工作或 NDA 下的发布前创意，「这个文件存在哪」每次都是一场采购对话，而不是一个设置项；本地优先不是可选模式。
插件不可移植。 插件生态真实且深厚，但每个插件都跑在 Figma 的运行时里、对着 Figma 的 API。在那里搭的工作流，没法拎出来交给笔记本上的 agent 跑，也没法组合进一条不以 Figma 画布开头的流水线。
账单永远按席位。 订阅席位对稳定设计团队没问题，对快速扩张的组织别扭，对贡献者、外包、一次性合作者这条长尾则根本不成立。

这些都不是 bug，而是「托管型协作画布产品」这个形状本身。OpenDesign 团队的态度是：我们不为画布而造，我们为 agent 而造。

OpenDesign 的赌注：一块 skill 层，四个「都只是文件」的原语

OpenDesign 不是 Figma 克隆——没有无限画布，也没有多人光标。它是一个薄薄的 skill 层，把你本来就在用的编程 agent 变成设计引擎。四个原语是 skills、systems、adapters 和 daemon，关键在于它们全都只是文件。

Skill 是一个可 fork 的 `SKILL.md` 文件夹

每个 skill 是一个带 frontmatter 的 Markdown 文件，你可以读、fork、提 PR。以仓库中的 frontend-design skill 为例，它的 SKILL.md 声明了名称、描述、触发词（triggers），以及 od: 元数据（运行模式 mode: prototype、分类、依赖的 craft 文档如 typography / color / anti-ai-slop、配套设计系统等）。skills/ 目录就是全部能力清单——新增一个 skill 等于放一个文件夹，重启 daemon 即可被加载。skill 协议与 od: frontmatter 的规范见 skills-protocol.md，解析器实现在 skills.ts。

设计系统是可移植的 `DESIGN.md`

每个设计系统是一个可移植的 DESIGN.md 文件——包括 OpenDesign 为 Figma 本身 ship 的那一份：design-systems/figma/DESIGN.md 用纯文本完整描述了 Figma 的视觉主题（黑白界面 chrome + 多色 hero 渐变、figmaSans 变量字体的非常规字重档位 320/330/340/450/480/540/700、50px 药丸按钮几何、虚线聚焦框等），同目录还有 tokens.css、design-tokens.json、components.html 和多语言 DESIGN-*.md。你在任何编辑器里打开它、在 git 里 diff 它，它能活得比下一个读它的工具更久。design-systems/ 下的整个目录即设计系统目录，QUICKSTART.md 明确说明：Design systems 目录就是从 design-systems/ 中的 DESIGN.md 包加载的。

Agent adapter 是几十行 TypeScript

博客称每个 agent adapter 约 80 行 TypeScript。从源码结构看，这个说法基本成立：各运行时定义集中在 runtimes/defs/ 下，实测行数从 20 多行（如 kilo.ts、vibe.ts）到一百多行（如 claude.ts 133 行）不等，多数在几十行规模；统一注册在 runtimes/registry.ts。QUICKSTART.md 列出的本地运行时包括 Claude Code、Codex、Devin for Terminal、OpenCode、Cursor Agent、Qwen、Qoder CLI、GitHub Copilot CLI 等——daemon 会扫描你的 PATH 检测这些 CLI。adapter 契约见 agent-adapters.md。

这换来的正是四重锁定的反面

文件是纯文本：skill 和 system 是 repo 里的 Markdown，你的设计系统不靠工具也能读。
运行时在本地：通过 pnpm tools-dev 跑在你的笔记本上，或你自己部署（Docker 模式见下文）。提示词发给你选的模型提供商——什么都不经过项目方。
工作流可移植：一个 skill 就是一个文件夹，能组合进你 $PATH 上的任何 agent，而不是某个厂商的插件运行时。
BYOK 默认：粘贴任何 OpenAI 兼容的 base_url 和 key，token 直接发给提供商。Apache-2.0（见 LICENSE 与 package.json 中的 license 字段），无需注册，没有按席位的账单。

心智模型：Figma 是一块你租来的画布；OpenDesign 是一套你拥有的工作流。

逐项对照

	Figma	OpenDesign
许可	专有	Apache-2.0
运行时	托管（浏览器，Figma 云）	本地 daemon（`pnpm tools-dev`）+ 可选自托管
源文件格式	专有 `.fig`	repo 里的纯文本 `SKILL.md` / `DESIGN.md`
主要界面	实时多人画布	agent 驱动生成 + 沙箱预览
模型 / AI	Figma 自家 AI 功能	任意 OpenAI 兼容端点 + 检测到的编程 agent CLI
插件	市场，跑在 Figma 内	可 fork 的 skill 文件夹，任意 agent 都能跑
设计系统	Figma 库（工具内）	可移植的 `DESIGN.md` 文件（含一份 Figma 的）
定价	按席位订阅	免费；你直接付给模型提供商
交付	Dev Mode、inspect、红线	`$PATH` 上任意 agent，外加 HTML / PDF / PPTX / ZIP 导出
可自托管	否	是（笔记本或你自己的部署）
数据路径	文件 → Figma 云	提示词 → 你选的提供商；什么都不经过项目方

诚实的总结：Figma 拥有市面上最打磨的协作画布体验，对一起 review 精确屏幕的设计师团队来说，这份打磨就是产品本身。OpenDesign 则完全用画布换来一个库——skills、systems 和 agents，设计成与你笔记本上已有的工具组合。不同的形状，不同的押注。

两种执行模式也印证了「数据路径」这一行：本地 CLI 模式下，请求经 daemon 的 /api/chat 直接 spawn 本地 agent，结构化工具/文件事件通过 SSE 流回；无 CLI 时回落到 API/BYOK 模式，经 /api/proxy/{provider}/stream 直连提供商（两种模式见 QUICKSTART.md 的「Two execution modes」；BYOK 上游处理见 byok-tools.ts）。

谁该选哪个

如果你是……	选
做实时、多设计师画布工作、需要在线 review 的设计团队	Figma。开源里没有任何东西能匹配那块多人画布。
整天做像素级矢量和组件工作的设计师	Figma。画布原语成熟，你的肌肉记忆值真金白银。
已标准化在 Figma、Dev Mode 进了工程环节的组织	Figma。整合成本你已付过；把它花掉。
已经在终端里驱动 Claude Code、Codex 或 Cursor 的设计工程师	OpenDesign。你的 agent 就是设计引擎；skill 层加上品味和结构，不用再装一个新应用。
需要 BYOK、项目中途换模型、或敏感简报要本地化处理的人	OpenDesign。现实比宣传更粗糙，但这是唯一真正成立的契约。
想要一套能熬过工具更替的设计系统的团队	OpenDesign。 `DESIGN.md` 文件比读它的工具活得更久。
想 ship 一套项目能采纳的设计工作流的开源贡献者	OpenDesign。放一个文件夹，重启 daemon，提 PR。

对大多数团队，定胜负的维度不是质量——Figma 的手艺是真的——而是：你的工作是一块用来画的画布，还是一套用来自动化的工作流。如果是后者，你会更想拥有它，而不是租它。

上手：三行命令把本地 daemon 跑起来

上面的判断落到操作上，就是 QUICKSTART.md 里的开发模式快速上手。环境要求：Node.js ~24、pnpm 10.33.x（repo 通过 packageManager 字段固定 pnpm@10.33.2），主支持 macOS / Linux / WSL2。

corepack enable
pnpm install
pnpm tools-dev run web   # 前台启动 daemon + web，打印 web URL

pnpm tools-dev 是唯一的本地生命周期入口（对应 package.json 中 "tools-dev": "pnpm exec tools-dev"），常用子命令：

pnpm tools-dev                 # 后台启动 daemon + web + desktop
pnpm tools-dev start web       # 后台启动 daemon + web
pnpm tools-dev run web         # 前台运行（e2e/dev server）
pnpm tools-dev restart         # 重启受管运行时
pnpm tools-dev status          # 查看运行时状态
pnpm tools-dev logs            # 查看 daemon/web/desktop 日志
pnpm tools-dev check           # 状态 + 近期日志 + 常见诊断
pnpm tools-dev stop            # 停止受管运行时

首次加载时，应用检测可用的本地运行时（PATH 扫描，注册表见 runtimes/registry.ts），同时提供 Settings 中配置的 BYOK 运行时。选定运行时、设计模板和设计系统后输入 prompt 即可。

两条值得记住的运行细节：

提示词是三层拼装：每次发送，daemon 都会组装 BASE_SYSTEM_PROMPT（按执行档案选择）+ 当前设计系统正文（DESIGN.md 的调色板/字体/布局）+ 当前 skill 正文（SKILL.md 的工作流与输出规则）。在顶栏换 skill 或换设计系统，下一次发送即用新组合——这也解释了为什么「设计系统只是文件」不是一句口号，而是每次请求都在真实生效的加载路径。
两种执行模式的交接契约不同：有文件系统能力的本地 CLI 写规范项目文件、通过文件/工具事件流式更新预览；纯文本或 BYOK 运行没有文件工具，规范交付物就是完整的 <artifact> HTML 块。两者最终都落在同一个文件工作区和沙箱预览上。

想自托管而非本机开发，走 Docker 路线：cd deploy && cp .env.example .env，用 openssl rand -hex 32 生成 OD_API_TOKEN，然后 docker compose up -d，浏览器打开 http://localhost:7456（容器直接暴露生产 daemon 构建；macOS 上 Docker Desktop 的鉴权问题见 deploy/README.md）。WSL2 用户参考 wsl-setup.md，Windows 原生环境参考 windows-troubleshooting.md。

接下来做什么与延伸阅读

如果你已经有一个可重复的 Figma 活儿——导出这些 frame、同步那些 token、重建那个 deck 模板——感受差异最快的方式，是把其中一个迁移成一个插件：从一个烦人的、可重复的小任务开始，而不是「替换 Figma」。或者直接跑上面的三行命令，把 OpenDesign 指向你本来就在付费的模型——整个东西活在一个 repo 里，第一个 deck 大约十分钟。