UXUI两个开源项目对比分析

这是两个同名但定位不同的开源设计工具:open-pencil(Figma 兼容协作编辑器)与openpencil(AI 原生设计转代码)。openpencil的 README 也明确做了这层区分。


一句话定位

open-pencilopenpencil
仓库open-pencil/open-pencilZSeven-W/openpencil
定位Figma 开放替代:原生.fig/.pen、实时协作、可编程工具链AI 原生矢量设计:Prompt→画布、Agent 编排、设计即代码
核心文件.fig/.pen(读写).op(JSON,Git 友好);.fig导入为主
协作已有 WebRTC P2P + YjsRoadmap 中,尚未做
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 脚本操作」。
  • openpencilop-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-pencilopenpencil
主格式.fig/.pen.op
HTML→设计@open-pencil/dom-css较强非主路径
代码导出Tailwind JSX/HTML 等React/Vue/Svelte/Flutter/SwiftUI/Compose/RN 等更广
设计系统Component Set / variants / modesUIKit /.pen组件库 + CSS variables 同步

技术架构差异

openpencil

op-host-desktop 原生二进制

op-editor-ui

op-host-web WASM

op-editor-core

jian + Skia/CanvasKit

.op PenDocument

op-mcp / op-cli

op-orchestrator + agent-rs

open-pencil

Tauri v2 Rust 壳

Vue 3 WebView

@open-pencil/core

scene-graph

CanvasKit WASM

Yoga WASM

kiwi/fig + pen

Yjs + Trystero

Vercel AI SDK

维度open-pencilopenpencil
主语言TypeScript(~26k LOC)Rust(完整重写,v0.7.5 退役 Electron)
UIVue 3 + Reka + TailwindjianGPU UI(原生 Skia / Web CanvasKit)
桌面Tauri v2(WebView + 薄 Rust 壳)纯原生openpencil-desktop(无浏览器引擎)
渲染CanvasKit WASMNative: skia-safe GL;Web: CanvasKit
布局Yoga(含 CSS Grid)jian-scene / taffy
包结构Bun monorepo:`packages/corevue
AI 栈@ai-sdk/*+ valibot 工具 schemaop-ai/op-orchestrator/ vendoredagent-rs
协作Yjs CRDT + WebRTC未实现;Git merge 替代部分协作
配置/数据本地优先,无账号后端~/.openpencil;Web 可 Docker 自托管
体积叙事桌面 ~7MB(Tauri)桌面 ~55MB 单二进制;WASM ~8MB

架构哲学差异可以概括为:

  • open-pencilWeb 技术栈做设计引擎,Rust 只做壳;引擎可拆成 npm 包嵌入别的产品。
  • openpencil单一 Rust 核心多 host(desktop / web / CLI / MCP),追求体积、性能、供应链一体;TS 只剩 Web SDK 胶水。

使用场景差异

场景更合适的选择原因
从 Figma 迁出、日常当 Figma 用open-pencil原生.fig读写、剪贴板互通、功能矩阵对标 Figma
多人无账号实时共编open-pencilP2P + Yjs 已上线
把设计编辑器嵌进自己的 SaaSopen-pencil@open-pencil/vueheadless SDK
CI 审计.fig:lint / token / XPathopen-pencilCLI 面向设计文件运维更完整
Prompt 一次生成整页 + 多 Agent 并行openpencilOrchestrator + Agent Teams
Claude Code / Codex 终端驱动设计→代码openpencilMCP/op+ 分层 design + 多框架 codegen 更重
设计稿进 Git、按节点三路合并openpencil.opJSON +op-opmerge
私有化部署完整 Web 编辑器openpencilDockeropenpencil-web;open-pencil 更偏 Cloudflare PWA
只在文档站里预览设计openpencil只读 SDK;或 open-pencil 开文件前者 Viewer 明确;后者本身就是完整编辑器

用户画像对照:

  • open-pencil:设计师为主、开发者为辅——「开源 Figma + 可编程」;AI 是增强层。
  • openpencil:开发者 / Agent 工程师权重更高——「AI 画布 + MCP 流水线」;设计师用桌面,但产品叙事围着 Agent 与 codegen。

总结

两者不是 fork 关系,而是同赛道、不同主轴

  1. 功能上:open-pencil 赢在Figma 兼容与实时协作;openpencil 赢在AI 编排、Git 友好格式与设计转代码闭环
  2. 技术上:open-pencil 是TS/Vue 引擎 + Tauri 壳;openpencil 是Rust 单核多 host(jian/Skia)
  3. 场景上:要「替代 Figma 工作流」选open-pencil;要「Agent 生成 UI 并导出多端代码」选openpencil