UXUI两个开源项目对比分析

老兵发新帖2026-07-18 13:24

这是两个同名但定位不同 的开源设计工具：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 API eval、与 Figma 双向剪贴板、XPath 查询节点树。
  • openpencil ：以自有 PenDocument / .op JSON 为中心------人类可读、可 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/vue headless SDK 可嵌定制编辑器；CLI 的 tree / query / eval / analyze 更像设计文件运维工具。
  • openpencil ：MCP 工具面更大（80+）、op CLI + 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 同步

技术架构差异

#mermaid-svg-J7iBo1TeG9iic22S{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-J7iBo1TeG9iic22S .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-J7iBo1TeG9iic22S .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-J7iBo1TeG9iic22S .error-icon{fill:#552222;}#mermaid-svg-J7iBo1TeG9iic22S .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-J7iBo1TeG9iic22S .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-J7iBo1TeG9iic22S .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-J7iBo1TeG9iic22S .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-J7iBo1TeG9iic22S .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-J7iBo1TeG9iic22S .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-J7iBo1TeG9iic22S .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-J7iBo1TeG9iic22S .marker{fill:#333333;stroke:#333333;}#mermaid-svg-J7iBo1TeG9iic22S .marker.cross{stroke:#333333;}#mermaid-svg-J7iBo1TeG9iic22S svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-J7iBo1TeG9iic22S p{margin:0;}#mermaid-svg-J7iBo1TeG9iic22S .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-J7iBo1TeG9iic22S .cluster-label text{fill:#333;}#mermaid-svg-J7iBo1TeG9iic22S .cluster-label span{color:#333;}#mermaid-svg-J7iBo1TeG9iic22S .cluster-label span p{background-color:transparent;}#mermaid-svg-J7iBo1TeG9iic22S .label text,#mermaid-svg-J7iBo1TeG9iic22S span{fill:#333;color:#333;}#mermaid-svg-J7iBo1TeG9iic22S .node rect,#mermaid-svg-J7iBo1TeG9iic22S .node circle,#mermaid-svg-J7iBo1TeG9iic22S .node ellipse,#mermaid-svg-J7iBo1TeG9iic22S .node polygon,#mermaid-svg-J7iBo1TeG9iic22S .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-J7iBo1TeG9iic22S .rough-node .label text,#mermaid-svg-J7iBo1TeG9iic22S .node .label text,#mermaid-svg-J7iBo1TeG9iic22S .image-shape .label,#mermaid-svg-J7iBo1TeG9iic22S .icon-shape .label{text-anchor:middle;}#mermaid-svg-J7iBo1TeG9iic22S .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-J7iBo1TeG9iic22S .rough-node .label,#mermaid-svg-J7iBo1TeG9iic22S .node .label,#mermaid-svg-J7iBo1TeG9iic22S .image-shape .label,#mermaid-svg-J7iBo1TeG9iic22S .icon-shape .label{text-align:center;}#mermaid-svg-J7iBo1TeG9iic22S .node.clickable{cursor:pointer;}#mermaid-svg-J7iBo1TeG9iic22S .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-J7iBo1TeG9iic22S .arrowheadPath{fill:#333333;}#mermaid-svg-J7iBo1TeG9iic22S .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-J7iBo1TeG9iic22S .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-J7iBo1TeG9iic22S .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-J7iBo1TeG9iic22S .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-J7iBo1TeG9iic22S .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-J7iBo1TeG9iic22S .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-J7iBo1TeG9iic22S .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-J7iBo1TeG9iic22S .cluster text{fill:#333;}#mermaid-svg-J7iBo1TeG9iic22S .cluster span{color:#333;}#mermaid-svg-J7iBo1TeG9iic22S div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-J7iBo1TeG9iic22S .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-J7iBo1TeG9iic22S rect.text{fill:none;stroke-width:0;}#mermaid-svg-J7iBo1TeG9iic22S .icon-shape,#mermaid-svg-J7iBo1TeG9iic22S .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-J7iBo1TeG9iic22S .icon-shape p,#mermaid-svg-J7iBo1TeG9iic22S .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-J7iBo1TeG9iic22S .icon-shape .label rect,#mermaid-svg-J7iBo1TeG9iic22S .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-J7iBo1TeG9iic22S .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-J7iBo1TeG9iic22S .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-J7iBo1TeG9iic22S :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 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-pencil openpencil
主语言 TypeScript（~26k LOC） Rust（完整重写，v0.7.5 退役 Electron）
UI Vue 3 + Reka + Tailwind jian GPU 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 / vendored agent-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/vue headless 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 .op JSON + op-opmerge
私有化部署完整 Web 编辑器 openpencil Docker openpencil-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。
相关推荐
学习编程之路1 小时前
QClaw × 蓝耘 MaaS：一句话生成《望岳》赏析腾讯文档
人工智能·蓝耘
浩哥学JavaAI1 小时前
2026年最新AI agent面试（09）_AI编程ClaudeCode
人工智能·面试·ai编程
qq_350636632 小时前
央国企数字化考勤合规解决方案：北大软件 P8DHR 破解假勤管理四大核心痛点
人工智能·政务
来两个炸鸡腿2 小时前
【Datawhale2607】llm-algo-leetcode task02 基础算子
人工智能·python·大模型
Microsoft Word2 小时前
把RAG从 “能跑” 做到上线
数据仓库·人工智能
五条凪2 小时前
简单理解 BM25 与 TF-IDF
人工智能·算法·搜索引擎·全文检索·tf-idf
小保CPP2 小时前
OCR C++ Tesseract基础用法
c++·人工智能·ocr·模式识别·光学字符识别
HillVue2 小时前
Token 叙事退潮，DAA 重新定义 AI 价值标准
java·人工智能·eclipse
庵中十三居士2 小时前
【纯AI无人工修改】AI Agent从0到1实战：50行Python手写核心循环，一次看懂所有Agent框架的底层逻辑
开发语言·人工智能·python
热门推荐
012026年7月AI圈大地震：GPT-5.6被政府限制、Claude入驻Slack、Anthropic自研芯片02GitHub 镜像站点03AI科技热点日报 | 2026年07月01日04幻兽帕鲁 - 服务器管理员权限与 GM 命令完全指南05AI 编程 IDE 全景解析 2026：Agent 全面接管开发链路06国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）072026年AI技术突破与产业落地全景：从GPT-5到多模态智能体的新纪元082026 国产 AI 大模型横评：DeepSeek、通义千问、Kimi、文心一言、星火、豆包谁更能打？09Codex 下载安装指南：Windows 和 macOS 官方版下载102026 年 AI 大模型 & AI 编程工具实战全总结