OpenPencil 全解析：开源 AI 原生设计编辑器，兼容 Figma 文件、内置 AI 且完全可编程

前端桌面应用AI 应用MCP 服务【免费下载链接】open-pencilAI-native design editor. Open-source Figma alternative.项目地址https://gitcode.com/gh_mirrors/op/open-pencil点击查看免费下载OpenPencil 是一款 MIT 许可的开源设计编辑器主打原生打开与编辑 Figma 的.fig文件、内置 AI 设计助手并将自身定位为可完全编程的设计工具链而非单一应用。本文基于仓库文档与源码系统梳理它在 Figma 兼容、无头 CLI 自动化、AI/MCP 集成、Vue SDK 二次开发、实时协作等方面的能力与用法帮助你评估它作为 Figma 替代品或自建设计工具底座的实际可行性。项目定位开源的 Figma 替代品与可编程工具链根据仓库首页 README.md 与文档首页 packages/docs/es/index.md 的定义OpenPencil 的核心定位可以概括为一句话打开 Figma 文件、集成 AI、可被完全自动化同时也可以作为构建自有编辑器的工具包。它并非只做一个编辑器而是围绕同一个核心引擎交付了编辑器、文件编解码器、无头 CLI、MCP 服务器和 Vue SDK 等一整套能力。这一定位直接源于对 Figma 封闭生态的回应。README 的 Why 一节指出Figma 是一个主动限制程序化访问的封闭平台其官方 MCP 服务器只读此前社区方案 figma-use 依赖 CDP 实现读写自动化但在 Figma 126 版本中被移除设计文件使用专有二进制格式工作流随时可能因对方发布一个小版本而中断。OpenPencil 给出的替代方案是开源MIT、原生读取.fig、每一步操作都可脚本化、数据始终留在本机。从文档首页归纳的七大特性来看这一目标被拆解为特性要点Figma 兼容原生打开.fig文件与 Figma 之间可复制粘贴使用 Kiwi 二进制编解码器保证往返保真可编程无头 CLI 可检视、导出、分析.fig通过eval提供 Figma Plugin API支持 Tailwind CSS 导出与 JSON 输出工具包而非单一应用用 Vue SDK 搭建自定义编辑界面把 OpenPencil 嵌入其他产品或在同一核心上组装面向特定工作流的编辑器内置 AI内置聊天助手提供 90 个工具可创建形状、设置样式、管理布局、分析设计 token提供面向 Claude Code、Cursor、Windsurf 的 MCP 服务器开源MIT 许可编辑器、引擎、文件编解码器与 CLI 全部可读可改免费且本地化无需账号、服务器与联网桌面应用约 715 MB文档首页标注约 7 MBREADME 标注约 15 MB也提供 Web 应用实时协作基于 WebRTC 的 P2P 连接无需服务器分享链接即可实时编辑支持在线光标与视图跟随下文将沿着这七条主线逐一展开并结合仓库源码给出实现层证据。原生 Figma 兼容.fig文件与 Kiwi 二进制编解码器Figma 兼容是 OpenPencil 最核心的能力。文档 packages/docs/overview/features.md 明确说明OpenPencil 可以直接打开并保存原生 Figma 文件导入/导出管线使用与 Figma 相同的 Kiwi 二进制编解码器——包含194 个 schema 定义、每个节点约 390 个字段。在编辑器内⌘S保存、⇧⌘S另存为。更重要的是与 Figma 之间的双向复制粘贴在 Figma 中选中节点⌘C切到 OpenPencil 后⌘V填充、描边、自动布局、文本、效果、圆角与矢量网络都会保留反向同样成立。Kiwi 编解码器的底层实现Kiwi 编解码器的实现集中在open-pencil/kiwi包中其 README.md 说明该包持有纯 Kiwi schema 解析、Figma Kiwi schema 数据、底层消息编解码、fig-kiwi容器工具与 GUID 格式化完整的.fig归档解析在open-pencil/figSceneGraph 集成在核心引擎之外。Kiwi 运行时基于 Evan Wallace 的 KiwiMIT 许可改造而来。Schema 运行时提供parseSchema/validateSchema/compileSchema三件套先解析 schema 文本、校验再编译出可用的编解码器import { compileSchema, parseSchema, validateSchema } from open-pencil/kiwi/schema-runtime const schema parseSchema( message Point { float x 1; float y 2; } ) validateSchema(schema) const codec compileSchema(schema) const bytes codec.encodeMessage({ x: 12, y: 24 }) const point codec.decodeMessage(bytes)针对 Figma 场景open-pencil/kiwi/fig/codec提供了createNodeChangesMessage/encodeMessage/initCodec等高层接口可直接构造节点变更消息并编码为字节流import { 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)值得注意的实现细节布尔运算负载使用 Figma 的 Kiwi 枚举名SceneGraph 层的EXCLUDE概念需要在调用底层编解码器前序列化为 Kiwi 的XOR。此外open-pencil/kiwi/fig/container提供buildFigKiwi/parseFigKiwiChunks处理fig-kiwi容器open-pencil/kiwi/fig/parse的decodeFigKiwiCanvas可解码画布字节并返回 nodeChanges 与 blobsopen-pencil/kiwi/fig/guid则在1:42字符串与{ sessionID, localID }结构之间互转。从包结构看open-pencil/kiwi是场景图无关的纯运行时层明确约束不得导入open-pencil/core、应用代码、Vue/CLI/MCP 代码以保证文件格式层与编辑器逻辑的解耦。完全可编程无头 CLI 与自动化OpenPencil 的可编程承诺主要落在open-pencil/cli包上。安装方式见 packages/cli/package.json 与 READMEnpm install -g open-pencil/cli # 或 bun add -g open-pencil/cliCLI 提供tree、find、node、info、query、export、convert、import、lint、analyze、variables、eval、fonts、pages、selection、libraries等子命令源码位于 packages/cli/src/commands每个子命令一个文件或一个目录职责划分清晰。检视设计文件不打开编辑器即可浏览节点树、按名称或类型搜索、深入查看属性openpencil tree design.fig openpencil find design.pen --type TEXT openpencil node design.fig --id 1:23 openpencil info design.figtree命令输出的典型层级如下[0] [page] Getting started (0:46566) [0] [section] (0:46567) [0] [frame] Body (0:46568) [0] [frame] Introduction (0:46569) [0] [frame] Introduction Card (0:46570) [0] [frame] Guidance (0:46571)XPath 查询query子命令支持用 XPath 选择器按类型、属性与结构查找节点openpencil query design.fig //FRAME # 所有 frame openpencil query design.fig //FRAME[width 300] # 宽度小于 300px 的 frame openpencil query design.fig //TEXT[contains(name, Button)] # 名称含 Button 的文本 openpencil query design.fig //*[cornerRadius 0] # 圆角节点 openpencil query design.fig //SECTION//TEXT # section 内的文本导出与格式转换export支持渲染为 PNG、JPG、WEBP、SVG、PDF、PPTX、HTML、JSX 或.fig也可以按页导出.fig、在支持的格式间转换整个文档openpencil export design.fig # 默认 PNG openpencil export design.fig -f jpg -s 2 -q 90 # 2 倍尺寸 JPG质量 90 openpencil export design.fig -f fig --page Page 1 # 按页导出 .fig openpencil export design.fig -f jsx --style tailwind # Tailwind 风格的 JSX openpencil export design.fig -f html --css tailwind # Tailwind 风格的 HTML 片段 openpencil export design.fig -f html --html standalone --assets external # HTML 外部资源 openpencil convert design.pen output.fig # 文档格式互转 openpencil import page.html --css styles.css -o page.fig # HTML/CSS → 可编辑 .figLint 设计文件从终端即可检查命名、布局、结构与可访问性问题lint 规则引擎实现在 packages/core/src/lintopenpencil lint design.fig openpencil lint design.pen --preset strict openpencil lint design.fig --rule color-contrast openpencil lint design.fig --list-rules分析与提取设计 tokenanalyze系列子命令packages/cli/src/commands/analyze可以在终端审计整个设计系统查找不一致、提取真实调色板、识别可抽取的组件openpencil analyze colors design.fig openpencil analyze typography design.fig openpencil analyze spacing design.fig openpencil analyze clusters design.fig openpencil analyze overlaps design.fig openpencil variables design.fig颜色审计的典型输出直方图 重复模式识别#1d1b20 ██████████████████████████████ 17155× #49454f ██████████████████████████████ 9814× #ffffff ██████████████████████████████ 8620× #6750a4 ██████████████████████████████ 3967× 3771× frame container (100% match) size: 40×40, structure: Frame [Frame] 2982× instance Checkboxes (100% match) size: 48×48, structure: Instance [Frame]用 Figma Plugin API 写脚本eval子命令把完整的 Figma Plugin API 暴露在终端里可以修改文件并写回openpencil eval design.fig -c figma.currentPage.children.length openpencil eval design.fig -c figma.currentPage.selection.forEach(n n.opacity 0.5) -w控制正在运行的应用桌面应用运行时可省略文件参数——CLI 会通过 RPC 连接并操作实时画布这对自动化脚本、CI 流水线或需要与编辑器交互的 AI Agent 非常有用openpencil tree # 检视实时文档 openpencil export -f png # 截取当前画布 openpencil eval -c figma.currentPage.name # 查询编辑器所有命令均支持--json输出便于接入 CI 与自动化系统。设计到代码JSX/Tailwind 导出与 HTML/CSS 导入OpenPencil 的导出不限于位图与矢量格式还覆盖设计到代码的工作流。从 CLI 可以导出 Tailwind v4 工具类的 JSX/HTMLopenpencil export design.fig -f jsx --style tailwind openpencil export design.fig -f html --css tailwind反向路径同样成立DOM/CSS 输入经由open-pencil/dom-css包见 packages/dom-css/README.md流转HTML、手写 CSS 与 Tailwind 工具类都可以变成可编辑的 OpenPencil 图层openpencil import card.html --css card.css -o card.fig openpencil import card.html --tailwind flex flex-col gap-3 w-80 p-6 rounded-xl bg-white -o card.fig例如下面这段 Tailwind 结构可以被转换为可编辑的设计图层div classNameflex flex-col gap-4 p-6 bg-white rounded-xl p classNametext-2xl font-bold text-[#1D1B20]Card Title/p p classNametext-sm text-[#49454F]Description text/p /div内置 AI聊天助手、MCP 服务器与编码智能体内置聊天在编辑器内按⌘JWindows/Linux 为CtrlJ即可打开 AI 助手。根据 packages/docs/programmable/ai-chat.md它拥有 90 个工具README 标注为 100可以创建形状、设置填充与描边、管理自动布局、处理组件与变量、执行布尔运算、分析设计 token 与导出资源。工具调用以可折叠时间线条目展示助手会渲染自己的成果并与你的需求核对视觉验证所有 AI 变更都支持撤销。接入采用 BYOKBring Your Own Key模式——没有后端、没有订阅密钥直接对提供商说话。支持的提供商包括 OpenRouter、Anthropic、OpenAI、Google AI、Z.ai、MiniMax 以及 OpenAI/Anthropic 兼容端点自定义 base URL。注意并非所有提供商都在浏览器中可用也并非所有模型都能可靠地流式输出工具调用实测兼容性见 packages/docs/programmable/byok-provider-compatibility.md。AI 聊天功能的实现位于 src/app/ai/chat 与 src/app/ai/providers。聊天设置中还提供每条消息最大步数11000默认 50与工具访问开关可以按工具组或单个工具控制 AI 可调用的能力。需要留意的是工具开关控制的是模型被提供哪些工具而不是脚本可执行的操作边界——启用eval等可脚本工具后即使关闭了对应专用工具脚本仍可执行设计操作。MCP 服务器OpenPencil 的 MCP 服务器open-pencil/mcp见 packages/mcp/package.json支持 Claude Code、Cursor、Windsurf 或任何 MCP 客户端以无头方式检视、修改与导出设计文档提供 90 个工具两个传输层stdio 与 HTTP。完整工具列表见 packages/docs/programmable/mcp-server.md。stdio 方式Claude Code、Cursor、Windsurfnpm install -g open-pencil/mcp claude mcp add --scope user open-pencil -- openpencil-mcp其他 MCP 客户端使用标准配置{ mcpServers: { open-pencil: { command: openpencil-mcp } } }HTTP 方式脚本、CIopenpencil-mcp-http # macOS/Linux 上为 Unix socket http://127.0.0.1:7600/mcp本地客户端会自动发现私有 Unix socket并在其不可用时回退到 localhost TCPmacOS/Linux 上设置PORT0可禁用 TCP。文件访问方面可通过环境变量OPENPENCIL_MCP_ROOT把open_file、new_document及导出的path参数限制在指定目录内默认以当前工作目录为界。桌面编码智能体桌面应用可在聊天面板中直接使用 Claude Code、Codex 或 Gemini CLI智能体连接编辑器的 MCP 服务器并调用全部设计工具。以 Claude Code 为例的接入步骤安装 ACP 适配器npm install -g agentclientprotocol/claude-agent-acp在~/.claude/settings.json中放行 MCP 权限{ permissions: { allow: [mcp__open-pencil__*] } }打开桌面应用 →⌘J→ 在提供商下拉框中选择Claude Code此外还有 AI Agent 技能包skills/open-pencil/SKILL.md可以让支持 skills 的编码智能体学会检视设计、导出资源、分析 token、修改.fig文件npx skills add open-pencil/open-pencil工具包而非单一应用用 Vue SDK 构建自有编辑器OpenPencil 的另一条主线是给开发者当底座。open-pencil/vuepackages/vue/README.md是一个无头headlessVue 3 SDK构建在open-pencil/core之上提供编辑器注入、画布集成、选择/命令/面板/变量/i18n 等 composable以及CanvasRoot、LayerTreeRoot、PageListRoot、ToolbarRoot等无头结构原语——它只提供逻辑与结构样式与产品化 UI 完全由宿主应用掌控。安装bun add open-pencil/vue open-pencil/core open-pencil/scene-graph canvaskit-wasm一个最小可运行的编辑器只需要几十行代码script setup langts import { reactive } from vue import { createDefaultEditorState, createEditor } from open-pencil/core/editor import { SceneGraph } from open-pencil/scene-graph import { CanvasRoot, CanvasSurface, provideEditor } from open-pencil/vue const graph new SceneGraph() const page graph.getPages()[0] if (!page) throw new Error(Expected an initial page) const editor createEditor({ graph, state: reactive(createDefaultEditorState(page.id)), getViewportSize: () ({ width: 1200, height: 800 }), }) editor.createShape(RECTANGLE, 100, 100, 200, 150) editor.zoomToFit() provideEditor(editor) /script template div classh-screen CanvasRoot CanvasSurface classsize-full / /CanvasRoot /div /templateSDK 的核心 API 分三层核心 APIprovideEditor/useEditor、useCanvas、useSelectionState、useEditorCommands、属性面板系列 composable、useVariablesEditor、usePageList、useI18n以及无头原语、高级 APIuseNodeProps、useColorModel、useFill、useToolbarState等低层组合、原语上下文辅助与底层 storeuseCanvasContext、useLayerTree、locale相关。仓库内还附带一个可运行的示例应用 packages/vue/example可执行bun install bun run dev直接体验。完整指南见 packages/docs/programmable/sdk。实时协作WebRTC P2P无需服务器协作能力走的是零服务器路线README 与文档均说明连接基于 WebRTC P2P无需账号。使用方式packages/docs/overview/features.md点击右上方面板的分享按钮分享生成的链接app.openpencil.dev/share/room-id协作者实时看到你的光标、选择与编辑点击协作者头像即可跟随其视口技术栈上协作层使用 TrysteroWebRTC P2P 信令 YjsCRDT实现并发编辑实现位于 src/app/collab。细节还包括带彩色箭头与姓名标签的实时光标、在线状态头像、跟随模式、IndexedDB 本地持久化以及用crypto.getRandomValues()生成的安全房间 ID。桌面与 Web 双端分发桌面端基于 Tauri v2源码在 desktop含 Rust 侧实现与 desktop/tauri.conf.json覆盖 macOS已签名与公证、Windows、Linux具备原生菜单、离线可用与自动保存。macOS 用户可通过 Homebrew 安装brew install --cask openpencil也可直接下载发布包或使用无需安装的 Web 应用Web 版可作为 PWA 安装到移动设备配有触摸优化 UI。针对打开.fig时缺少字体的场景OpenPencil 会自动从 Google Fonts 拉取缺失字体无需手动安装。技术栈与仓库结构从 README 的 tech stack 一节与项目结构可以梳理出整体技术选型层次技术渲染SkiaCanvasKit WASM布局Yoga WASMflex grid基于 fork 版本UIVue 3、Reka UI、Tailwind CSS 4文件格式Kiwi 二进制 Zstd ZIP协作TrysteroWebRTC P2P YjsCRDT桌面Tauri v2AI/MCPVercel AI SDK多提供商 BYOK、MCP SDK、Hono仓库采用 monorepo 结构核心包见 README 的 Project structure包括packages/scene-graph节点、图元、命中测试、复制/吸附/撤销packages/penPencil 文档格式辅助packages/kiwiKiwi 运行时与.fig容器底层解析packages/fig.fig归档、SceneGraph 转换、实例与元数据packages/core编辑器引擎、渲染器、布局、工具、RPC、文档 I/Opackages/dom-cssHTML/CSS/Tailwind 到可编辑设计文档packages/vue无头 Vue SDKpackages/cli无头 CLIpackages/mcpMCP 服务器stdio HTTPpackages/harness编码智能体 Harness 会话的配套 CLIpackages/docs文档站点srcVue 应用编辑器外壳、AI、协作、文档 I/OdesktopTauri v2 桌面应用skillsAgent 技能包本地开发可直接git clone该仓库后运行bun install bun run dev直接 Vite 服务端口 1420或bun run tauri dev桌面应用需 Rust 环境Dev Container 也已支持容器内固定 Bun 版本并转发 1420 端口的 Web 编辑器。总结OpenPencil 的核心价值在于把Figma 兼容与完全可编程同时做成默认能力open-pencil/kiwi负责底层二进制保真无头 CLI 提供从树检视、XPath 查询、token 分析到eval脚本的全套自动化接口MCP 服务器与 AI 聊天让设计文档可以被智能体直接读写Vue SDK 则把整个引擎开放为可嵌入的自有编辑器底座。无论是替代 Figma 的日常设计工作、把.fig接入 CI 流水线还是基于同一内核构建垂直领域的编辑工具这个仓库都提供了可直接落地的路径与完整源码。赞分享前端桌面应用AI 应用MCP 服务【免费下载链接】open-pencilAI-native design editor. Open-source Figma alternative.项目地址https://gitcode.com/gh_mirrors/op/open-pencil点击查看免费下载相关推荐OpenPencil 开源设计编辑器全景解读.fig 兼容、AI 原生与完全可编程的 Figma 替代方案OpenPencil 开源设计编辑器全景解读.fig 兼容、AI 原生与完全可编程的 Figma 替代方案 OpenPencil 是一个 AI 原生的开源设计前端桌面应用AI 应用MCP 服务OpenPencil 完全指南开源 .fig/.pen 设计编辑器的可编程 CLI、AI 与 MCP 实战OpenPencil 完全指南开源 .fig/.pen 设计编辑器的可编程 CLI、AI 与 MCP 实战 OpenPencil 是一个开源的 AI nati前端桌面应用AI 应用MCP 服务OpenPencil 功能全景解析.fig 原生兼容、AI 驱动与实时协作的设计编辑器能力图谱OpenPencil 功能全景解析.fig 原生兼容、AI 驱动与实时协作的设计编辑器能力图谱 本篇技术指南基于 open pencil 仓库官方文档 do前端桌面应用AI 应用MCP 服务上一篇5个关键策略提升Tsuru容器安全运行时性能平衡安全与效率的终极指南下一篇PyTorch-OpCounter与自动文档生成使用Sphinx构建项目文档的完整指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考