首页/资讯中心/详情

UXUI两个开源项目对比分析

UXUI两个开源项目对比分析
📅 发布时间：2026/7/18 21:46:47

这是两个同名但定位不同的开源设计工具：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 脚本操作」。
  • 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-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-pencil：Web 技术栈做设计引擎，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。