OpenPencil – 开源设计编辑器，内置 AI

它是什么 – 一个本地运行的设计工具，可以打开原生 Figma (.fig) 和 Pencil (.pen) 文件，通过完整的 UI 进行编辑，并通过强大的 CLI 和 AI 驱动的“MCP”服务器自动化所有操作。它以小巧（约 15 MB）的桌面应用（Tauri v2）和 PWA 形式发布，并提供基于 Vue 的 SDK，用于在其他应用中嵌入编辑器。

核心功能

功能	运作方式
文件支持	读取/写入 `.fig`（Figma）和 `.pen`（Pencil）文件；可在应用之间复制粘贴节点。
AI 辅助设计	内置聊天面板，提供 100+ 个“工具”（创建形状、设置填充、执行自动布局、管理组件、导出资产等）。可连接任何 BYOK LLM 提供商（OpenAI、Anthropic、Google AI、OpenRouter、DeepSeek 等）– 无需后端，无需账户。
可编程 CLI	`openpencil` 让您检查节点树、执行 XPath 查询、进行 lint、分析颜色/排版、转换格式、导出为 PNG/JPG/SVG/PDF/JSX/Tailwind/Storybook，甚至可无头执行 Figma Plugin API 脚本。
MCP 服务器	通过 stdio 或 HTTP 公开相同的 100+ 个设计工具，让 AI 编码代理（Claude Code、Codex、Gemini、Cursor 等）可以编程地读取/修改/导出设计。
Vue SDK	无头组件和 composables 让您可以嵌入编辑器或创建自定义工作流程的编辑器。
实时协作	点对点 WebRTC + Yjs CRDT；分享链接、看到彼此的游标、跟随视口、开始语音通话 – 全部无需中央服务器。
自动布局与 CSS Grid	由 Yoga 编译为 WASM 的 Flexbox 和 grid，完整支持 gap、padding 和 alignment。
图像矢量化	通过 Recraft 或 fal.ai 将位图图层转换为可编辑的矢量。
设计转代码导出	将选区导出为 JSX/Tailwind、生成设计 token 文件，或生成 Storybook stories。
跨平台	适用于 macOS、Windows、Linux 的桌面版（通过 Tauri）；网页应用可在现代浏览器（Chrome 111+、Edge 111+、Firefox 128+、Safari 16.4+）中运行。

开始使用

# macOS 通过 Homebrew
brew install --cask openpencil

# 或全局安装 CLI
npm i -g @open-pencil/cli   # 或 bun add -g @open-pencil/cli

从 GitHub 下载最新的桌面版，或在 https://app.openpencil.dev/demo 运行网页演示。

典型工作流程

打开 Figma 文件 → 编辑 UI 或运行 openpencil tree design.fig 来探索节点层级。
要求 AI 创建组件 → 打开聊天（⌘J/Ctrl+J），描述 UI，让工具生成节点。
导出资产 → openpencil export design.fig -f tailwind-jsx 或 -f storybook 进行代码交接。
使用脚本自动化 → openpencil eval design.fig -c "figma.currentPage.selection.forEach(n => n.opacity=0.5)" -w。
协作 → 分享生成的 WebRTC 链接；团队成员可以看到实时编辑并进行语音聊天。
在其他地方集成 → 将 @open-pencil/sdk 导入 Vue 应用，并创建自定义编辑器界面。

谁可能使用它？

设计运营团队，需要可脚本化、本地优先的 Figma 封闭 API 替代方案。
开发人员，构建设计转代码管道（自动导出 JSX/Tailwind、生成 token 文件）。
AI 工具构建者，想要为 Claude Code、Cursor 或自定义 MCP 客户端等代理提供可编程的设计后端。
教育者和爱好者，寻找免费、开源且具有实时协作的设计编辑器。

社区与贡献

Discord：https://discord.gg/4wXc9fuZfm – 快速帮助和展示。
GitHub Discussions：问答、想法、公告。
贡献：bun install && bun run dev:portless 用于网页编辑器，bun run tauri dev 用于桌面应用（需要 Rust）。请参阅 CONTRIBUTING.md 以了解指南。

许可证

MIT – 免费供个人、教育或商业使用。

总结 – OpenPencil 提供一个完全开放、可脚本化的设计环境，具有一流的 AI 集成，让您无需依赖专有平台即可自动化、扩展和协作 UI/UX 工作。

open-pencil/open-pencil