企业官网建设流程全解析

• 前端
• 桌面应用
• AI 应用
• MCP 服务

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三个选项卡，集中管理以下属性：

这些能力在界面上由 src/components/properties 目录下数十个属性编辑组件承载，底层属性模型则来自 packages/scene-graph。

渲染引擎：Skia（CanvasKit WASM）

OpenPencil 使用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 tailwind

AI 对话助手

按⌘J即可打开 AI 助手。它内置90+ 个工具，可以：

• 创建形状；
• 设置样式；
• 管理布局；
• 操作组件与变量；
• 执行布尔运算；
• 分析设计令牌；
• 导出资源。

可接入的模型服务商包括Anthropic、OpenAI、Google AI、OpenRouter以及任何兼容端点。助手的工作方式有两个显著设计：

1. 工具调用时间线：每次工具调用以可折叠的时间线条目展示，用户可逐条审查 AI 做了什么；
2. 可视化验证：助手会渲染自己的修改结果，并与你的原始请求进行比对，确认修改是否符合预期；
3. 完全可撤销：AI 产生的所有修改都支持撤销，与手工操作共享同一套撤销机制。

完整的接入配置与各提供商细节可参考 AI Chat 文档；AI 会话与工具执行的相关代码集中在 src/app/ai 目录。

MCP 服务器：让 AI 客户端读写.fig文件

通过 MCP（Model 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：终端里检查、导出、分析.fig

CLI 让你在不打开图形界面的情况下操作.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/cli

CLI 的命令实现位于 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 openpencil

Google 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 服务