OpenPencil：能原生打开 Figma 文件的开源本地化设计编辑器

在 Figma 凭借浏览器端协作与组件生态成为事实标准之后，开源社区一直想做出一个”能替代 Figma 又不被其 API 锁死”的本地工具。OpenPencil 是这一波尝试里定位最激进的一个：它不仅是一个开源设计编辑器，还把设计文件当成可编程的数据对象，内置对话式 AI，并以 MCP Server 的身份接入 Claude Code、Cursor 等编码 Agent。本文基于其官方站点与 GitHub 仓库 README，梳理它到底做了什么、哪些数字需要打折扣。

一、背景动机：Figma 开放度的痛点

Figma 的强项在云端协作与插件生态，但它的文件格式长期是闭源二进制，官方 REST API 也只对企业级付费客户开放较完整的读写能力。对工程师团队而言，这意味着两件事很难自动化：一是在 CI 或 Agent 流程里”读懂”设计稿，二是把设计稿直接转成可用的组件代码。

OpenPencil 走的是另一条路——不依赖 Figma 的云 API，而是在本地直接解析 .fig 二进制文件。它的作者在 README 中把项目定位为”AI-native design editor, open-source Figma alternative”，许可证为 MIT。

二、它是什么：一个编辑器，也是一套工具包

按官方说法，OpenPencil 同时具备五层身份：

• Figma 兼容：原生打开 .fig 文件，与 Figma 之间互相复制粘贴节点，通过自研的 Kiwi 二进制编解码器 保持往返保真（round-trip fidelity）；
• 可编程：提供无头 CLI、XPath 查询、通过 eval 调用的 Figma Plugin API、Tailwind CSS 导出与 JSON 输出；
• 工具包（toolkit）而非单一 App：提供 Vue SDK，可把编辑器内核嵌入其他产品，或围绕同一引擎拼装面向特定工作流的编辑界面；
• AI 原生：内置聊天助手，可作为 MCP Server 接入 Claude Code、Cursor、Windsurf；
• 本地免费：无需账号、无需服务器、断网可用。

三、技术机制：同一个引擎，多种入口

OpenPencil 的核心设计哲学是”编辑器 UI 与自动化接口共用同一个渲染引擎”。官方文档原话是：“The editor UI and the automation interfaces use the same engine. If you can do it by clicking, you can do it by scripting.” 也就是说，你在画布上点一下能做的事，CLI、AI 工具、JSX 渲染器、MCP Server 和 SDK 都能做——这避免了”插件层只是壳子”的常见问题。

几个值得注意的工程实现：

• 自动布局基于 Yoga WASM，同时支持 flex 与 CSS Grid，带 gap、padding、对齐与 track sizing；
• 桌面端用 Tauri v2 打包，覆盖 macOS / Windows / Linux，同时以 PWA 形式在浏览器运行；
• 无头 CLI 为 @open-pencil/cli，支持 tree、find、node、info 浏览节点树，支持用 XPath 选择器按类型、属性、结构筛选节点（如 //FRAME[@width < 300] 找出宽度小于 300 的画板）；
• 导出格式覆盖 PNG、JPG、WEBP、SVG、PDF、PPTX、HTML、JSX 以及 .fig 本身，并可把整文档在 .pen 与 .fig 之间互转；
• 反向导入通过 @open-pencil/dom-css 把 HTML、手写 CSS、Tailwind 工具类 CSS 变成可编辑图层，即 openpencil import card.html --css card.css -o card.fig；
• 图像矢量化可把位图图层转为可编辑矢量图层，底层接 Recraft 或 fal.ai；
• 实时协作走 WebRTC P2P，无服务器、无账号，带光标、在场状态与跟随模式。

AI 助手采用 BYOK（自带密钥）模式，官方称兼容 OpenRouter、Anthropic、OpenAI、Google AI、DeepSeek、Z.ai、MiniMax 及兼容端点。

四、关键数字与口径偏差

把官方各处页面放在一起核对，会发现几处自述口径并不一致，写文章时必须区分”官方称”与”已核实”：

此外，官方在 README 顶部对成熟度的定性相当克制：“Status: Active development. Usable today, with some rough edges as features evolve（今天可用，但随功能演进仍有毛刺）。” 仓库当前开放 46 个 Issue、22 个 PR，侧面印证它还在快速迭代期。系统要求为 macOS 13+、Windows 10+、Linux 需 WebKitGTK 2.40+；网页版则需 Chrome 111 / Edge 111 / Firefox 128 / Safari 16.4 以上。

五、评测方法批判

需要清醒的是，OpenPencil 目前没有任何第三方独立基准。所有”保真""可编程""AI 友好”的说法都来自官方自述与官网 demo，没有社区用同一份复杂设计稿去量化”往返保真到底丢了多少属性”。Koala 在周报里也直言”它在兼容性上还存在一些问题”。

尤其要警惕两点：

1. “原生打开 .fig”不等于”完全兼容 Figma”：Figma 文件包含大量私有组件、插件数据与矢量特效，Kiwi 编解码器能打开不代表所有效果（复杂模糊、自动布局嵌套、插件生成图层）都无损还原；
2. “MCP Server 可接入”不等于”Agent 一定能用好”：90 多个工具的描述与命名直接决定 Agent 的调用准确率，这部分官方尚未披露任何评测集或成功率数字。

六、适用 / 不适用场景

适合：

• 想在本地、离线环境处理 Figma 文件，避免上传到云；
• 想把设计稿纳入 CI——用无头 CLI 导出切片、lint 命名与无障碍、抽取设计 token；
• 已经在用 Claude Code / Cursor，希望 Agent 直接读写设计稿、产出 Tailwind/JSX；
• 需要把一个设计内核嵌入自家产品（Vue SDK 路线）。

不适合：

• 团队已深度绑定 Figma 企业版的评论、版本历史、社区插件生态；
• 对复杂矢量特效、像素级还原有刚性要求，且短期无法接受兼容性毛刺；
• 期待一个成熟、文档完备、开箱即用的商业设计 SaaS。

七、客观分析：优势与局限

优势：

1. 本地化 + 可编程是它与 Figma 最本质的差异，把设计文件从”云端黑盒”变成”终端可查的数据”；
2. MIT 协议全开源，编辑器、引擎、编解码器、CLI 全部可读可改；
3. Agent 友好：MCP + CLI + XPath + JSON 导出的组合，正好踩在”设计→代码”自动化的需求上；
4. P2P 协作免服务器，对小团队是实用主义选择。

局限：

1. 成熟度尚早：官方自认”有毛刺”，Issue/PR 数量说明兼容性问题仍在收敛；
2. 数字口径含糊：AI 工具数、包体积在不同页面说法不一，缺乏权威统一说明；
3. 缺第三方验证：保真度、Agent 成功率均无独立数据；
4. 生态空白：与 Figma 庞大的社区插件、模板市场相比，组件与素材生态需要从零积累；
5. 图像矢量化依赖 Recraft / fal.ai 等外部付费服务，并非纯本地能力。

八、它意味着什么

OpenPencil 的真正意义不在”又一个 Figma 替代品”，而在于它押注了一个判断：在 AI Agent 时代，设计稿必须是机器可读写的数据，而不是只能给人看的画布。当 Claude Code、Cursor 这类 Agent 开始承担前端实现工作，“设计文件能不能被 Agent 直接打开、查询、改稿、导出组件”会成为新的竞争维度。Figma 在 API 开放性上的保守，恰好给了 OpenPencil 这类本地开源工具一个切入窗口。当然，能否突破 Figma 的固有市场，最终取决于兼容性收敛速度与生态建设——这仍是一个”方向正确、但远未定型”的早期项目。

（说明：本文官方仅提供一张产品界面截图，无架构图或性能对比图，故配图数量为 1 张。）

参考来源

• OpenPencil 官网
• OpenPencil GitHub 仓库
• OpenPencil 自动化文档
• Koala 项目库条目