UXUI两个开源项目对比分析

📅 2026/7/18 21:36:07
UXUI两个开源项目对比分析
这是两个同名但定位不同的开源设计工具open-pencilFigma 兼容协作编辑器与openpencilAI 原生设计转代码。openpencil的 README 也明确做了这层区分。一句话定位open-pencilopenpencil仓库open-pencil/open-pencilZSeven-W/openpencil定位Figma 开放替代原生.fig/.pen、实时协作、可编程工具链AI 原生矢量设计Prompt→画布、Agent 编排、设计即代码核心文件.fig/.pen读写.opJSONGit 友好.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 为中心——人类可读、可 diffFigma 是迁移入口op-figma不是日常主格式。2. AI 能力形态open-pencil工具注册表一次定义复用到 AI / MCP / CLI偏「选中 → 对话修改 / headless 脚本操作」。openpencilop-orchestrator空间拆分 并发 Agent Teamsdesign_skeleton → design_content → design_refine分层流水线Style Guide、anti-slop、多模型能力画像更重。3. 协作与 Gitopen-pencil实时协作是卖点Trystero Yjs无账号无服务器。openpencil内嵌 libgit2、folder-mode 三路 mergeop-git/op-opmerge走「设计进 Git」而不是多人同屏。4. 可编程扩展面open-pencilopen-pencil/vueheadless SDK 可嵌定制编辑器CLI 的tree/query/eval/analyze更像设计文件运维工具。openpencilMCP 工具面更大80、opCLI Skill 插件Web SDKzseven-w/op-web-sdk明确是只读 Viewer不是可嵌编辑器。5. 导入导出侧重open-pencilopenpencil主格式.fig/.pen.opHTML→设计open-pencil/dom-css较强非主路径代码导出Tailwind JSX/HTML 等React/Vue/Svelte/Flutter/SwiftUI/Compose/RN 等更广设计系统Component Set / variants / modesUIKit /.pen组件库 CSS variables 同步技术架构差异openpencilop-host-desktop 原生二进制op-editor-uiop-host-web WASMop-editor-corejian Skia/CanvasKit.op PenDocumentop-mcp / op-cliop-orchestrator agent-rsopen-pencilTauri v2 Rust 壳Vue 3 WebViewopen-pencil/corescene-graphCanvasKit WASMYoga WASMkiwi/fig penYjs TrysteroVercel AI SDK维度open-pencilopenpencil主语言TypeScript~26k LOCRust完整重写v0.7.5 退役 ElectronUIVue 3 Reka TailwindjianGPU UI原生 Skia / Web CanvasKit桌面Tauri v2WebView 薄 Rust 壳纯原生openpencil-desktop无浏览器引擎渲染CanvasKit WASMNative: skia-safe GLWeb: CanvasKit布局Yoga含 CSS Gridjian-scene / taffy包结构Bun monorepopackages/corevueAI 栈ai-sdk/* valibot 工具 schemaop-ai/op-orchestrator/ vendoredagent-rs协作Yjs CRDT WebRTC未实现Git merge 替代部分协作配置/数据本地优先无账号后端~/.openpencilWeb 可 Docker 自托管体积叙事桌面 ~7MBTauri桌面 ~55MB 单二进制WASM ~8MB架构哲学差异可以概括为open-pencilWeb 技术栈做设计引擎Rust 只做壳引擎可拆成 npm 包嵌入别的产品。openpencil单一 Rust 核心多 hostdesktop / web / CLI / MCP追求体积、性能、供应链一体TS 只剩 Web SDK 胶水。使用场景差异场景更合适的选择原因从 Figma 迁出、日常当 Figma 用open-pencil原生.fig读写、剪贴板互通、功能矩阵对标 Figma多人无账号实时共编open-pencilP2P Yjs 已上线把设计编辑器嵌进自己的 SaaSopen-pencilopen-pencil/vueheadless SDKCI 审计.figlint / token / XPathopen-pencilCLI 面向设计文件运维更完整Prompt 一次生成整页 多 Agent 并行openpencilOrchestrator Agent TeamsClaude Code / Codex 终端驱动设计→代码openpencilMCP/op 分层 design 多框架 codegen 更重设计稿进 Git、按节点三路合并openpencil.opJSON op-opmerge私有化部署完整 Web 编辑器openpencilDockeropenpencil-webopen-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 单核多 hostjian/Skia。场景上要「替代 Figma 工作流」选open-pencil要「Agent 生成 UI 并导出多端代码」选openpencil。