前端桌面应用AI 应用MCP 服务【免费下载链接】open-pencilAI-native design editor. Open-source Figma alternative.项目地址https://gitcode.com/gh_mirrors/op/open-pencil点击查看免费下载本篇技术文章以 OpenPencilAI-native 设计编辑器、开源 Figma 替代品的官方功能文档 packages/docs/overview/features.md 为骨架逐一展开其全部核心能力——.fig 文件读写与 Kiwi 二进制编解码、绘图编辑与组件系统、CanvasKit/Skia 渲染、导出、AI 聊天、MCP 服务器、CLI、P2P 实时协作以及桌面/Web 双端形态并结合仓库中的 schema、codec、工具注册表、MCP 传输层与协作模块源码说明每项功能背后的实际实现路径与适用前提读完后你可以既会用这套编辑器也能在自己的工程里复用它的 .fig 编解码与工具链。功能总览能力域核心内容文档定位Figma 互操作打开/保存原生.fig、双向剪贴板复制粘贴Features、File Format绘制与编辑形状、钢笔矢量网络、文本、Auto-layout、组件、变量、SectionsFeatures渲染SkiaCanvasKit WASM渐变/图片填充、效果缓存、视口剔除Features可编程90 工具的 AI 聊天、MCP Server、CLI含 Figma Plugin API 兼容的evalFeatures协作WebRTC P2P 实时协作免服务器Features分发Tauri v2 桌面端~7 MB、PWA Web 端Features下面按功能域逐一深入每个模块先给出用户可见行为再给出仓库内的源码级证据。Figma.fig文件同一套 Kiwi 二进制编解码打开与保存原生 Figma 文件OpenPencil 直接打开和保存原生 Figma 文件中间没有转换格式导入/导出管线复用与 Figma 相同的 Kiwi 二进制编解码器。官方文档口径为194 个 schema 定义、每个节点约 390 个字段该数字同时出现在 File Format 参考 与 架构文档。保存使用⌘S另存为使用⇧⌘S。.fig文件本身是一个 ZIP 容器内部结构如下来自 file-format.md偏移内容0魔数头fig-kiwi8 字节8版本号4 字节uint32 小端12schema 长度4 字节uint32 小端16压缩后的 Kiwi schema…消息长度4 字节uint32 小端…压缩后的 Kiwi 消息——NodeChange[]整个文档…Blob 数据——图片、矢量网络、字体导入与导出的完整管线导入.fig 文件 → 解析头部 → Zstd 解压 → 解码 Kiwi schema → 解码消息 → NodeChange[] → 构建 SceneGraph → 解析 blob 引用 → 画布渲染 导出SceneGraph → NodeChange[] → Kiwi 编码 → 压缩Zstd/deflate → 组装 ZIP头部 schema 消息 thumbnail.png→ 写 .fig 文件几个关键实现细节中心类型是NodeChange整个文档被编码为一个NodeChange[]消息数组GUID 使用 Figma 的sessionID:localID格式如1:42。稀疏字段 IDFigma 的 schema 使用不连续的字段 ID例如 1、2、5、10 之间存在空洞Kiwi schema 解析器针对此做了正确支持。压缩策略.fig的 schema 与消息载荷都使用 Zstd 压缩解压用fzstd桌面端把 Zstd 压缩下沉到 Tauri Rust 命令以获得正确帧头浏览器端以 deflatefflate作为回退。缩略图导出文件内包含 Figma 文件预览所需的thumbnail.png。OpenPencil 优先使用名称恰为Cover不区分大小写的第一页其次取名称包含Cover的第一页桌面端还会在打开文件后缓存这张 Cover让最近文件列表无需改动源.fig即可优先展示生成的预览。兼容性注意file-format.md 明确提示复杂的 Figma 文档即使不做任何编辑经 OpenPencil 保存后再在 Figma 中打开也可能出现视觉保真度下降组件内容、颜色、文本可能缺失或差异。建议保留原始.fig用Save As另存 OpenPencil 副本并在 Figma 中检查导出副本后再替换原文件。Kiwi 编解码的源码实现编解码能力集中在独立的open-pencil/kiwi包中与场景图解耦packages/kiwi/src/fig/schema/fig.kiwiFigma 的 Kiwi schema 原文当前约 605 个顶层message/enum/struct定义NodeChange为其中心类型。文档中194 定义是官方引用的保守基线口径实际 schema 文件在仓库中持续扩充。packages/kiwi/src/fig/codec.ts基于 schema 的消息编码/解码提供initCodec()、encodeMessage()等接口。packages/kiwi/src/fig/container.tsfig-kiwi容器的buildFigKiwi()/parseFigKiwiChunks()分块解析。packages/kiwi/src/fig/guid.tsguidToString()/stringToGuid()处理1:42形式的 GUID。packages/kiwi/src/fig/parse.tsdecodeFigKiwiCanvas()解码原始fig-kiwi载荷返回nodeChanges与blobs。open-pencil/kiwi的 README 给出了最小可运行的编码示例见 packages/kiwi/README.mdimport { createNodeChangesMessage, encodeMessage, initCodec } from open-pencil/kiwi/fig/codec await initCodec() const message createNodeChangesMessage(1, 1, [ { guid: { sessionID: 1, localID: 1 }, phase: CREATED, type: RECTANGLE, name: Card, size: { x: 320, y: 180 } } ]) const bytes encodeMessage(message)完整的带 ZIP 压缩的.fig解析含图片资源在open-pencil/fig包中再经open-pencil/core的 IO 层转换后可编辑的SceneGraph。schema 运行时基于 Evan Wallace 的 Kiwi 实现MIT 许可见 packages/kiwi/NOTICE。与 Figma 的剪贴板互通在 Figma 中选中节点按⌘C切到 OpenPencil 按⌘V——填充、描边、auto-layout、文本、效果、圆角与矢量网络都会保留且双向通用。实现依据file-format.md复制——把选中的NodeChange[]编码为 Kiwi 二进制并压缩以application/x-figma-designMIME 类型写入剪贴板粘贴——读取剪贴板、解压、解码 Kiwi 二进制在场景图中创建节点。编码在复制事件处理器中同步完成而不是异步 Clipboard API以保证浏览器兼容性。由于 Figma 自身也使用同一 MIME 类型与同一编码互通是天然成立的。绘制与编辑基础形状与钢笔工具形状——矩形R、椭圆O、直线L、多边形Polygon、星形Star。钢笔工具Pen tool——生成的是矢量网络vector networks而非简单路径支持带切线手柄tangent handles的贝塞尔曲线。矢量网络是 Figma 风格的数据结构锚点 段 区域与 Kiwi schema 中的矢量网络 blob 对应导出.fig时原样保留这也是剪贴板互通能保真传递复杂轮廓的原因。文本与富文本文本——画布内原生编辑支持 IME输入法双击进入编辑模式。富文本——逐字符的粗体⌘B、斜体⌘I、下划线⌘U、删除线。字体解析上仓库内置了 Inter 与 Noto Naskh Arabic 等字体资产packages/core/assets本地缺失的字体走后文Google Fonts 回退机制。Auto-layoutYoga WASM 驱动的 Flexbox 与 CSS GridAuto-layout 通过Yoga WASM实现 flexbox 与 CSS Grid 布局支持方向direction、间距gap、内边距padding、主轴/交叉轴对齐justify / align、子项尺寸child sizing与网格轨道grid tracks用⇧A在节点上快速开关。源码中布局引擎独立于open-pencil/core之外存在packages/core/src/layout 封装 Yoga 布局求解编辑器侧由 packages/core/src/editor/layout-mode.ts 处理切换该文件参与 undo/redo 的变更跟踪说明布局变更同样可撤销。组件系统组件——创建组件⌥⌘K组件集component sets⇧⌘K实例——支持覆盖override、插槽slots、实时同步live sync。组件/实例的覆盖数据在 Kiwi schema 中有专门的结构承载如symbolOverrides、overrides字段表实例求值逻辑独立成包packages/fig/src/instance-overrides 与文档 packages/fig/docs/instance-evaluation.md覆盖嵌套实例、变量绑定优先级等场景。Behaviours 与预览把组件变成可交互控件让组件像 Reka UI 控件一样工作switch、slider、tabs、text field、accordion 等并在画布上以⌥⌘↩实时试操作。行为定义与预览机制见 packages/docs/user-guide/components.md 与开发文档 packages/docs/development/behaviours-and-preview.md。变量Variables与变量绑定变量——即设计令牌支持集合collections、模式modes如 Light/Dark类型包括颜色color、浮点float、字符串string、布尔boolean并支持变量绑定variable binding。变量子系统有独立实现与测试编辑器侧见 packages/core/src/editor/variables.ts同样接入 undo 变更跟踪Kiwi 侧的变量绑定编码见 packages/kiwi/src/fig/variable-bindings.ts 及其测试 packages/kiwi/tests/variable-bindings.test.ts。Sections组织性容器自动收纳子节点auto-adopting children带标题胶囊title pills。属性面板Design | Code | AI | Lint 上下文感知标签页属性面板是上下文感知的四标签结构按选中内容切换Design 标签页外观Appearance——不透明度、圆角统一或逐角、可见性填充Fill——纯色、渐变linear / radial / angular / diamond、图片描边Stroke——颜色、粗细、对齐方式inside / center / outside、逐边粗细、端点样式cap、连接方式join、虚线dash效果Effects——投影、内阴影、图层模糊、背景模糊、前景模糊排版Typography——字体选择器虚拟滚动 搜索、字重、字号、对齐、样式按钮布局Layout——启用 auto-layout 后出现的布局控制导出Export——缩放倍率、格式PNG/JPG/WEBP/SVG、实时预览。Code 标签页为当前选区生成Design JSX与Tailwind JSX并支持Design JSX 的双向实时编辑图层变化会补丁式地改回你的代码光标所在的元素会在画布上高亮其对应图层轮廓element 到 layer 的反向映射设计问题design issues会在引发问题的属性处以下划线标出。Design JSX 的渲染器是独立包 packages/design-jsx含 behaviours、export、streaming、reconcile 等模块文档见 packages/docs/programmable/jsx-renderer.md。Lint 标签页对整页或选区做实时设计 lint低对比度low contrast、过小的触控目标small touch targets、未绑定的颜色unbound colors、脱离间距刻度的间距off-scale spacing画布上有问题标记issue markers并支持一键变量绑定one-click variable binding。详细用法见 packages/docs/user-guide/checking-designs.mdlint 规则实现在 packages/core/src/lint检查 UI 见 src/components/design-check。渲染SkiaCanvasKit WASMOpenPencil 使用SkiaCanvasKit WASM——与 Figma 相同的渲染引擎。初始化入口为 packages/core/src/canvaskit.tsimport CanvasKitInit from canvaskit-wasm惰性单例instance画布渲染管线集中在 packages/core/src/canvas约 89 个源文件。文档列出的渲染能力逐项如下渐变填充linear、radial、angular、diamond带缩放模式scale modes的图片填充带逐节点缓存的效果effects with per-node cachingArc 数据部分椭圆、甜甜圈图形视口剔除viewport culling与绘制复用paint reuse旋转感知的对齐吸附线snap guides带选区徽章的画布标尺rulers跟随真实几何形状的悬停高亮hover highlight follows actual geometry。性能侧有独立的导航性能文档 packages/docs/development/navigation-performance.md 与渲染器生命周期文档 packages/docs/development/renderer-lifecycle.md以及配套的渲染分析器profiler。撤销/重做逆命令模式所有操作皆可撤销——创建、删除、移动、缩放、属性修改、重新挂接父级reparenting、布局变更、变量操作。快捷键⌘Z撤销/⇧⌘Z重做。实现采用逆命令inverse-command模式从源码结构看packages/core/src/editor/history/atomic-tool.ts 对属性类变更同时记录before/after两份状态inverse[key] structuredClone(previous[key])撤销时回放before、重做时回放after移动类变更的几何逆运算见 packages/core/src/editor/history/position.ts。这个模式的好处是任意复杂操作包括批量batchUpdate、变量绑定变更都能以同一套机制实现完整回滚AI 聊天产生的所有变更也因此全部可撤销。多页文档与多文件标签页多页文档新增、删除、重命名页面每页有独立的视口状态viewport state 按页保存双击即可行内重命名。页面命令在 CLI 侧同样可操作openpencil pages源码 packages/cli/src/commands/pages.ts。多文件标签页多个文档以标签页形式打开⌘T新建标签页、⌘W关闭、⌘O打开文件。导出文档定义的导出能力图片——PNG、JPG、WEBP缩放倍率可配置0.5×–4×可从属性面板、右键菜单或⇧⌘E触发SVG——形状、带样式 run 的文本text with style runs、渐变、效果、混合模式Tailwind JSX——带 Tailwind v4 工具类的 HTML可直接用于 React 或 Vue复制为Copy as——文本、SVG、PNG⇧⌘C或通过右键菜单复制 JSX。CLI 等价命令openpencil export design.fig -f jsx --style tailwind实现位于 packages/core/src/ioformats.ts 按格式声明导出选项是否支持scale/quality如 SVG 等固定尺寸格式标记为FIXED_SIZE_EXPORT: { scale: false, quality: false }registry.ts 注册各导出器。CLI 侧还支持 PDF、PPTX、HTML 等更多格式见 packages/cli/README.md。AI 聊天90 设计工具的 Agent 循环按⌘J打开 AI 助手。它拥有90 个工具可以创建形状、设置样式、管理布局、操作组件与变量、执行布尔运算、分析设计令牌、导出资产。模型端可接 Anthropic、OpenAI、Google AI、OpenRouter 或任意兼容端点BYOK。交互特性工具调用以可折叠的时间线条目展示视觉验证visual verification——助手会渲染自己的产出并对照你的请求检查所有 AI 变更全量支持撤销得益于前述逆命令模式。源码证据工具注册表在 packages/core/src/tools/registry.tsALL_TOOLS [...CORE_TOOLS, ...EXTENDED_TOOLS]注释明确used by MCP server and CLI。当前注册表合计定义约 114 个工具core 26 个 extended 88 个与文档90口径一致。工具按能力域组织读取类readgetSelection / getNode / findNodes / getJSX修改类modifysetFill / setStroke / setLayout / setText / updateNode …结构类structurebatchUpdate / deleteNode / nodeResize / reparentNode分析类analyzediffChanges / diffCreate / diffVisual / evalCode、calc、codegenDesign JSX 生成、variables、vector、stock-photo等。聊天与会话运行时在 src/app/aiproviders、models、harness、vision 运行时等 99 个文件。配置与供应商细节见 packages/docs/programmable/ai-chat.md 及 packages/docs/programmable/byok-provider-compatibility.md。MCP Server无头读写 .fig把 Claude Code、Cursor、Windsurf 或任意 MCP 客户端接进来无头地读写.fig文件。同样提供 90 工具两种传输stdio 与 HTTP。安装与客户端配置npm install -g open-pencil/mcp{ mcpServers: { open-pencil: { command: openpencil-mcp } } }源码侧packages/mcp与 packages/mcp/README.md 进一步确认packages/mcp/package.json 声明了两个可执行入口openpencil-mcpstdio 传输与openpencil-mcp-httpStreamable HTTP 传输面向浏览器扩展与脚本packages/mcp/src/stdio/bridge.ts 负责 stdio 桥接packages/mcp/src/transport 处理传输发现、来源校验与路径限制工具定义与 AI 聊天共用同一注册表packages/mcp/src/tool/manifest.ts 从open-pencil/core/tools的ALL_TOOLS过滤出对 MCP 暴露的工具isToolExposed(def, mcp)本地客户端在 macOS/Linux 上优先使用私有 Unix 域套接字Windows 或不可用时回退 localhost TCP文件访问被限制在生效的 MCP 根目录内。完整工具清单见 packages/docs/programmable/mcp-server.md。CLI终端里检查、导出与分析 .fig从终端检查、导出、分析.fig文件packages/cli/README.mdopenpencil tree design.fig # 节点树 openpencil find design.fig --type TEXT # 搜索 openpencil export design.fig -f png # 渲染导出 openpencil analyze colors design.fig # 颜色审计 openpencil analyze clusters design.fig # 重复模式分析 openpencil eval design.fig -c ... # Figma Plugin API当桌面端正在运行时省略文件名即可通过 RPC 控制活动编辑器openpencil tree # 实时文档 openpencil export -f png # 画布截图补充说明所有检查类命令支持--json用于自动化安装npm install -g open-pencil/cli或bun add -g open-pencil/clieval提供Figma Plugin API 兼容的figma全局对象外加 OpenPencil 扩展的openpencil全局对象组件 behaviours、slots 等。README 示例openpencil eval design.fig -c return figma.currentPage.children.length除文档所列命令外CLI 命令目录packages/cli/src/commands还包括convert格式互转、importHTML/CSS/Tailwind 导入、lint设计 lint、tokens设计令牌提取、variables、pages、queryXPath 查询等。实时协作WebRTC P2P无需服务器分享一个链接即可协同编辑P2P 走 WebRTC不需要服务器。功能点带彩色箭头与名称标签的实时光标参与者头像presence avatars跟随模式Follow mode——点击某个协作者的光标即可跟随其视口本地持久化——IndexedDB安全房间 ID——通过crypto.getRandomValues()生成。源码位于 src/app/collab传输层 src/app/collab/transport/trystero.ts 使用 trysteroWebRTC DataChannel 公共 MQTT 中继信令代码注释说明每 5.3 秒向房间 broker 广播一次同伴发现两轮广播加一次 WebRTC 握手后新加入者即可被全员感知TRYSTERO_DISCOVERY_MS 12_000房间 ID 的生成与校验在 src/app/collab/room/id.ts小写字母数字的定长 IDROOM_ID_CHARS/ROOM_ID_LENGTH定义于 src/constants.tsparseRoomInput()同时接受裸 ID 与/share/分享链接误贴的链接不会加进别的房间本地持久化src/app/collab/session.ts 使用 IndexedDB 缓存会话状态同步经 Yjssrc/app/collab/yjs-sync.ts 与shared-tree目录光标等临场信息由 awareness 模块src/app/collab/awareness.ts承载。桌面端与 Web 端桌面端Tauri v2约 7 MB平台macOS签名 公证、Windows、Linux特性原生菜单、离线可用、自动保存安装Homebrewbrew install --cask openpencil源码位于 desktopdesktop/Cargo.toml 确认tauri { version 2, features [devtools] }原生菜单在 desktop/src/menu.rs 与生成的 desktop/generated/menu.json自动保存与文件对话框经 Tauri 插件dialog、updater 等实现。Web 端PWAWeb 版本可安装为 PWA移动端提供触控优化的 UI。构建配置 vite/pwa.ts 使用vite-plugin-pwa声明了 192/512 与 maskable 图标等 manifest 项移动端触控 HUD 见 src/components/MobileHud 与主题层 src/theme/mobile。Google Fonts 字体回退当本地没有某款字体时OpenPencil 会自动从 Google Fonts 获取——打开含陌生字体的.fig文件时无需手动安装字体。实现见 packages/core/src/text/web-fonts.ts支持的 Web 字体供应商不止 Google 一家WEB_FONT_PROVIDER_IDS [google, fontsource, bunny, fontshare]对 Google 供应商按请求的字符集做字形子集化{ options: { google: { experimental: { glyphs: [characters] } } } }只下载文档实际用到的字形加快字体加载桌面端另有系统字体目录能力desktop/src/fontscatalog / macos / sfnt / style。从仓库继续深入主题入口.fig 文件结构与管线packages/docs/reference/file-format.md、packages/docs/reference/scene-graph.mdKiwi 编解码与 Figma schemapackages/kiwi/README.md、packages/kiwi/src/fig/schema/fig.kiwiFigma 源模型与实例求值packages/fig/docs/instance-evaluation.md、packages/fig/docs/source-model.md组件 behaviours 与预览packages/docs/user-guide/components.md、packages/docs/development/behaviours-and-preview.md设计检查Lintpackages/docs/user-guide/checking-designs.md、packages/core/src/lintAI 聊天与 BYOKpackages/docs/programmable/ai-chat.mdMCP 工具参考packages/docs/programmable/mcp-server.md、packages/mcp/src/tool/manifest.tsCLI 命令packages/cli/README.md、packages/docs/programmable整体架构与技术栈packages/docs/development/architecture.md、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 可编程化能力全景AI 助手、MCP、CLI、JSX 渲染与 Figma Plugin APIOpenPencil 可编程化能力全景AI 助手、MCP、CLI、JSX 渲染与 Figma Plugin API OpenPencil 把设计文件当作结构化前端桌面应用AI 应用MCP 服务OpenPencil 功能特性全览基于 Kiwi 编解码与 Skia 渲染的 AI 原生设计编辑器OpenPencil 功能特性全览基于 Kiwi 编解码与 Skia 渲染的 AI 原生设计编辑器 OpenPencil 是一个开源GPL 3.0的 AI前端桌面应用AI 应用MCP 服务OpenPencil 开源设计编辑器全景解读.fig 兼容、AI 原生与完全可编程的 Figma 替代方案OpenPencil 开源设计编辑器全景解读.fig 兼容、AI 原生与完全可编程的 Figma 替代方案 OpenPencil 是一个 AI 原生的开源设计前端桌面应用AI 应用MCP 服务上一篇SeleniumBase MasterQA 实战指南用自动化 人工验证打造混合测试工作流下一篇技术方案对比Element Plus与Arco Design在vue-admin-better中的性能表现与架构选择创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考