open-pencil-design-editor

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

OpenPencil Design Editor

OpenPencil 设计编辑器

Skill by ara.so — Daily 2026 Skills collection.

OpenPencil is an open-source, AI-native design editor that reads and writes native Figma (

.fig

) files, provides a headless CLI, an MCP server for AI agents, and a Vue SDK for building custom editors. It is MIT-licensed and runs in the browser, as a desktop app (Tauri/macOS/Windows/Linux), or fully headlessly.

由ara.so提供的Skill — 2026每日技能合集。

OpenPencil是一款原生支持AI的开源设计编辑器，可读写原生Figma（

.fig

）文件，提供无界面CLI、供AI Agent使用的MCP服务器，以及用于构建自定义编辑器的Vue SDK。它采用MIT许可证，可在浏览器中运行，也可作为桌面应用（Tauri/macOS/Windows/Linux）运行，或完全以无界面模式运行。

Installation

安装

Web app (no install)

网页应用（无需安装）

Visit app.openpencil.dev/demo.

访问app.openpencil.dev/demo。

Desktop (macOS)

桌面端（macOS）

brew install open-pencil/tap/open-pencil

Or download from releases.

brew install open-pencil/tap/open-pencil

或从发布页面下载。

CLI

bun add -g @open-pencil/cli

bun add -g @open-pencil/cli

MCP server

MCP服务器

bun add -g @open-pencil/mcp

bun add -g @open-pencil/mcp

Local development

本地开发

git clone https://github.com/open-pencil/open-pencil
cd open-pencil
bun install
bun run dev          # Web app at localhost:1420
bun run tauri dev    # Desktop (requires Rust)

git clone https://github.com/open-pencil/open-pencil
cd open-pencil
bun install
bun run dev          # 网页应用运行在localhost:1420
bun run tauri dev    # 桌面应用（需要Rust环境）

CLI Reference

CLI 参考

The

open-pencil

CLI operates on

.fig

files headlessly. When the desktop app is running, omit the file argument to connect to the live canvas via RPC.

open-pencil

CLI可无界面操作.fig文件。当桌面应用运行时，省略文件参数即可通过RPC连接到实时画布。

Inspect file structure

检查文件结构

undefined

undefined

Print the full node tree

打印完整节点树

open-pencil tree design.fig

Find nodes by type

按类型查找节点

open-pencil find design.fig --type TEXT open-pencil find design.fig --type FRAME

Get a specific node by ID

通过ID获取特定节点

open-pencil node design.fig --id 1:23

File metadata

文件元数据

open-pencil info design.fig

undefined

open-pencil info design.fig

undefined

XPath queries

XPath 查询

undefined

undefined

All frames

所有框架

open-pencil query design.fig "//FRAME"

Frames narrower than 300px

宽度小于300px的框架

open-pencil query design.fig "//FRAME[@width < 300]"

Text nodes whose name contains "Button"

名称包含"Button"的文本节点

open-pencil query design.fig "//TEXT[contains(@name, 'Button')]"

Nodes with rounded corners

带圆角的节点

open-pencil query design.fig "//*[@cornerRadius > 0]"

Text inside sections

章节内的文本

open-pencil query design.fig "//SECTION//TEXT"

undefined

open-pencil query design.fig "//SECTION//TEXT"

undefined

Export

导出

undefined

undefined

PNG (default)

PNG（默认格式）

open-pencil export design.fig

JPG at 2x scale, quality 90

2倍缩放的JPG，质量90

open-pencil export design.fig -f jpg -s 2 -q 90

SVG

open-pencil export design.fig -f svg

WEBP

open-pencil export design.fig -f webp

JSX with Tailwind v4 utility classes

带Tailwind v4工具类的JSX

open-pencil export design.fig -f jsx --style tailwind


Example Tailwind output:
```html
<div className="flex flex-col gap-4 p-6 bg-white rounded-xl">
  <p className="text-2xl font-bold text-[#1D1B20]">Card Title</p>
  <p className="text-sm text-[#49454F]">Description text</p>
</div>

open-pencil export design.fig -f jsx --style tailwind


Tailwind输出示例：
```html
<div className="flex flex-col gap-4 p-6 bg-white rounded-xl">
  <p className="text-2xl font-bold text-[#1D1B20]">Card Title</p>
  <p className="text-sm text-[#49454F]">Description text</p>
</div>

Design token analysis

设计令牌分析

open-pencil analyze colors design.fig
open-pencil analyze typography design.fig
open-pencil analyze spacing design.fig
open-pencil analyze clusters design.fig   # Repeated structures / component candidates

open-pencil analyze colors design.fig
open-pencil analyze typography design.fig
open-pencil analyze spacing design.fig
open-pencil analyze clusters design.fig   # 重复结构/组件候选

Scripting with Figma Plugin API (

eval

)

使用Figma插件API脚本化（

eval

）

undefined

undefined

Read: count children on the current page

读取：统计当前页面的子节点数量

open-pencil eval design.fig -c "figma.currentPage.children.length"

Read: get all text node contents

读取：获取所有文本节点内容

open-pencil eval design.fig -c "figma.currentPage.findAll(n => n.type === 'TEXT').map(n => n.characters)"

Write: set opacity of all selected nodes (-w writes back to file)

写入：设置所有选中节点的透明度（-w 表示写回文件）

open-pencil eval design.fig -c "figma.currentPage.selection.forEach(n => n.opacity = 0.5)" -w

Write: rename all frames on the page

写入：重命名页面上的所有框架

open-pencil eval design.fig -c "figma.currentPage.findAll(n => n.type === 'FRAME').forEach((f, i) => f.name = 'Frame ' + i)" -w

Connect to the live running desktop app (no file arg)

连接到运行中的桌面应用（无需文件参数）

open-pencil eval -c "figma.currentPage.name" open-pencil tree open-pencil export -f png


All commands support `--json` for machine-readable output:
```sh
open-pencil find design.fig --type TEXT --json
open-pencil analyze colors design.fig --json

open-pencil eval -c "figma.currentPage.name" open-pencil tree open-pencil export -f png


所有命令均支持`--json`参数以输出机器可读格式：
```sh
open-pencil find design.fig --type TEXT --json
open-pencil analyze colors design.fig --json

MCP Server

MCP 服务器

The MCP server exposes 90 tools (87 core + 3 file management) for AI agents to read and write

.fig

files.

MCP服务器暴露90个工具（87个核心工具+3个文件管理工具），供AI Agent读写.fig文件。

Stdio (Claude Code, Cursor, Windsurf)

Stdio（Claude Code、Cursor、Windsurf）

bun add -g @open-pencil/mcp

Add to your MCP client config (e.g.

~/.claude/mcp.json

or Cursor settings):

json

{
  "mcpServers": {
    "open-pencil": {
      "command": "openpencil-mcp"
    }
  }
}

bun add -g @open-pencil/mcp

添加到你的MCP客户端配置文件中（例如

~/.claude/mcp.json

或Cursor设置）：

json

{
  "mcpServers": {
    "open-pencil": {
      "command": "openpencil-mcp"
    }
  }
}

HTTP server (scripts, CI)

HTTP服务器（脚本、CI场景）

openpencil-mcp-http

openpencil-mcp-http

Listens at http://localhost:3100/mcp

监听地址：http://localhost:3100/mcp

undefined

undefined

Claude Code desktop integration

Claude Code 桌面集成

Install the ACP adapter:

npm i -g @zed-industries/claude-agent-acp

Add MCP permission to

~/.claude/settings.json

json

{
  "permissions": {
    "allow": ["mcp__open-pencil"]
  }
}

Open the desktop app →
```
Ctrl+J
```
→ select Claude Code from the provider dropdown.

安装ACP适配器：

npm i -g @zed-industries/claude-agent-acp

在

~/.claude/settings.json

中添加MCP权限：

json

{
  "permissions": {
    "allow": ["mcp__open-pencil"]
  }
}

打开桌面应用 →
```
Ctrl+J
```
→ 从提供商下拉菜单中选择Claude Code。

Agent skill (quick setup)

Agent Skill（快速设置）

npx skills add open-pencil/skills@open-pencil

npx skills add open-pencil/skills@open-pencil

AI Chat (Built-in)

AI 聊天（内置）

Open with
```
⌘J
```
(macOS) or
```
Ctrl+J
```
(desktop/web).
87 tools: create shapes, set fills/strokes, manage auto-layout, work with components and variables, boolean operations, token analysis, asset export.
Bring your own API key — no backend or account required.

使用
```
⌘J
```
（macOS）或
```
Ctrl+J
```
（桌面/网页）打开。
87个工具：创建形状、设置填充/描边、管理自动布局、处理组件和变量、布尔运算、令牌分析、资源导出。
使用自有API密钥——无需后端或账户。

Supported providers

支持的提供商

Configure via the provider dropdown in the chat panel:

Provider	Env var
Anthropic	`ANTHROPIC_API_KEY`
OpenAI	`OPENAI_API_KEY`
Google AI	`GOOGLE_AI_API_KEY`
OpenRouter	`OPENROUTER_API_KEY`
Any compatible endpoint	Custom base URL

通过聊天面板中的提供商下拉菜单配置：

提供商	环境变量
Anthropic	`ANTHROPIC_API_KEY`
OpenAI	`OPENAI_API_KEY`
Google AI	`GOOGLE_AI_API_KEY`
OpenRouter	`OPENROUTER_API_KEY`
任何兼容端点	自定义基础URL

Real-time Collaboration

实时协作

No server, no account. Peer-to-peer via WebRTC.

Click the Share button (top-right).
Share the generated URL:
```
app.openpencil.dev/share/<room-id>
```
.
Peers see live cursors, selections, and edits.
Click a peer's avatar to follow their viewport.

无需服务器，无需账户。通过WebRTC实现点对点协作。

点击右上角的分享按钮。
分享生成的URL：
```
app.openpencil.dev/share/<room-id>
```
。
协作方可以看到实时光标、选区和编辑操作。
点击协作方的头像可跟随其视口。

Project Structure

项目结构

packages/
  core/     @open-pencil/core  — engine: scene graph, renderer, layout, codec
  cli/      @open-pencil/cli   — headless CLI
  mcp/      @open-pencil/mcp   — MCP server (stdio + HTTP)
  docs/     Documentation site
src/        Vue 3 app — components, composables, stores
desktop/    Tauri v2 (Rust + config)
tests/      E2E (188 tests) + unit (764 tests)

packages/
  core/     @open-pencil/core  — 引擎：场景图、渲染器、布局、编解码器
  cli/      @open-pencil/cli   — 无界面CLI
  mcp/      @open-pencil/mcp   — MCP服务器（stdio + HTTP）
  docs/     文档站点
src/        Vue 3应用 — 组件、组合式函数、状态管理
desktop/    Tauri v2（Rust + 配置）
tests/      E2E测试（188个测试用例）+ 单元测试（764个测试用例）

Tech stack

技术栈

Layer	Technology
Rendering	Skia (CanvasKit WASM)
Layout	Yoga WASM (flex + CSS Grid)
UI	Vue 3, Reka UI, Tailwind CSS 4
File format	Kiwi binary + Zstd + ZIP
Collaboration	Trystero (WebRTC P2P) + Yjs (CRDT)
Desktop	Tauri v2
AI/MCP	Anthropic, OpenAI, Google AI, OpenRouter; MCP SDK; Hono

层级	技术
渲染	Skia（CanvasKit WASM）
布局	Yoga WASM（flex + CSS Grid）
UI	Vue 3、Reka UI、Tailwind CSS 4
文件格式	Kiwi二进制 + Zstd + ZIP
协作	Trystero（WebRTC P2P） + Yjs（CRDT）
桌面端	Tauri v2
AI/MCP	Anthropic、OpenAI、Google AI、OpenRouter；MCP SDK；Hono

Development Commands

开发命令

bun run dev        # Start web dev server (localhost:1420)
bun run tauri dev  # Start desktop app (requires Rust)
bun run check      # Lint + typecheck
bun run test       # E2E visual regression tests
bun run test:unit  # Unit tests
bun run format     # Code formatting
bun run tauri build  # Production desktop build

Desktop prerequisites: Rust + Tauri v2 platform deps.

bun run dev        # 启动网页开发服务器（localhost:1420）
bun run tauri dev  # 启动桌面应用（需要Rust环境）
bun run check      # 代码检查+类型检查
bun run test       # E2E视觉回归测试
bun run test:unit  # 单元测试
bun run format     # 代码格式化
bun run tauri build  # 生产版桌面应用构建

桌面应用前置要求：Rust + Tauri v2平台依赖

Common Patterns

常用模式

Batch-rename all text nodes in a .fig file

批量重命名.fig文件中的所有文本节点

open-pencil eval design.fig \
  -c "figma.currentPage.findAll(n => n.type === 'TEXT').forEach((t, i) => t.name = 'Text_' + i)" \
  -w

open-pencil eval design.fig \\
  -c "figma.currentPage.findAll(n => n.type === 'TEXT').forEach((t, i) => t.name = 'Text_' + i)" \\
  -w

Extract all colors as JSON

提取所有颜色为JSON格式

open-pencil analyze colors design.fig --json > colors.json

open-pencil analyze colors design.fig --json > colors.json

Export every frame as PNG in CI

在CI中导出所有框架为PNG

for id in $(open-pencil find design.fig --type FRAME --json | jq -r '.[].id'); do
  open-pencil export design.fig --id "$id" -f png -o "frames/$id.png"
done

for id in $(open-pencil find design.fig --type FRAME --json | jq -r '.[].id'); do
  open-pencil export design.fig --id "$id" -f png -o "frames/$id.png"
done

Query nodes matching a naming convention

查询符合命名规范的节点

undefined

undefined

Find all nodes named with a "btn-" prefix

查找所有以"btn-"前缀命名的节点

open-pencil query design.fig "//*[starts-with(@name, 'btn-')]"

undefined

open-pencil query design.fig "//*[starts-with(@name, 'btn-')]"

undefined

Connect an MCP client to a running desktop app

将MCP客户端连接到运行中的桌面应用

When the desktop app is open, the MCP stdio server can connect to the live canvas. No file path needed — all reads and writes go to the open document.

json

{
  "mcpServers": {
    "open-pencil": {
      "command": "openpencil-mcp"
    }
  }
}

当桌面应用打开时，MCP stdio服务器可连接到实时画布。无需文件路径——所有读写操作都针对打开的文档。

json

{
  "mcpServers": {
    "open-pencil": {
      "command": "openpencil-mcp"
    }
  }
}

Export a selection as Tailwind JSX programmatically

以编程方式导出选区为Tailwind JSX

open-pencil export design.fig --id 1:23 -f jsx --style tailwind

open-pencil export design.fig --id 1:23 -f jsx --style tailwind

Troubleshooting

故障排除

openpencil-mcp
not found after install

Ensure

bun

's global bin dir is on your

PATH

export PATH="$HOME/.bun/bin:$PATH"

Or use
```
npx openpencil-mcp
```
as the MCP command value.

Desktop app CLI connection fails

The desktop app must be running before issuing commands without a file argument.
Check that no firewall rule blocks the local RPC socket.

Tauri dev build errors

Install platform prerequisites: v2.tauri.app/start/prerequisites
Ensure Rust is up to date:
```
rustup update
```

.fig
file won't open

Confirm the file was exported from Figma (not a
```
.fig
```
backup or plugin artifact).
Run
```
open-pencil info design.fig
```
to check if the codec can parse the header.

AI chat returns no response

Verify your API key is set correctly in the provider settings panel.
For OpenRouter, ensure your key has credits and the selected model is available.

Collaboration peers not connecting

Both peers must use the exact same share URL (room ID is case-sensitive).
WebRTC requires both peers to allow the browser/app through any firewall.

安装后找不到
openpencil-mcp

确保

bun

的全局bin目录在你的

PATH

中：

export PATH="$HOME/.bun/bin:$PATH"

或使用
```
npx openpencil-mcp
```
作为MCP命令值。

桌面应用CLI连接失败

在执行无文件参数的命令前，必须先运行桌面应用。
检查是否有防火墙规则阻止了本地RPC套接字。

Tauri开发构建错误

安装平台前置依赖：v2.tauri.app/start/prerequisites
确保Rust是最新版本：
```
rustup update
```

.fig文件无法打开

确认文件是从Figma导出的（不是.fig备份或插件产物）。
运行
```
open-pencil info design.fig
```
检查编解码器能否解析文件头。

AI聊天无响应

验证你在提供商设置面板中正确配置了API密钥。
对于OpenRouter，确保你的密钥有余额且所选模型可用。

协作方无法连接

双方必须使用完全相同的分享URL（房间ID区分大小写）。
WebRTC要求双方允许浏览器/应用通过防火墙。

链接

Web app: app.openpencil.dev/demo
Documentation: openpencil.dev
MCP tools reference: openpencil.dev/reference/mcp-tools
Releases: github.com/open-pencil/open-pencil/releases
License: MIT

网页应用：app.openpencil.dev/demo
文档：openpencil.dev
MCP工具参考：openpencil.dev/reference/mcp-tools
发布页面：github.com/open-pencil/open-pencil/releases
许可证：MIT ",

open-pencil-design-editor

Original

Translation

OpenPencil Design Editor

OpenPencil 设计编辑器

Installation

安装

Web app (no install)

网页应用（无需安装）

Desktop (macOS)

桌面端（macOS）

CLI

CLI

MCP server

MCP服务器

Local development

本地开发

CLI Reference

CLI 参考

Inspect file structure

检查文件结构

Print the full node tree

打印完整节点树

Find nodes by type

按类型查找节点

Get a specific node by ID

通过ID获取特定节点

File metadata

文件元数据

XPath queries

XPath 查询

All frames

所有框架

Frames narrower than 300px

宽度小于300px的框架

Text nodes whose name contains "Button"

名称包含"Button"的文本节点

Nodes with rounded corners

带圆角的节点

Text inside sections

章节内的文本

Export

导出

PNG (default)

PNG（默认格式）

JPG at 2x scale, quality 90

2倍缩放的JPG，质量90

SVG

SVG

WEBP

WEBP

JSX with Tailwind v4 utility classes

带Tailwind v4工具类的JSX

Design token analysis

设计令牌分析

Scripting with Figma Plugin API (eval)

使用Figma插件API脚本化（eval）

Read: count children on the current page

读取：统计当前页面的子节点数量

Read: get all text node contents

读取：获取所有文本节点内容

Write: set opacity of all selected nodes (-w writes back to file)

写入：设置所有选中节点的透明度（-w 表示写回文件）

Write: rename all frames on the page

写入：重命名页面上的所有框架

Connect to the live running desktop app (no file arg)

连接到运行中的桌面应用（无需文件参数）

MCP Server

MCP 服务器

Stdio (Claude Code, Cursor, Windsurf)

Stdio（Claude Code、Cursor、Windsurf）

HTTP server (scripts, CI)

HTTP服务器（脚本、CI场景）

Listens at http://localhost:3100/mcp

监听地址：http://localhost:3100/mcp

Claude Code desktop integration

Claude Code 桌面集成

Agent skill (quick setup)

Agent Skill（快速设置）

AI Chat (Built-in)

Scripting with Figma Plugin API (
`eval`
)

使用Figma插件API脚本化（
`eval`
）