30秒速读
Design Editor 是一款用 Rust 和 Skia 构建的本地优先矢量设计编辑器，最大特点是人和 AI 代理可以在同一张实时画布上协作。它内置 MCP 服务器，能让 Claude Code 和其他代理直接在画布上构建设计；应用内聊天可以连接主要模型提供商、OpenAI 兼容端点或本机已安装的代理。它不需要账号、云端存储或独立服务器，能打开 .op 文档，支持 Figma 与 SVG 导入，还能导出图像、演示文稿以及 React、SwiftUI、Flutter 等代码方向。但要先说清楚边界：实时协作、云存储和移动端能力已经被移除，它不是一款云端多人协作平台。
GitHub 国内访问较慢，如打不开可多刷新几次
软件信息表
下表把这款编辑器的定位收在一起，重点看平台、代理连接方式和导入导出范围这三行。
| 项目 | 内容 |
|---|---|
| 名称 | Design Editor |
| 类型 | 本地优先矢量设计编辑器 |
| 构建技术 | Rust、Skia |
| 适用平台 | macOS、Windows |
| 许可证 | MIT |
| 协作方式 | 人工与 AI 代理在同一实时画布上协作 |
| 代理连接 | 内置 MCP 服务器、应用内聊天、CLI |
| 模型连接 | 主要模型提供商、OpenAI 兼容端点、本机已安装的代理 |
| 导入 | .op 文档、Figma、SVG |
| 导出 | 图像、演示文稿、React、SwiftUI、Flutter 等代码方向 |
| 不需要的东西 | 账号、云端存储、独立服务器 |
| 明确不提供的能力 | 实时多人协作、云存储、移动端 |
上手指南
第一次使用建议按下面七步走，先把人和代理协作的流程跑通一遍，再谈效率提升。
- 从 GitHub 仓库获取对应系统的安装包，安装前确认安装包来源就是该仓库。
- 新建一张空白画布，先用手动工具画几个形状、改几次颜色，熟悉这款编辑器的基本操作。
- 导入一个现成的 SVG 文件，看看图层、形状和颜色在导入后是否保持正常。
- 在应用内聊天里连接你自己的模型提供商、OpenAI 兼容端点或本机代理，先用一句话任务验证连接是否通畅。
- 复制当前画布做一个副本，让代理在副本上改一版，对比代理的输出和你的预期差距。
- 把改好的一版导出为图像，检查文字、间距和颜色在导出后有没有走样。
- 再导出一次代码方向的产物，检查结构是否可用，确认这条设计到代码的链路在你手里是通的。
装完先改这几处
下面五处是本地优先工具里最容易事后返工的地方，装完先定下来。
- 模型连接方式：先选定用模型提供商、OpenAI 兼容端点还是本机代理，并且把调用凭证的存放位置定下来，不要每个项目换一种接法。
- 代理操作边界：让代理先在副本画布上工作，确认输出符合预期再合并回主画布，不要一开始就让代理直接改唯一原稿。
- 默认导出设置：画布尺寸、导出格式和代码方向提前定好一套团队内部的默认值，避免每次导出都要重新选一遍。
- 文件保存与备份：本地优先意味着文件和备份都归你自己管，保存位置、命名规则和备份频率要在第一个正式项目开始前定好。
- 协作预期对齐：如果团队里有人习惯云端实时协作，要提前说明这款工具不提供这项能力，改用文件传递加版本管理的方式协作。
注意事项与常见问题
问：能几个人同时在线改同一张画布吗？
答：不能。实时协作已经被明确移除，这款工具的协作对象是人和 AI 代理，不是多个人同时在线编辑。
问：手机或平板上能用吗？
答：不能。它是桌面端编辑器，移动端不在支持范围内。
问：Linux 系统能用吗？
答：仓库主要确认的是 macOS 和 Windows，其他操作系统的可用性要结合构建文档或源码确认，不要直接假设。
问：从 Figma 导入的文件一定保真吗？
答：不一定。不同导入格式的兼容深度和保真度需要用你的目标文件实际验证，正式项目开始前先拿真实文件跑一遍导入导出。
问：用 AI 代理改设计要另外付费吗？
答：模型调用走你自己连接的模型提供商、兼容端点或本机代理，费用和配额取决于你选的那一方，编辑器本身不提供云端模型服务。
适合谁，不适合谁
适合你，如果你重视本地优先，希望设计文件留在自己手里，并且想让 AI 代理直接参与画布创作、打通设计到 React、SwiftUI、Flutter 等代码产物的链路；也适合愿意自己管理模型连接和文件备份的开发者、设计工程师和小型技术团队。不适合你，如果你的核心需求是多人实时协作、云端资产管理、移动端设计，或者团队无法接受自己配置模型和 MCP 连接，那应该优先看云端协作类工具。
真实使用场景推演
设想一位独立开发者做产品落地页的场景。上午他手动在画布上搭出页面骨架：标题区、特性区和行动按钮的位置先定下来。下午他复制画布，让代理按同一套配色批量出三版特性区的排布变体，自己逐版对比间距和层级，挑一版合并回主画布。接着他把定稿导出为图像发给朋友看效果，确认无误后再导出 React 代码，检查组件结构能不能直接接进现有项目。整个过程没有账号注册、没有文件上传到云端，设计稿和代码产物都在本地流转，代理只是在同一张画布上帮忙干活的协作者。
避坑清单：
- 不要让代理直接改唯一原稿，先复制画布再让代理动手。
- 不要跳过导出验证，图像和代码都要用真实产物检查一遍再交付。
- 不要假设所有导入格式都保真，Figma 和 SVG 文件都要先实测。
- 不要把模型凭证和设计文件混在一起备份，凭证单独妥善存放。
- 不要用云端协作的预期来要求它，团队协作方式要提前换成文件传递加版本管理。
关注「软件教程管家」
回复软件名即取即下：网盘下载链接 + 提取码，一步直达，不用再跳转。
本站资源仅供个人学习交流，请勿用于商业用途。软件与资料版权归原作者所有；如有侵权，请通过公众号「软件教程管家」联系我们，我们将在 24 小时内下架处理。查看免责声明 ›
