open-pencil/open-pencil

解决的问题

OpenPencil 为 Figma 等封闭式设计平台提供了一个开源且可编程的替代方案。它通过允许用户原生读写 .fig 文件、通过 CLI 或 API 脚本化所有操作，并将设计数据保留在本地，解决了专有文件格式和受限程序访问的问题。

工作原理

这是一个基于 Vue 3 前端和 Skia 渲染引擎构建的设计编辑器。使用 Yoga WASM 实现 Flex 和 Grid 布局，通过 Yjs 与 WebRTC 实现无服务器、点对点的实时协作。项目包含一个无头 CLI 用于检查和修改文件，一个用于 AI 代理集成的 MCP 服务器，以及一个供开发者构建自定义编辑界面的 Vue SDK。

适用人群

• 设计师：希望使用支持 Figma 文件且数据本地化的开源编辑器的人。
• 开发者：需要程序化操作设计文件、检查布局或将设计导出为代码（JSX/Tailwind）的人。
• AI 工程师：需要使用 Model Context Protocol (MCP) 创建或修改 UI 设计的代理开发者。

主要亮点

• Figma 兼容性：原生支持打开和导出 .fig 文件。
• AI 驱动设计：内置聊天助手和 MCP 服务器，提供 100 多个工具供 AI 代理创建和修改节点。
• 可编程工具包：包含支持 XPath 查询的无头 CLI、Figma 插件 API 的 eval 模式，以及 Vue SDK。
• 设计转代码：可将选中内容导出为 JSX/Tailwind，也可将 HTML/CSS 导入为可编辑的设计图层。
• 无服务器协作：无需账户或中心服务器，通过 P2P WebRTC 实现实时协同编辑。