OpenPencil 功能特性全览：基于 Kiwi 编解码与 Skia 渲染的 AI 原生设计编辑器

前端桌面应用AI 应用MCP 服务【免费下载链接】open-pencilAI-native design editor. Open-source Figma alternative.项目地址https://gitcode.com/gh_mirrors/op/open-pencil点击查看免费下载OpenPencil 是一个开源GPL-3.0的 AI 原生设计编辑器目标是对齐 Figma 的核心能力原生读写.fig文件、提供矢量绘制、自动布局、组件与变量系统并在其上叠加 AI 对话助手、MCP 服务器与命令行工具。本文以官方功能文档 packages/docs/fr/overview/features.md 为主线逐项解析编辑器的功能矩阵并配合仓库源码说明其底层实现。读完后你将掌握 OpenPencil 的完整能力清单、关键快捷键与命令行用法以及它与 Figma 生态互通的原理。Figma 原生.fig文件兼容OpenPencil 可以直接打开并保存原生 Figma 文件.fig。其导入/导出管线使用了与 Figma 相同的Kiwi 二进制编解码器文档明确记载为 194 个 schema 定义、每个节点约 390 个字段。这意味着从 Figma 迁移到 OpenPencil 时不需要任何格式转换步骤文件在两侧往返都不会丢失结构信息。在代码层面这一能力由 packages/kiwi 包实现核心模块包括codec.ts —— 二进制编解码实现schema.ts —— 通过parseSchema与validateSchema来自schema-runtime加载并校验 schema 定义container.ts 与 parse.ts ——.fig容器的解包与节点解析variable-bindings.ts —— 变量绑定数据的编解码。日常保存操作使用标准快捷键保存⌘S另存为⇧⌘S与 Figma 的复制粘贴互通是另一个关键特性在 Figma 中选中对象后⌘C切换到 OpenPencil 中⌘V即可粘贴反之亦然。双向传输中会保留填充fills、描边strokes、自动布局、文本、效果effects、圆角半径与矢量网络vector networks。从代码结构看剪贴板格式的读写由 packages/core/src/clipboard 与packages/fig/src/clipboard相关模块承担。绘制与编辑能力形状与钢笔工具基础形状矩形R、椭圆O、直线L、多边形与星形钢笔工具支持矢量网络而非简单路径、带切线手柄的贝塞尔曲线适合制作图标与复杂轮廓。文本与富文本文本直接在画布上编辑支持 IME中文、日文等输入法输入双击对象即进入编辑模式富文本支持按字符范围设置粗体、斜体、下划线、删除线对应⌘B、⌘I、⌘U即同一文本对象内可混合多种字体样式。自动布局Yoga WASM 驱动的 Flexbox 与 CSS Grid自动布局Auto-layout由Yoga通过 WASM 运行驱动同时支持Flexbox 与 CSS Grid两套布局模型可配置方向direction间距gap内边距padding分布justify对齐align子项尺寸child sizing网格轨道grid tracks使用⇧A可快速切换自动布局开关。源码层面布局计算集中在 packages/core/src/layout 目录yoga-helpers.ts创建并复用 Yoga 节点Yoga.Config.create()、Yoga.Node.create(yogaConfig)apply.ts与grid.ts分别处理 Flexbox 与网格的约束求解与结果回写从实现细节看这是以 Yoga 计算布局、回填节点几何的标准管线。组件系统创建组件⌥⌘K创建组件集component set⇧⌘K实例instance支持覆盖override主组件修改后实例实时同步变量Design Tokens设计令牌按集合collections与模式modes组织例如 Light / Dark 双模式支持 Color、Float、String、Boolean 四种类型以及变量绑定。变量的读写与绑定逻辑分布在 packages/scene-graph/src/variables.ts 与 packages/kiwi/src/fig/variable-bindings.ts后者确保变量绑定在.fig文件的序列化/反序列化过程中不丢失。分区Sections分区是组织性容器自动收纳与其重叠的子对象并显示标题胶囊title pill适合把设计稿划分成逻辑区块。属性面板Design / Code / AI 三选项卡属性面板会根据当前选中对象动态切换Design设计、Code代码、AI三个选项卡集中管理以下属性分组可配置项外观Appearance不透明度、圆角半径统一或按角分别设置、可见性填充Fill纯色、渐变线性/径向/角度/菱形、图片填充描边Stroke颜色、粗细、对齐方式内侧/居中/外侧、按边分别设粗细、端点、连接方式、虚线效果Effects投影、内阴影、图层模糊、背景模糊、前景模糊排版Typography字体选择器支持搜索与虚拟滚动、字重、字号、对齐、样式按钮布局Layout启用自动布局时的相关控制项导出Export缩放比例、格式PNG/JPG/WEBP/SVG、实时预览这些能力在界面上由 src/components/properties 目录下数十个属性编辑组件承载底层属性模型则来自 packages/scene-graph。渲染引擎SkiaCanvasKit WASMOpenPencil 使用Skia 图形引擎通过 CanvasKit WASM 运行与 Figma 的渲染引擎相同。其渲染特性包括线性、径向、角度、菱形渐变支持多种缩放模式的图片填充按节点缓存的滤镜效果避免重复计算弧线数据部分椭圆、圆环/甜甜圈形状视口裁剪viewport culling与绘制对象复用paint reuse感知旋转的对齐吸附参考线画布标尺与选区范围徽标跟随真实几何形状的高亮悬停效果。代码入口在 packages/core/src/canvaskit.ts通过CanvasKitInit加载canvaskit-wasm并按需初始化实例绘制逻辑分布在 packages/core/src/canvas 目录下的 70 余个模块中。Web 端打包时vite/canvaskit-assets.ts 负责将 WASM 资源正确集成到构建产物。撤销与重做创建、删除、移动、缩放、属性修改、层级调整reparenting、布局修改、变量操作等所有操作都可撤销。实现上采用反向命令模式inverse-command pattern即每条变更命令都携带其逆操作。快捷键撤销⌘Z重做⇧⌘Z页面与多文档多页面可创建、删除、重命名页面双击即可内联重命名每个页面拥有独立的视口状态位置与缩放多文档标签页可在标签页中同时打开多个文档⌘T新建标签、⌘W关闭、⌘O打开文件。导出能力图片导出PNG、JPG、WEBP缩放比例可在 0.5×4× 之间配置可从面板、右键菜单或快捷键⇧⌘E触发SVG 导出支持形状、带样式区间style runs的文本、渐变、效果与混合模式Tailwind JSX 导出输出带 Tailwind v4 工具类utility classes的 HTML可直接用于 React 或 Vue 组件复制为Copy as从右键菜单可将选中对象复制为文本、SVG、PNG⇧⌘C或 JSX。命令行导出示例openpencil export design.fig -f jsx --style tailwindAI 对话助手按⌘J即可打开 AI 助手。它内置90 个工具可以创建形状设置样式管理布局操作组件与变量执行布尔运算分析设计令牌导出资源。可接入的模型服务商包括Anthropic、OpenAI、Google AI、OpenRouter以及任何兼容端点。助手的工作方式有两个显著设计工具调用时间线每次工具调用以可折叠的时间线条目展示用户可逐条审查 AI 做了什么可视化验证助手会渲染自己的修改结果并与你的原始请求进行比对确认修改是否符合预期完全可撤销AI 产生的所有修改都支持撤销与手工操作共享同一套撤销机制。完整的接入配置与各提供商细节可参考 AI Chat 文档AI 会话与工具执行的相关代码集中在 src/app/ai 目录。MCP 服务器让 AI 客户端读写.fig文件通过 MCPModel Context Protocol服务器Claude Code、Cursor、Windsurf等任意 MCP 客户端都可以以无头headless方式读写.fig文件同样提供 90 个工具支持stdio 与 HTTP两种传输方式。安装npm install -g open-pencil/mcp在 Claude Code / Cursor 等客户端的 MCP 配置中加入{ mcpServers: { open-pencil: { command: openpencil-mcp } } }服务器实现位于 packages/mcp其中src/server.ts负责工具注册与请求分发src/stdio.ts提供标准输入输出传输src/http-options.ts处理 HTTP 传输的选项完整工具列表见 MCP Tools 参考文档。CLI终端里检查、导出、分析.figCLI 让你在不打开图形界面的情况下操作.fig文件openpencil tree design.fig # 输出文档节点树 openpencil find design.fig --type TEXT # 按类型搜索节点 openpencil export design.fig -f png # 渲染导出图片 openpencil analyze colors design.fig # 颜色审计 openpencil analyze clusters design.fig # 查找重复结构 openpencil eval design.fig -c ... # 执行 Figma Plugin API 代码实时模式当桌面应用正在运行时可省略文件参数通过 RPC 直接控制当前编辑器openpencil tree # 读取当前文档 openpencil export -f png # 对画布截图所有命令均支持--json输出便于脚本化与管道处理。安装方式npm install -g open-pencil/cli # 或 bun add -g open-pencil/cliCLI 的命令实现位于 packages/cli/src/commands包括tree.ts、find.ts、export.ts、eval.ts、analyze/等命令的完整参数说明可参考 CLI 参考文档。实时协作WebRTC P2P无需服务器协作采用WebRTC 点对点P2P架构不需要任何中央服务器——只需分享一个链接参与者即可共同编辑。协作功能包括实时光标带颜色箭头与名字胶囊在线状态头像presence avatars跟随模式Follow mode点击某个协作者即可跟随其视口通过 IndexedDB 本地持久化基于crypto.getRandomValues()生成的安全房间 ID。相关实现位于 src/app/collab 目录其中yjs-sync.ts负责基于 Yjs 的文档状态同步room.ts与session.ts管理房间与会话生命周期。桌面端与 Web 端桌面端基于Tauri v2安装包约7 MB支持 macOS已签名并公证、Windows、Linux提供原生菜单、离线运行与自动保存。桌面端 Rust 代码位于 desktop/src应用菜单由 scripts/generate-tauri-menu.ts 生成Web 端可作为PWA安装移动端有触控优化的界面。Homebrew 安装桌面版brew install --cask openpencilGoogle Fonts 后备加载当打开包含本地未安装字体的.fig文件时OpenPencil 会自动从 Google Fonts 下载该字体无需手动安装任何字体文件。系统内置字体如 Inter 与 NotoNaskhArabic可在 packages/core/assets 中看到字体加载与回退逻辑则在 packages/core/src/text 与 packages/core/src/fonts.rs 对应的浏览器侧实现 中处理。小结OpenPencil 的功能矩阵可以概括为三条主线格式兼容Kiwi 编解码实现.fig双向互通、与 Figma 剪贴板互操作、编辑能力矢量绘制、Yoga 自动布局、组件/变量系统、Skia 渲染与完整撤销体系、可编程性AI 助手、MCP 服务器、CLI 与 WebRTC 协作。无论你是从 Figma 迁移的设计师还是希望在 CI 流程中自动化处理.fig文件的开发者都可以在 packages/docs 的文档目录中找到对应的深入指南如 AI Chat、MCP Server、CLI 参考并基于仓库源码做二次开发。赞分享前端桌面应用AI 应用MCP 服务【免费下载链接】open-pencilAI-native design editor. Open-source Figma alternative.项目地址https://gitcode.com/gh_mirrors/op/open-pencil点击查看免费下载相关推荐OpenPencil 架构解析从 SceneGraph 到 CanvasKit 渲染的 AI 原生设计编辑器技术栈OpenPencil 架构解析从 SceneGraph 到 CanvasKit 渲染的 AI 原生设计编辑器技术栈 OpenPencil 是一款 AI 原生的前端桌面应用AI 应用MCP 服务OpenPencil 功能全景解析.fig 原生兼容、AI 驱动与实时协作的设计编辑器能力图谱OpenPencil 功能全景解析.fig 原生兼容、AI 驱动与实时协作的设计编辑器能力图谱 本篇技术指南基于 open pencil 仓库官方文档 do前端桌面应用AI 应用MCP 服务OpenPencil Vue SDK 入门指南从 createEditor 到画布渲染搭建可嵌入的 AI 原生设计编辑器OpenPencil Vue SDK 入门指南从 createEditor 到画布渲染搭建可嵌入的 AI 原生设计编辑器 本指南以 OpenPencil 官前端桌面应用AI 应用MCP 服务上一篇终极跨设备数据传输解决方案WindSend 完整使用指南下一篇SwiftUIKitView终极指南如何在SwiftUI中无缝集成UIKit视图创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考