UXUI两个开源项目对比分析
这是两个同名但定位不同的开源设计工具：open-pencil（Figma 兼容协作编辑器）与openpencil（AI 原生设计转代码）。openpencil的 README 也明确做了这层区分。
一句话定位
| open-pencil | openpencil | |
|---|---|---|
| 仓库 | open-pencil/open-pencil | ZSeven-W/openpencil |
| 定位 | Figma 开放替代：原生.fig/.pen、实时协作、可编程工具链 | AI 原生矢量设计：Prompt→画布、Agent 编排、设计即代码 |
| 核心文件 | .fig/.pen（读写） | .op（JSON，Git 友好）；.fig以导入为主 |
| 协作 | 已有 WebRTC P2P + Yjs | Roadmap 中，尚未做 |
| AI | 内置聊天 + 90+ 工具，偏「改现有设计」 | Orchestrator / Agent Teams / Style Guide，偏「从零生成 + 分层 refine」 |
功能架构差异
重叠能力
两边都有：无限画布编辑、Auto Layout、组件/变量、内置 AI 聊天、MCP、CLI、多端（桌面/Web）、多框架代码导出、设计 lint。
差异焦点
1. 设计真相源
- open-pencil：以 Figma 场景图为中心——Kiwi
.fig原生读写、Figma Plugin APIeval、与 Figma 双向剪贴板、XPath 查询节点树。 - openpencil：以自有
PenDocument/.opJSON 为中心——人类可读、可 diff；Figma 是迁移入口（op-figma），不是日常主格式。
2. AI 能力形态
- open-pencil：工具注册表一次定义，复用到 AI / MCP / CLI；偏「选中 → 对话修改 / headless 脚本操作」。
- openpencil：
op-orchestrator空间拆分 + 并发 Agent Teams；design_skeleton → design_content → design_refine分层流水线；Style Guide、anti-slop、多模型能力画像更重。
3. 协作与 Git
- open-pencil：实时协作是卖点（Trystero + Yjs，无账号无服务器）。
- openpencil：内嵌 libgit2、folder-mode 三路 merge（
op-git/op-opmerge），走「设计进 Git」而不是多人同屏。
4. 可编程扩展面
- open-pencil：
@open-pencil/vueheadless SDK 可嵌定制编辑器；CLI 的tree/query/eval/analyze更像设计文件运维工具。 - openpencil：MCP 工具面更大（80+）、
opCLI + Skill 插件；Web SDK（@zseven-w/op-web-sdk）明确是只读 Viewer，不是可嵌编辑器。
5. 导入导出侧重
| open-pencil | openpencil | |
|---|---|---|
| 主格式 | .fig/.pen | .op |
| HTML→设计 | @open-pencil/dom-css较强 | 非主路径 |
| 代码导出 | Tailwind JSX/HTML 等 | React/Vue/Svelte/Flutter/SwiftUI/Compose/RN 等更广 |
| 设计系统 | Component Set / variants / modes | UIKit /.pen组件库 + CSS variables 同步 |
技术架构差异
| 维度 | open-pencil | openpencil |
|---|---|---|
| 主语言 | TypeScript（~26k LOC） | Rust（完整重写，v0.7.5 退役 Electron） |
| UI | Vue 3 + Reka + Tailwind | jianGPU UI（原生 Skia / Web CanvasKit） |
| 桌面 | Tauri v2（WebView + 薄 Rust 壳） | 纯原生openpencil-desktop（无浏览器引擎） |
| 渲染 | CanvasKit WASM | Native: skia-safe GL；Web: CanvasKit |
| 布局 | Yoga（含 CSS Grid） | jian-scene / taffy |
| 包结构 | Bun monorepo：`packages/core | vue |
| AI 栈 | @ai-sdk/*+ valibot 工具 schema | op-ai/op-orchestrator/ vendoredagent-rs |
| 协作 | Yjs CRDT + WebRTC | 未实现；Git merge 替代部分协作 |
| 配置/数据 | 本地优先，无账号后端 | ~/.openpencil；Web 可 Docker 自托管 |
| 体积叙事 | 桌面 ~7MB（Tauri） | 桌面 ~55MB 单二进制；WASM ~8MB |
架构哲学差异可以概括为：
- open-pencil：Web 技术栈做设计引擎，Rust 只做壳；引擎可拆成 npm 包嵌入别的产品。
- openpencil：单一 Rust 核心多 host（desktop / web / CLI / MCP），追求体积、性能、供应链一体；TS 只剩 Web SDK 胶水。
使用场景差异
| 场景 | 更合适的选择 | 原因 |
|---|---|---|
| 从 Figma 迁出、日常当 Figma 用 | open-pencil | 原生.fig读写、剪贴板互通、功能矩阵对标 Figma |
| 多人无账号实时共编 | open-pencil | P2P + Yjs 已上线 |
| 把设计编辑器嵌进自己的 SaaS | open-pencil | @open-pencil/vueheadless SDK |
CI 审计.fig：lint / token / XPath | open-pencil | CLI 面向设计文件运维更完整 |
| Prompt 一次生成整页 + 多 Agent 并行 | openpencil | Orchestrator + Agent Teams |
| Claude Code / Codex 终端驱动设计→代码 | openpencil | MCP/op+ 分层 design + 多框架 codegen 更重 |
| 设计稿进 Git、按节点三路合并 | openpencil | .opJSON +op-opmerge |
| 私有化部署完整 Web 编辑器 | openpencil | Dockeropenpencil-web；open-pencil 更偏 Cloudflare PWA |
| 只在文档站里预览设计 | openpencil只读 SDK；或 open-pencil 开文件 | 前者 Viewer 明确；后者本身就是完整编辑器 |
用户画像对照：
- open-pencil：设计师为主、开发者为辅——「开源 Figma + 可编程」；AI 是增强层。
- openpencil：开发者 / Agent 工程师权重更高——「AI 画布 + MCP 流水线」；设计师用桌面，但产品叙事围着 Agent 与 codegen。
总结
两者不是 fork 关系，而是同赛道、不同主轴：
- 功能上：open-pencil 赢在Figma 兼容与实时协作；openpencil 赢在AI 编排、Git 友好格式与设计转代码闭环。
- 技术上：open-pencil 是TS/Vue 引擎 + Tauri 壳；openpencil 是Rust 单核多 host（jian/Skia）。
- 场景上：要「替代 Figma 工作流」选open-pencil；要「Agent 生成 UI 并导出多端代码」选openpencil。