前端桌面应用AI 应用MCP 服务【免费下载链接】open-pencilAI-native design editor. Open-source Figma alternative.项目地址https://gitcode.com/gh_mirrors/op/open-pencil点击查看免费下载OpenPencil 是一款开源的 AI-native 设计编辑器Figma 的开源替代品本文以其官方开发文档 tech-stack.md 为核心结合仓库源码逐层拆解其渲染、UI、布局、文件格式、协作、AI/MCP、桌面端与工程化工具链的完整技术选型。读完本文你将掌握 OpenPencil 每个核心技术层的选型理由、版本约束与真实代码落地位置并能据此评估如何在自己的设计工具类项目中复用这套技术组合。一、技术栈总览一张表看懂全栈架构OpenPencil 的整个前端与桌面体系围绕浏览器可运行、原生性能可达、Figma 文件兼容三个目标搭建。官方文档给出了如下核心技术分层层技术选型理由渲染Skia CanvasKit WASM与 Figma 同引擎久经验证的性能、GPU 加速、像素级精确UI 框架Vue 3 VueUse响应式组合式 APITypeScript 支持出色组件Reka UIHeadless、可访问的 UI 原语tree、slider 等样式Tailwind CSS 4Utility-first、快速迭代、暗色主题布局Yoga WASMMeta 出品的 CSS flexbox/grid 引擎经 React Native 亿级设备验证文件格式Kiwi 二进制 ZstdFigma 自家格式紧凑、解析快、兼容 .fig协作Trystero Yjs基于 MQTT 信令的 P2P WebRTC、CRDT 同步、y-indexeddb 持久化颜色culori色彩空间转换HSV、RGB、hexAI/MCPMCP SDK Hono面向 AI 编码工具的 90 工具支持 stdio 与 HTTP 两种传输JSX 转换Sucrase轻量201 KB的 JSX→JS 转换同步执行浏览器可兼容事件nanoevents108 字节的类型化事件发射器服务于 SceneGraph 变更桌面Tauri v2约 5MB 原生应用对比 Electron 约 100MBRust 后端构建Vite 7快速 HMR、原生 ES 模块测试Playwright bun:test视觉回归E2E 快速单元测试LintingoxlintRust 实现比 ESLint 快数个数量级格式化oxfmtRust 实现的格式化器类型检查typescript-go (tsgo)TypeScript 类型检查器的原生 Go 实现二、核心依赖清单版本即契约文档列出的关键依赖在仓库根目录 package.json 中全部得到印证bun.lock锁定具体版本其中几个特殊条目值得注意{ canvaskit-wasm: ^0.41.1, vue: ^3.5.41, yoga-layout: npm:open-pencil/yoga-layout3.3.0-grid.3, nanoevents: ^9.1.0, sucrase: ^3.35.1, reka-ui: ^2.10.3, tailwindcss: ^4.3.3, culori: ^4.0.2, fzstd: ^0.1.1, fflate: ^0.8.3, trystero: ^0.22.0, yjs: ^13.6.32, y-indexeddb: ^9.0.12 }yoga-layout的依赖被重定向到npm:open-pencil/yoga-layout3.3.0-grid.3这是一个带 grid 支持的 Yoga fork 版本正是附加技术章节提到的 CSS Grid in Yoga 的落地方式fzstd浏览器兼容的 Zstd 解压与fflate压缩/解压并列出现分别服务于 Kiwi 容器解压与其他文件 IO 场景仓库实际运行在Vite 8.1.4devDependencies中vite: 8.1.4与bun1.4.2packageManager字段之上技术栈文档写作时的 Vite 7 是当时基线当前仓库以 Bun 作为包管理器与脚本运行时。三、渲染层CanvasKit WASM 为什么是唯一正解3.1 与 Figma 同引擎官方文档明确说明选择 Skia CanvasKit WASM 的核心原因Figma 桌面端与 Web 端使用的就是同一套 Skia 渲染引擎选择 CanvasKit 意味着在渲染正确性、GPU 加速能力与像素级精确输出上直接对齐业界标杆而不是从零验证一套新渲染路径。仓库中 CanvasKit 的实际加载封装位于 packages/core/src/canvaskit.ts它维护一个模块级单例instance通过getCanvasKit()惰性初始化并复用避免重复加载 WASMlocateFile逻辑区分浏览器与非浏览器环境——浏览器内以import.meta.env.BASE_URL为前缀定位.wasm文件Node/Bun 环境则通过import.meta.resolve(canvaskit-wasm)解析包内路径。这意味着同样的渲染核心既可在浏览器运行也可在服务端/CLI 场景无头运行。3.2 为什么不用 SVG 渲染文档专门解释了放弃 SVG 方案的工程理由SVG 每个节点都是一个 DOM 元素一份 10,000 节点的复杂文档意味着 10,000 个 DOM 节点随之而来的是布局、绘制与合成三层开销而 CanvasKit 把一切绘制到单一 GPU 表面节点数量不再直接放大 DOM 压力。文档同时给出参照系Penpot 默认仍走 SVG 渲染其 Rust/Skia WASM 渲染器尚在开发中、为 opt-in 状态——这从侧面印证了 CanvasKit 路线的成熟度优势。四、UI 与样式层Vue 3 组合式响应式 Reka UI Tailwind 44.1 Vue 3 是从 React 迁移而来的结果为什么不用 React原始计划一节披露了一个重要历史决策项目在早期开发阶段从 React 迁移到了 Vue 3理由是 Vue 的响应式系统与 VueUse 组合式函数在编辑器状态管理场景下更顺手。仓库中vueuse/core^14.4.0与 Vue 3.5 系列vue: ^3.5.41、vue/compiler-core: ^3.5.41都作为正式依赖出现vue-router^5.2.0、vue-tsc类型检查、vitejs/plugin-vue构建插件构成完整的 Vue 工程链。4.2 组件与样式体系Reka UI^2.10.3headless 无障碍 UI 原语为树形控件tree、滑块slider等编辑器高频组件提供无样式逻辑层UI 视觉完全由项目自身控制Tailwind CSS 4^4.3.3utility-first 快速迭代配合tailwindcss/vite插件在构建期注入tailwind-merge^3.6.0与tailwind-variants^3.3.1用于类名合并与变体管理tw-animate-css提供动效类主题体系集中在 src/theme 目录按 binding、button、chat、code、collapsible、dialog、feedback、home、input、list、mobile、motion、paint、panel、select、settings、tabs、toggle 等模块拆分形成统一的设计令牌结构。五、布局层Yoga WASM 与 CSS Grid fork5.1 Yoga 的底气React Native 级别的实战验证为什么不用自研布局引擎一节给出结论Yoga 由 Meta 维护在 React Native 的数十亿设备上久经考验完整实现 CSS flexbox 规范自研引擎要追平其正确性需要数月工作量。文档还指出本项目使用的 Yoga 版本在 fork 上额外合入了 grid 布局支持——这正是附加技术表中CSS Grid in Yoga基于 Grid 的自动布局随 Yoga fork 发布的完整含义。5.2 源码中的实际用法在 packages/core/src/layout 目录可以看到完整实现yoga-helpers.tsYoga.Config.create()创建共享配置createYogaNode()生成节点并提供configureAbsoluteChild()与applyMinMaxConstraints()辅助函数apply.tsapplyYogaLayout()将 Yoga 计算出的布局结果frame 尺寸、子节点位置回写到 SceneGraph 节点实现场景图 → Yoga → 回写的完整布局回路grid.ts从yoga-layout导入Direction、Display、Gutter、Edge等枚举createGridChildNode()/mapGridTrack()完成 grid 轨道到 Yoga 节点的映射——即 grid 自动布局的前端实现。5.3 自定义布局引擎方案早已在代码库中被否决packages/core/src/layout.ts核心布局入口与上述 layout 子目录共同证明项目没有重复造轮子而是把 flexbox/grid 语义委托给 Yoga WASM自己只负责 SceneGraph 与 Yoga 之间的映射与约束应用。六、文件格式Kiwi 二进制 Zstd原生 .fig 兼容6.1 格式选型逻辑文档将文件格式定为Kiwi 二进制 Zstd 压缩Kiwi 是 Figma 自有的二进制场景编码体积紧凑、解析快速天然兼容.fig文件。Zstd 提供高压缩比与高速解压二者组合使大文档的保存与加载路径足够高效。6.2 仓库中的实现证据仓库内 kiwi 相关能力被拆成多个工作区包协同packages/kiwi纯 Kiwi schema 解析、Figma Kiwi schema 数据、底层 Figma 消息编解码、fig-kiwi容器辅助与 GUID 格式化。其 README 明确完整的.fig归档解析位于open-pencil/figSceneGraph 集成在包外packages/kiwi/src/fig/codec.ts注释直接写明 fzstd: Browser-compatible Zstd decompression并通过zstdDecompress(data)完成 Kiwi 负载解压packages/kiwi/src/fig/container.ts容器层解压优先使用 Bun 原生zstdDecompressSync非浏览器环境否则回退 fzstd——体现浏览器可运行与服务端性能的双轨设计packages/fig负责完整的.fig归档解析含图片资源与 Kiwi 编解码的更高层封装测试覆盖见 packages/fig/tests/export.test.ts 等packages/core/src/kiwi 与 packages/core/src/index.ts 导出isZstdCompressed等判定逻辑用于在解析前识别是否 Zstd 压缩负载桌面端 Rust 侧同样使用zstd 0.13见 desktop/Cargo.toml与前端 fzstd 形成压缩/解压能力的全栈覆盖。七、协作层Trystero P2P Yjs CRDT IndexedDB 持久化7.1 架构与选型理由文档定义的协作栈是Trystero YjsTrystero 通过 MQTT 信令建立P2P WebRTC连接无需中心化数据服务器Yjs 提供CRDT 同步y-indexeddb负责本地持久化。三者组合让协作既不依赖自建同步后端又能获得离线优先、增量同步的能力。7.2 源码落地传输层src/app/collab/transport/trystero.ts 直接import { joinRoom as joinTrysteroRoom } from trystero/mqtt证明使用 MQTT 信令子模块src/app/collab/transport/index.ts 统一导出CRDT 编码src/app/collab/node-codec.ts 提供encodeNodeForYjs()/decodeNodeFromYjs()完成 SceneGraph 节点与 Yjs 文档结构之间的双向转换房间与同步src/app/collab/room.ts 通过makeAction(yjs-update)建立 Yjs 更新与 awareness 的传输通道src/app/collab/session.ts 引入IndexeddbPersistence来自y-indexeddb做本地持久化状态与上下文src/app/collab/context.ts、src/app/collab/awareness.ts、src/app/collab/yjs-sync.ts 构成完整协作运行时对应测试位于 tests/engine/collab。八、AI/MCPMCP SDK Hono 的 90 工具矩阵8.1 文档定义文档将 AI/MCP 层定义为MCP SDK Hono为 AI 编码工具暴露 90 个设计工具同时支持stdio 与 HTTP 两种传输。这使 Claude、Cursor 等 AI 客户端既能通过子进程 stdio 直连也能走 HTTP 远程调用。8.2 实现位置MCP 服务端位于 packages/mcppackages/mcp/src/server/lifecycle.tsgetRequestListener来自hono/node-serverHono类型直接来自hono包——HTTP 传输正是基于 Hono 构建packages/mcp/src/stdio.ts 与packages/mcp/src/transport目录覆盖 stdio 与 HTTP 双传输packages/mcp/src/tool 目录承载具体工具实现测试见 packages/mcp/tests/root.test.ts前端侧 src/app/automation/mcp 与 src/app/automation/bridge 负责将 MCP 工具接入编辑器运行时docs/programmable/mcp-server.md 提供了面向使用者的 MCP 服务说明。8.3 浏览器内 JSX 执行SucraseMCP/自动化能力中把 JSX 设计代码跑起来依赖Sucrase完成 JSX→JS 转换。文档强调其 201 KB 轻量体积、同步执行、浏览器兼容三大特性。源码证据packages/core/src/design-jsx/render.ts 通过transform从 JSX 字符串构建组件函数输出在运行时eval见注释 sucrase output must be evaluated at runtimepackages/core/src/design-jsx/transform.ts 同样使用transform。这构成设计稿即代码Design JSX的可编程能力底座。九、事件与颜色等基础层小而精的专项依赖9.1 nanoeventsSceneGraph 变更事件文档标注 nanoevents 仅 108 字节、类型化事件发射器。源码证据packages/scene-graph/src/events.tsimport type { Emitter } from nanoeventspackages/scene-graph/src/index.ts 中 SceneGraph 实例字段readonly emitter: EmitterSceneGraphEvents createNanoEvents()。整个场景图对外只暴露一个极小事件接口所有变更订阅都走 nanoevents把依赖面压缩到极致。9.2 culori色彩空间转换culori^4.0.2承担 HSV、RGB、hex 等色彩空间转换是颜色面板、取色器与 .fig 颜色编码共享的基础设施类型声明由types/culori提供。十、桌面端Tauri v2 的 5MB 原生体量10.1 为什么不用 Electron文档对比鲜明Tauri v2 使用系统 WebView约 5MB而 Electron 捆绑整个 Chromium约 100MBRust 后端为文件 IO 与系统集成提供原生性能。这直接回应了为什么不像 Figma 桌面版那样用 Electron。10.2 仓库中的 Rust 侧证据desktop/Cargo.tomltauri { version 2, features [devtools] }并引入tauri-plugin-opener、tauri-plugin-dialog、tauri-plugin-fs、tauri-plugin-shell、tauri-plugin-updater、tauri-plugin-process、tauri-plugin-os、tauri-plugin-clipboard-manager、tauri-plugin-deep-link、keyring凭据存储等插件macOS 专属依赖包括security-framework、objc2-core-text系统字体枚举二进制入口为src/main.rsbin 名OpenPencilsrc/lib.rs以staticlib/cdylib/rlib三种 crate-type 暴露桌面端还直接依赖zstd 0.13与zip与 Kiwi 容器解析在 Rust 侧闭环Tauri 配置见 desktop/tauri.conf.jsonWindows/macOS/Linux 菜单由 desktop/src/menu.rs 与生成脚本 scripts/generate-tauri-menu.ts 维护原生测试通过native-testfeature 开启tauri-plugin-wdio-webdriver配合wdio跑真实桌面端 E2E见 wdio.conf.ts。十一、工程化工具链oxlint / oxfmt / tsgo 的Rust Go提速组合文档将测试、Lint、格式化、类型检查分别定为测试PlaywrightE2E 视觉回归仓库 playwright.config.ts 定义 openpencil / storybook / figma 等多个 project bun:test快速单元测试由 tools/unit-tests/src/run.ts 统一调度LintingoxlintRust 实现比 ESLint 快数量级根 package.json 的lint脚本以oxlint -c oxlint.json --type-aware --type-check对src/与所有工作区包做类型感知检查结构 lint 由oxlint-tsgolint插件补充格式化oxfmtRust 实现format脚本读取.oxfmtrc.json配置类型检查typescript-go (tsgo)devDependencies 中为typescript/native-preview: ^7.0.0-dev...typecheck脚本运行tsgo --noEmitVue 部分再叠加vue-tsc。工程化层面根目录还配置了knip依赖检测、sherifmonorepo 一致性、steigerfeature-sliced 架构检查、commitlint提交规范、jscpd重复代码检测与secret-scantools/secret-scan配合 AGENTS.md 与 CONTRIBUTING.md 形成完整研发规范闭环。十二、技术选型复盘这套栈能给你什么启示OpenPencil 的技术栈呈现一条清晰的决策主线渲染走对齐巨头路线直接采用 Figma 同款 CanvasKit规避 SVG 在超大规模文档上的 DOM 开销避免在渲染正确性上从零踩坑能借力就不自研布局交给 Yoga含 grid fork事件用 108 字节的 nanoevents颜色用 culoriJSX 转换用 Sucrase——每个基础层都选已经被大规模验证的最小依赖格式兼容是差异化武器Kiwi Zstd fzstd 的浏览器/服务端双轨解压让 .fig 兼容成为开箱能力协作去中心化Trystero MQTT 信令 WebRTC P2P Yjs CRDT y-indexeddb把协作成本压缩到几乎零服务器依赖AI 能力外化为协议MCP Hono 提供 90 工具的 stdio/HTTP 双通道让任何 AI 编码工具都能驱动设计编辑器工程效率卷到极致oxlint、oxfmt、tsgo 全部原生语言重写配合 Bun 运行时把 CI 中 Lint/类型检查/测试的等待时间压缩到最低。如果想在浏览器中逐层验证这套栈的实际运行效果可以按仓库标准流程操作bun install后运行bun run devVite 开发服务器或bun run build先构建工作区包再 lint 再打包需要桌面应用则执行bun tauri。所有技术栈的权威描述仍以 packages/docs/development/tech-stack.md 为准本文仅在此基础上补充了源码级证据与工程化细节。赞分享前端桌面应用AI 应用MCP 服务【免费下载链接】open-pencilAI-native design editor. Open-source Figma alternative.项目地址https://gitcode.com/gh_mirrors/op/open-pencil点击查看免费下载相关推荐OpenPencil 架构解析从 SceneGraph 到 CanvasKit 渲染的 AI 原生设计编辑器技术栈OpenPencil 架构解析从 SceneGraph 到 CanvasKit 渲染的 AI 原生设计编辑器技术栈 OpenPencil 是一款 AI 原生的前端桌面应用AI 应用MCP 服务SafeLine技术栈Go/Gin/PostgreSQL技术选型深度解析SafeLine技术栈Go/Gin/PostgreSQL技术选型深度解析 引言为什么选择这个技术栈 在当今Web应用安全防护领域技术选型直接决定了WAFWAF网络安全应用安全OpenPencil 渲染性能剖析指南CanvasKit 渲染器 Profiler HUD 与帧捕获实战OpenPencil 渲染性能剖析指南CanvasKit 渲染器 Profiler HUD 与帧捕获实战 OpenPencilAI native 设计编辑器前端桌面应用AI 应用MCP 服务创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考