前端桌面应用AI 应用MCP 服务【免费下载链接】open-pencilAI-native design editor. Open-source Figma alternative.项目地址https://gitcode.com/gh_mirrors/op/open-pencil点击查看免费下载OpenPencil 是一个开源的 AI-native 设计编辑器原生读写 Figma 的.fig文件与自有.pen格式内置 AI 助手并以「可编程工具包」的形态交付headless CLI、XPath 查询、Figma Plugin API、MCP 服务器与 headless Vue SDK 一应俱全。阅读本文你将掌握 OpenPencil 的安装方式、CLI 全命令实战树形浏览、XPath 查询、多格式导出、HTML/CSS/Tailwind 导入、lint 与设计 token 分析、AI/MCP 接入方案以及本地开发与桌面构建流程。项目定位与现状OpenPencil 的核心定位是「开源设计编辑器 可编程工具包」既能像传统设计工具一样打开.fig和.pen设计文件读/写原生 Figma 文件、在应用或系统文件浏览器中打开受支持的 Pencil 文档、在应用之间复制粘贴节点又是一个完全可脚本化的引擎——headless CLI、XPath 查询、通过eval暴露的 Figma Plugin API、面向 AI Agent 的 MCP 服务器以及面向桌面 AgentClaude Code、Codex、Gemini CLI的集成能力。项目处于活跃开发状态README 标注 Active development. Usable today, with some rough edgesLicense 为 MIT见 LICENSE版权归属 Danila Poyarkov 与 OpenPencil contributors。安装方式桌面应用 / Web 应用macOSHomebrewbrew install --cask openpencil直接下载从项目的 releases 页面下载对应平台安装包免安装使用直接使用 Web 应用版本CLInpm install -g open-pencil/cli # 或bun add -g open-pencil/cli从源码看CLI 主入口定义在 packages/cli/src/index.ts基于citty框架注册了analyze、convert、documents、eval、export、import、find、formats、fonts、info、lint、libraries、node、pages、query、selection、tree、variables共 18 个子命令元信息为 OpenPencil CLI — inspect, export, and lint OpenPencil design documents。核心能力总览打开.fig和.pen文件原生读写 Figma 文件从应用或系统文件浏览器打开受支持的 Pencil 文档跨应用复制粘贴节点。AI 构建设计在聊天中描述需求100 工具创建与修改节点支持连接 OpenRouter、Anthropic、OpenAI、Google AI、DeepSeek、Z.ai、MiniMax 或兼容端点。完全可编程headless CLI、XPath 查询、通过eval使用 Figma Plugin API、面向 AI Agent 的 MCP 服务器以及 Claude Code、Codex、Gemini CLI 的桌面 Agent 集成。Lint、转换与 token 提取检查文档lint 命名/布局/无障碍在支持的格式间转换分析颜色/排版/间距/聚类提取设计 token。组件与变体创建可复用组件、将变体分组为组件集、以实例形式插入本地资源、在检查器中切换变体。图片矢量化通过 Recraft 或 fal.ai 将图片图层转换为可编辑矢量图层。设计转代码导出将选区导出为 JSX/Tailwind、生成 token 输出、将设计映射到面向组件化的代码工作流。Vue SDK 自定义编辑器headless 组件与 composables可将 OpenPencil 嵌入其他应用或构建特定工作流的编辑界面。实时协作基于 WebRTC 的 P2P 协作无需服务器、无需账号支持光标、在线状态、跟随模式。自动布局与 CSS Grid通过 Yoga WASM 实现 flex 与 grid 布局支持 gap、padding、alignment、track sizing。约 15 MB 桌面应用基于 Tauri v2支持 macOS、Windows、Linux同时可作为 PWA 在浏览器中运行。CLI 实战不打开编辑器也能操作设计文件1. 查看设计文件浏览节点树、按名称或类型搜索、深入查看属性——全程无需打开编辑器openpencil tree design.fig openpencil find design.pen --type TEXT openpencil node design.fig --id 1:23 openpencil info design.figtree输出示例页面 / section / frame 层级一目了然[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)从 packages/cli/src/commands/tree.ts 的实现看tree支持--page指定页面名称默认第一页与--depth最大深度默认不限并通过agentfmt格式化树形输出info命令packages/cli/src/commands/info.ts则输出页数、总节点数、各页面节点直方图、类型统计与字体列表。2. XPath 查询使用 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 内的文本packages/cli/src/commands/query.ts 中query支持--page页面名称默认全部页面与--limit最大结果数默认 1000是自动化审查与批量改名的利器。3. 导出渲染为 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 # JPG at 2x, quality 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 fragment openpencil export design.fig -f html --html standalone --assets external # HTML assets openpencil convert design.pen output.fig # 文档格式转换 openpencil import page.html --css styles.css -o page.fig # HTML/CSS → 可编辑 .fig根据 packages/cli/src/commands/export.ts 的参数定义export的全部可选参数如下含默认值与取值范围参数别名默认值说明--output-oname.format输出文件路径--format-fpngpng / jpg / webp / svg / pdf / pptx / jsx / html / fig--scale-s1导出倍率--quality-q90JPG/WEBP 质量 0–100--page第一页按名称导出指定页面FIG 默认导出整个文档--node—按节点 ID 导出不可与--page同时使用--styleopenpencilJSX 样式openpencil或tailwind--htmlfragmentHTML 输出模式fragment或standalone--cssinlineHTML CSS 输出inline或tailwind--assetsinlineHTML 资源输出inline或external--fontsnoneHTML 字体输出assets或none--font-policywarn栅格/PDF 字体策略warn/strict/allow--thumbnail关导出页面缩略图而非完整渲染--width/--height1920/1080缩略图尺寸实现细节文件模式下export通过open-pencil/core/io的IORegistry完成写入与内容导出HTML 导出走open-pencil/dom-css的exportHTMLBundle支持将入口文件与资源文件assets目录一并写出控制台会打印Exported path (x KB)与资源文件数量。JSX/HTML/FIG/PPTX 格式目前仅在文件模式下可用连接运行中应用时仅支持 PNG/JPG/WEBP/SVG/PDFpackages/cli/src/commands/export.ts 中exportViaApp的处理逻辑。4. HTML/CSS/Tailwind 导入DOM/CSS 输入经过open-pencil/dom-css处理因此 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.figdiv 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 /divpackages/cli/src/commands/import.ts 展示了完整的导入参数体系--cssCSS 文件、--css-text内联 CSS 文本、--tailwindTailwind 工具类候选串、--tailwind-file包含工具类的文件、--page-name场景图页面名默认DOM/CSS、--format输出格式fig或json默认fig。内部通过createHeadlessCSSRuntime创建无头 CSS 运行时调用htmlToDesignDocument/tailwindHTMLToDesignDocument完成转换——这意味着你可以把设计稿从代码侧反哺回设计工具。5. Lint 设计文件从终端捕获命名、布局、结构与无障碍问题openpencil lint design.fig openpencil lint design.pen --preset strict openpencil lint design.fig --rule color-contrast openpencil lint design.fig --list-rulespackages/cli/src/commands/lint.ts 显示lint使用open-pencil/core/lint的createLinter内置三个预设——recommended默认、strict、accessibility--rule可指定单个/多个规则可重复--list-rules列出全部规则后退出。输出按error/warn/info三档着色并附上节点路径、节点名与 ID 及修复建议suggest若存在 error 级问题进程以退出码 1 结束便于接入 CI。lint 规则集的完整实现位于 packages/core/src/lint共 24 个文件。6. 分析与提取设计 token从终端审计整个设计系统——发现不一致、提取真实调色板、找出待抽取的组件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]analyze子命令族定义在 packages/cli/src/commands/analyze/index.ts包含colors、typography、spacing、clusters、overlaps五个子命令。以 packages/cli/src/commands/analyze/colors.ts 为例--limit最多展示颜色数默认 30、--threshold相似颜色聚类的距离阈值 0–50默认 15、--similar展示可合并的相似色簇。输出中每个颜色会标注是否来自变量$variableName并汇总 unique colors / from variables / hardcoded 数量——直接可用来发现「硬编码颜色 vs 设计变量」的比例。7. 使用 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) -wpackages/cli/src/commands/eval.ts 的实现细节代码可通过-c/--code传入也可用--stdin从标准输入读取未以return开头的代码会被包装为return (async () { ... })()执行。文件模式下会先loadDocument加载文档并populateWholeDocument铺开全量节点再实例化open-pencil/core/figma-api的FigmaAPI作为figma全局对象注入。-w/--write将变更写回原文件-o/--output则写到另一个文件两参数分别对应io.writeDocument(fig, graph)的结果落盘。这为批量重命名、批量改样式、导出资产等自动化脚本提供了完全等同于 Figma 插件的编程接口。8. 控制运行中的应用当桌面应用正在运行时省略文件参数即可——CLI 通过 RPC 连接并操作实时画布。这对自动化脚本、CI 流水线或需要与编辑器交互的 AI Agent 非常有用openpencil tree # 检查实时文档 openpencil export -f png # 截取当前画布 openpencil eval -c figma.currentPage.name # 查询编辑器所有命令都支持--json输出机器可读结果。这种「文件模式 应用模式」的双模设计贯穿全部命令如tree.ts中通过loadRPCData(args.file, tree, ...)实现——提供文件时走 headless 解析省略文件时走 RPC 通道连接运行中的应用isAppMode判定。AI 与 MCP内置聊天按⌘JWindows/Linux 为CtrlJ打开 AI 助手。它拥有 100 工具可创建形状、设置填充与描边、管理自动布局、操作组件与变量、执行布尔运算、分析设计 token、导出资产。自带 API Key 即可连接 OpenRouter、Anthropic、OpenAI、Google AI、DeepSeek、Z.ai、MiniMax 或兼容端点——无后端、无账号。需要注意的是并非所有提供商都能在浏览器中正常工作也并非所有模型都能正确流式输出工具调用。各提供商与模型的实测兼容性见 docs/programmable/byok-provider-compatibility.md项目欢迎贡献实测结果。桌面编码代理可在聊天面板中直接使用 Claude Code、Codex 或 Gemini CLI。Agent 连接到编辑器的 MCP 服务器使用全部 100 设计工具。需要本地安装桌面应用与 Agent CLI。Pi 也可作为可选的 AI SDK Harness 提供商执行npm install -g open-pencil/harness安装配套 CLI然后在Settings → AI agents中添加Pi模型配置。配套 CLI 单独安装是为了避免为未启用 Harness 提供商的用户捆绑 JavaScript 运行时。Claude Code 接入步骤安装 ACP 适配器npm install -g agentclientprotocol/claude-agent-acp在~/.claude/settings.json添加 MCP 权限{ permissions: { allow: [mcp__open-pencil__*] } }打开桌面应用 →⌘J→ 在提供商下拉框中选择Claude CodeMCP 服务器连接 Claude Code、Cursor、Windsurf 或任何 MCP 客户端即可 headless 地检查、修改与导出设计文档提供 100 工具。完整文档见 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 TCP在 macOS/Linux 上设置PORT0可禁用 TCP。文件访问控制设置OPENPENCIL_MCP_ROOT可将文件操作open_file、new_document、导出path参数限定在指定目录内默认值为当前工作目录。MCP 服务器的实现位于 packages/mcp/src含 stdio 与 HTTP 传输、RPC 类型、认证等模块。AI Agent Skill通过 skill 教你的 AI 编码代理使用 OpenPencil——检查设计、导出资产、分析 token、修改 .fig 文件npx skills add open-pencil/open-pencil适用于 Claude Code、Cursor、Windsurf、Codex 以及任何支持 skills 的 Agent。Skill 定义与参考文档在 skills/open-pencil/SKILL.md 与 skills/open-pencil/references/design-authoring.md。面向文档感知型 Agent文档站点还发布了llms.txt、llms-full.txt以及按页生成的 Markdown 文件文档源位于 docs 目录。实时协作分享链接即可实时共同编辑。无服务器、无账号——对等端通过 WebRTC 直接连接点击右上方面板中的分享按钮分享生成的链接app.openpencil.dev/share/room-id协作者实时看到你的光标、选区与编辑点击某个协作者的头像即可跟随其视口协作的技术底座是 TrysteroWebRTC P2P 信令 YjsCRDT 数据同步相关实现可参考 src/app/collabroom、session、awareness、yjs-sync 等模块。为什么选择 OpenPencilFigma 是一个封闭平台主动对抗程序化访问其 MCP 服务器只读社区项目 figma-use 曾通过 CDP 实现完整的读写自动化但 Figma 126 版本移除了 CDP 远程调试端口使依赖它的工作流一夜失效。设计文件是专有二进制格式只有其自家软件能完整读取——这意味着你的工作流可能在某次点版本发布时被破坏。OpenPencil 的答案恰好相反MIT 开源、原生读取.fig文件、每个操作都可脚本化、数据从不离开你的机器。产品方向与当前 Figma 兼容性差距可参考 docs/development/roadmap.md。开发者指南本地开发环境bun install bun run dev:portless # Web 编辑器https://open-pencil.localhost bun run dev # 直接 Vite 服务http://localhost:1420 bun run tauri dev # 桌面应用需要 Rust首次运行 Portless 会创建并信任本地 HTTPS 证书。链接的 Git worktree 会自动获得分支前缀 URL如https://fix-ui.open-pencil.localhost使并发开发服务器不会争抢 1420 端口其开发 MCP 桥接通过对应的兄弟 URL如https://fix-ui.mcp.open-pencil.localhost暴露并配有隔离的 TCP 端口与运行时 socket 文件。若本地路由或证书信任失败运行bunx portless doctor排查。也可以在任何兼容 Dev Container 的工具中打开仓库容器固定 Bun 版本、安装 workspace 依赖并转发 1420 端口的直接 Web 编辑器容器就绪后执行bun run dev即可。注意 Dev Container 支持 Web 编辑器、packages、CLI 与自动化检查原生 Tauri 开发仍需宿主环境桌面窗口与平台 WebView 依赖不在容器内提供。质量门禁命令说明bun run check全量门禁lint、typecheck、package、docs 与架构检查bun run test:unit:quick并行单元测试跳过重型 fixtures约 15 sbun run test:unit全部单元测试含重型 fixturesbun run testE2E 视觉回归bun run format代码格式化项目结构packages/ scene-graph/ open-pencil/scene-graph — 节点、图元、命中测试、复制/吸附/撤销 pen/ open-pencil/pen — Pencil 文档格式辅助 kiwi/ open-pencil/kiwi — Kiwi 运行时与底层 .fig 容器解析 fig/ open-pencil/fig — .fig 归档、SceneGraph 转换、实例、元数据 core/ open-pencil/core — 编辑器引擎、渲染器、布局、工具、RPC、文档 I/O dom-css/ open-pencil/dom-css — HTML/CSS/Tailwind 转可编辑设计文档 vue/ open-pencil/vue — headless Vue SDK cli/ open-pencil/cli — headless CLI mcp/ open-pencil/mcp — MCP 服务器stdio HTTP harness/ open-pencil/harness — 编码代理 Harness 会话配套 CLI docs/ 文档站点 src/ Vue 应用编辑器外壳、AI、协作、文档 I/O desktop/ Tauri v2 桌面应用Rust 配置 skills/ Agent skillnpx skills add open-pencil/open-pencil tools/ 仓库工具CI、发布、lint、测试基础设施 tests/ E2E、视觉与引擎测试技术栈层次技术渲染SkiaCanvasKit WASM布局Yoga WASM通过 fork 支持 flex gridUIVue 3、Reka UI、Tailwind CSS 4文件格式Kiwi binary Zstd ZIP协作TrysteroWebRTC P2P YjsCRDT桌面Tauri v2AI/MCPVercel AI SDK多提供商 BYOK、MCP SDK、Hono桌面构建需要 Rust 工具链与平台前置依赖参照 Tauri v2 官方 prerequisites 指南bun run tauri build桌面端配置与源码位于 desktop 目录tauri.conf.json、Rust 源码main.rs/window.rs/menu.rs等Linux 打包清单见 desktop/linux/main.desktop。许可证OpenPencil 基于 MIT License 开源Copyright (c) 2026 Danila Poyarkov and OpenPencil contributors。仓库还提供 CONTRIBUTING.md、SECURITY.md 与 CHANGELOG.md 供贡献者与使用者查阅。赞分享前端桌面应用AI 应用MCP 服务【免费下载链接】open-pencilAI-native design editor. Open-source Figma alternative.项目地址https://gitcode.com/gh_mirrors/op/open-pencil点击查看免费下载相关推荐终极指南3分钟掌握Linux极速文件搜索神器FSearch终极指南3分钟掌握Linux极速文件搜索神器FSearch 你是否曾在Linux系统中为查找一个文件而花费数分钟甚至更长时间想象一下输入关键词的瞬间搜索前端桌面应用AI 应用MCP 服务OpenPencil 可编程自动化指南AI-Chat、CLI、JSX 与 MCP 的统一引擎OpenPencil 可编程自动化指南AI Chat、CLI、JSX 与 MCP 的统一引擎 OpenPencil 把设计文件当作结构化数据处理编辑器中每一前端桌面应用AI 应用MCP 服务OpenPencil CLI 脚本编程用 openpencil eval 执行 Figma 兼容的 JavaScript 自动化设计OpenPencil CLI 脚本编程用 openpencil eval 执行 Figma 兼容的 JavaScript 自动化设计 openpencil e前端桌面应用AI 应用MCP 服务上一篇three.quarks渐进式加载优化粒子系统资源加载的终极指南下一篇AndroidChromium下载管理机制详解从请求到完成的完整流程创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考