OpenPencil

全球首款开源的原生AI矢量设计工具。
_{并发代理团队 • 设计即代码 • 内置MCP服务器 • 多模型智能}

English · 简体中文 · 繁體中文 · 日本語 · 한국어 · Français · Español · Deutsch · Português · Русский · हिन्दी · Türkçe · ไทย · Tiếng Việt · Bahasa Indonesia

_{点击图片即可观看演示视频}

注： 还有一个同名的开源项目——OpenPencil，专注于支持Figma的实时协作式可视化设计。而本项目则聚焦于原生AI驱动的设计到代码工作流。

为什么选择OpenPencil

🎨 提示词 → 画布 用自然语言描述任何UI界面。它将实时出现在无限画布上，并伴随流畅的动画效果。只需选择元素并进行对话，即可轻松修改现有设计。	🤖 并发代理团队 编排器会将复杂的页面分解为多个空间子任务。多个AI代理可同时处理不同区域——例如头部、功能区、页脚等——所有操作均以流式传输方式并行进行，每个成员的画布状态都会实时显示。
🧠 多模型智能 自动适配各模型的能力。Claude接收完整的思考型提示；GPT-4o/Gemini则关闭思考模式；而小型模型（MiniMax、Qwen、Llama）则会收到简化版提示，以确保输出稳定可靠。	🔌 MCP服务器 一键集成至Claude Code、Codex、Gemini、OpenCode、Kiro或Copilot CLI中。你可以在终端直接进行设计——通过任意兼容MCP的代理读取、创建和修改.op文件。
🎨 样式库 内置基于标签的模糊匹配样式库。可将玻璃质感、粗野主义、复古风等视觉风格应用到AI生成的设计中。MCP工具还支持外部代理访问。	📦 设计即代码 .op文件采用JSON格式，易于阅读、兼容Git且可进行差异比较。设计变量会自动生成CSS自定义属性。支持导出为React + Tailwind或HTML + CSS代码。
🖥️ 跨平台运行 提供Web应用以及基于Electron的原生桌面版本，适用于macOS、Windows和Linux系统。自动从GitHub Releases获取更新。双击.op文件即可打开。	⌨️ CLI — op 通过终端控制设计工具。op design、op insert、op export等命令可批量执行设计DSL、节点操作及代码导出。支持从文件或标准输入管道传入数据。既可与桌面应用配合使用，也可作为Web服务器运行。
🎯 多平台代码导出 只需一个.op文件，即可导出为React + Tailwind、HTML + CSS、Vue、Svelte、Flutter、SwiftUI、Jetpack Compose、React Native等多种格式。设计变量会自动转换为CSS自定义属性。	🧩 可嵌入SDK pen-engine（无界面）+ pen-react（React UI SDK）——可将设计引擎嵌入到你的应用中。开箱即用的DesignProvider、DesignCanvas组件、钩子函数以及面板和工具栏组件。
🛡️ 设计系统套件 管理可复用的UI套件，支持样式切换和组件组合。可通过.pen文件导入或导出套件。内置注册表，并配备MCP工具供外部访问。

安装

macOS (Homebrew):

brew tap zseven-w/openpencil
brew install --cask openpencil

Windows (Scoop):

scoop bucket add openpencil https://github.com/zseven-w/scoop-openpencil
scoop install openpencil

Linux / Windows 直接下载： GitHub Releases — .exe（Windows）、.AppImage / .deb（Linux）

CLI (op)：

npm install -g @zseven-w/openpencil

快速开始（开发环境）

# 安装依赖
bun install

# 启动开发服务器，地址为 http://localhost:3000
bun --bun run dev

或者以桌面应用形式运行：

bun run electron:dev

前提条件： Bun >= 1.0 和 Node.js >= 18。可选：Zig >= 0.14，用于从源码构建agent-native（若未安装Zig，则会自动下载预编译二进制文件）。

Docker

提供了多种镜像变体，请根据需求选择：

镜像	大小	包含内容
openpencil:latest	~226 MB	仅Web应用
openpencil-claude:latest	—	+ Claude Code CLI
openpencil-codex:latest	—	+ Codex CLI
openpencil-opencode:latest	—	+ OpenCode CLI
openpencil-copilot:latest	—	+ GitHub Copilot CLI
openpencil-gemini:latest	—	+ Gemini CLI
openpencil-full:latest	~1 GB	包含所有CLI工具

仅运行Web应用：

docker run -d -p 3000:3000 ghcr.io/zseven-w/openpencil:latest

运行带AI CLI版本（如Claude Code）：

AI聊天功能依赖于Claude CLI的OAuth登录。建议使用Docker卷来持久化登录会话：

# 步骤 1 — 登录（仅需一次）
docker volume create openpencil-claude-auth
docker run -it --rm \
  -v openpencil-claude-auth:/root/.claude \
  ghcr.io/zseven-w/openpencil-claude:latest claude login

# 步骤 2 — 启动
docker run -d -p 3000:3000 \
  -v openpencil-claude-auth:/root/.claude \
  ghcr.io/zseven-w/openpencil-claude:latest

本地构建：

# 基础版（仅限网页）
docker build --target base -t openpencil .

# 带特定 CLI 的版本
docker build --target with-claude -t openpencil-claude .

# 完整版（所有 CLI）
docker build --target full -t openpencil-full .

原生 AI 设计

提示到 UI

• 文本转设计 — 描述页面内容，通过 SSE 流式动画实时在画布上生成
• 编排器 — 将复杂页面分解为空间子任务，以实现并行生成
• 代理团队 — 多个并发成员，具备委托工具、成员专属画布指示器及回退策略
• 设计修改 — 选择元素后，用自然语言描述更改内容
• 视觉输入 — 可附加截图或线框图，用于参考式设计
• 风格指南 — 通过基于标签的模糊匹配应用视觉风格（玻璃拟物、粗野主义、复古风等）
• 防重复机制 — 跨代多样性追踪，避免 AI 输出重复内容

多代理支持

代理	设置
内置（9+提供商）	从提供者预设中选择，并可切换地区 — Anthropic、OpenAI、Google、DeepSeek 等
Claude Code	无需配置 — 使用 Claude Agent SDK 和本地 OAuth
Codex CLI	在代理设置中连接（Cmd+,）
OpenCode	在代理设置中连接（Cmd+,）
GitHub Copilot	先执行 copilot login，再在代理设置中连接（Cmd+,）
Gemini CLI	在代理设置中连接（Cmd+,）

模型能力档案 — 根据模型层级自动调整提示、思考模式和超时时间。全功能模型（Claude）使用完整提示；标准级模型（GPT-4o、Gemini、DeepSeek）禁用思考模式；基础级模型（MiniMax、Qwen、Llama、Mistral）则采用简化的嵌套 JSON 提示，以确保最大可靠性。

国际化 — 界面全面本地化为 15 种语言：英语、简体中文、繁體中文、日语、韩语、法语、西班牙语、德语、葡萄牙语、俄语、印地语、土耳其语、泰语、越南语、印尼语。

MCP 服务器

• 内置 MCP 服务器（pen-mcp 包）— 一键安装至 Claude Code / Codex / Gemini / OpenCode / Kiro / Copilot CLI
• 自动检测 Node.js — 若未安装，则回退至 HTTP 传输并自动启动 MCP HTTP 服务器
• 可通过终端进行设计自动化：使用任何兼容 MCP 的代理读取、创建和修改 .op 文件
• 分层设计工作流 — design_skeleton → design_content → design_refine，适用于高保真度的多区块设计
• 分段式提示获取 — 仅加载所需的设计知识（架构、布局、角色、图标、规划等）
• 风格指南工具 — 使用 get_style_guide_tags 和 get_style_guide 通过 MCP 应用视觉风格
• 支持多页面 — 可通过 MCP 工具创建、重命名、排序和复制页面

代码生成

• React + Tailwind CSS、HTML + CSS、CSS 变量
• Vue、Svelte、Flutter、SwiftUI、Jetpack Compose、React Native

CLI — op

全局安装后，即可通过终端控制设计工具：

npm install -g @zseven-w/openpencil

op start                     # 启动桌面应用
op design @landing.txt       # 从文件批量设计
op insert '{"type":"RECT"}'  # 插入节点
op export react --out .      # 导出为 React + Tailwind
op import:figma design.fig   # 导入 Figma 文件
cat design.dsl | op design - # 从标准输入管道传入

支持三种输入方式：内联字符串、@filepath（从文件读取）或 -（从标准输入读取）。可与桌面应用或 Web 开发服务器配合使用。完整命令参考请参阅 CLI README。

LLM 技能 — 安装 OpenPencil Skill 插件，即可教会 AI 代理（Claude Code、Cursor、Codex、Gemini CLI 等）如何使用 op 进行设计。

功能特性

画布与绘图

• 无限画布，支持平移、缩放、智能对齐引导线及吸附功能
• 矩形、椭圆、直线、多边形、钢笔（贝塞尔曲线）、框架、文本工具
• 布尔运算——并集、差集、交集，并配有上下文工具栏
• 图标选择器（Iconify）和图片导入（PNG/JPEG/SVG/WebP/GIF）
• 自动布局——垂直/水平方向，可设置间距、内边距、对齐方式
• 多页文档支持，可通过标签页导航

设计系统

• 设计变量——颜色、数字、字符串等 token，使用 $variable 引用
• 多主题支持——支持多个维度，每个维度包含变体（浅色/深色、紧凑/舒适）
• 组件系统——可复用组件，支持实例化与覆盖
• CSS 同步——自动生成 CSS 自定义属性，在代码输出中使用 var(--name)
• 可复用 UI 套件——支持从 .pen 文件导入导出组件套件

AI 与代理

• 提示词转画布，支持流式生成及编排驱动的空间分解
• 并发代理团队——多名设计师可并行处理不同区域，每位成员的画布状态实时显示
• 分层工作流——design_skeleton → design_content → design_refine，各阶段配备针对性提示词
• 风格指南——内置 50+ 种风格（玻璃拟物、粗野主义、复古等），基于标签的模糊匹配，无缝集成到规划与生成流程中
• 多模型能力配置文件——根据模型层级自动调整思维模式、工作强度及提示词结构
• 内置代理运行时（agent-native, Zig NAPI）+ Anthropic、Claude Agent SDK、OpenCode、Codex、Copilot、Gemini 等提供商
• 支持 Anthropic 格式的中国 LLM 提供商接入——Kimi、智谱、GLM、豆包、悟道、百炼/DashScope、ModelScope、Coding Plans 等

Git 集成

• 克隆向导，支持 SSH / HTTPS 认证及 SSH 密钥管理
• 分支选择器——创建、切换、删除、合并分支，所有操作均在 Git 面板完成
• Pull / push 流程，具备认证重试与非快进处理机制
• 文件夹模式下的三路合并，支持磁盘上的 MERGE_HEAD 状态跟踪
• 冲突面板，按节点/字段展示三路对比卡片，内置 JSON 编辑器、批量操作及内联差异块
• 远程仓库设置与 SSH 密钥管理界面；整个 Git 界面支持 15 种语言本地化

导出

• 画布导出——PNG、JPEG、WEBP、PDF（快捷键：Cmd+Shift+P）
• 代码导出——React + Tailwind、HTML + CSS、Vue、Svelte、Flutter、SwiftUI、Jetpack Compose、React Native
• 增量式 MCP 代码生成流水线——codegen_plan、codegen_submit_chunk、codegen_assemble、codegen_clean

Figma 导入

• 支持导入 .fig 文件，保留布局、填充、描边、效果、文本、图片及矢量图形

桌面应用

• 原生 macOS、Windows 和 Linux 版本，基于 Electron 构建
• .op 文件关联——双击即可打开，单实例锁定
• 自动更新，通过 GitHub Releases 发布
• 原生应用菜单，包含另存为、最近打开文件等功能，并在关闭未保存时弹出对话框
• 最近打开文件持久化存储

技术栈

前端	React 19 · TanStack Start · Tailwind CSS v4 · shadcn/ui · i18next
画布	CanvasKit/Skia（WASM，GPU 加速）
引擎	pen-engine（无头版） · pen-react（React UI SDK）
状态管理	Zustand v5
服务器	Nitro
桌面端	Electron 35
CLI 工具	op — 终端控制、批处理设计 DSL、代码导出
AI	agent-native（Zig NAPI） · Anthropic SDK · Claude Agent SDK · OpenCode SDK · Copilot SDK
运行时	Bun · Vite 7
代码检查	oxlint · oxfmt
文件格式	.op — 基于 JSON，人类可读，兼容 Git

项目结构

openpencil/
├── apps/
│   ├── web/                 TanStack Start Web 应用
│   │   ├── src/
│   │   │   ├── canvas/      CanvasKit/Skia 引擎——绘图、同步、布局
│   │   │   ├── components/  React UI——编辑器、面板、共享对话框、图标
│   │   │   ├── services/ai/ AI 聊天、编排器、设计生成、流式传输
│   │   │   ├── services/codegen/ 代码生成服务封装
│   │   │   ├── stores/      Zustand——画布、文档、页面、历史记录、AI
│   │   │   ├── hooks/       键盘快捷键、文件拖放、Figma 粘贴、MCP 同步
│   │   │   ├── i18n/        国际化——支持 15 种语言
│   │   │   └── uikit/       可复用组件套件系统
│   │   └── server/
│   │       ├── api/ai/      Nitro API——流式聊天、代理、生成、图像搜索
│   │       ├── api/mcp/     MCP HTTP 传输接口
│   │       └── utils/       Claude、OpenCode、Codex、Copilot、Gemini 的 CLI 封装
│   ├── desktop/             Electron 桌面应用
│   │   ├── main.ts          窗口、Nitro 分叉、原生菜单、自动更新程序
│   │   ├── ipc-handlers.ts  原生文件对话框、主题同步、偏好设置 IPC
│   │   └── preload.ts       IPC 桥接
│   └── cli/                 CLI 工具——`op` 命令
│       ├── src/commands/    设计、文档、导出、导入、节点、页面、变量相关命令
│       ├── connection.ts    WebSocket 连接到正在运行的应用
│       └── launcher.ts      自动检测并启动桌面应用或 Web 服务器
├── packages/
│   ├── pen-types/           PenDocument 模型的类型定义
│   ├── pen-core/            文档树操作、布局引擎、变量管理
│   ├── pen-engine/          无头设计引擎——文档、选区、历史记录、视口
│   ├── pen-react/           React UI SDK——提供者、画布、钩子、面板、工具栏
│   ├── pen-codegen/         代码生成器（React、HTML、Vue、Flutter 等）
│   ├── pen-figma/           Figma .fig 文件解析器和转换工具
│   ├── pen-renderer/        独立的 CanvasKit/Skia 渲染器
│   ├── pen-mcp/             MCP 服务器——工具、路由、文档管理
│   ├── pen-sdk/             总 SDK（重新导出所有包）
│   ├── pen-ai-skills/       AI 提示词技能引擎（按阶段加载提示词）
│   └── agent-native/        原生 AI 代理运行时（Zig NAPI，多提供商，支持团队协作）
└── .githooks/               提交前从分支名同步版本号

键盘快捷键

键	操作		键	操作
V	选择		Cmd+S	保存
R	矩形		Cmd+Z	撤销
O	椭圆		Cmd+Shift+Z	重做
L	直线		Cmd+C/X/V/D	复制/剪切/粘贴/复制
T	文本		Cmd+G	组合
F	框架		Cmd+Shift+G	取消组合
P	钢笔工具		Cmd+Shift+P	导出 (PNG/JPG/WEBP/PDF)
H	手势（平移）		Cmd+Shift+C	代码面板
Del	删除		Cmd+Shift+V	变量面板
[ / ]	重新排序		Cmd+J	AI 聊天
箭头	微调 1px		Cmd+,	代理设置
Cmd+Alt+U	布尔并集		Cmd+Alt+S	布尔差集
Cmd+Alt+I	布尔交集		Cmd+Shift+S	另存为

脚本

bun --bun run dev          # 开发服务器 (端口 3000)
bun --bun run build        # 生产构建
bun --bun run test         # 运行测试 (Vitest)
npx tsc --noEmit           # 类型检查
bun run lint               # 代码检查 (oxlint)
bun run format             # 代码格式化 (oxfmt)
bun run bump <version>     # 同步所有 package.json 中的版本
bun run electron:dev       # Electron 开发
bun run electron:build     # Electron 打包
bun run cli:dev            # 从源码运行 CLI
bun run cli:compile        # 将 CLI 编译到 dist
bun run mcp:dev            # 从源码运行 MCP 服务器

贡献

欢迎贡献！请参阅 CLAUDE.md，了解架构细节和代码风格。

1. 分支并克隆
2. 设置版本同步：git config core.hooksPath .githooks
3. 创建分支：git checkout -b feat/my-feature
4. 运行检查：npx tsc --noEmit && bun --bun run test
5. 使用 Conventional Commits 提交：feat(canvas): 添加旋转吸附
6. 对 main 提交 PR

路线图

• 设计变量与 CSS 同步的 token
• 组件系统（实例与覆盖）
• 带有编排器的 AI 设计生成
• MCP 服务器集成分层设计工作流
• 多页面支持
• Figma .fig 导入
• 布尔运算（并集、差集、交集）
• 多模型能力配置文件
• 单仓库重构，使用可复用包
• CLI 工具 (op) 用于终端控制
• 内置 AI 代理 SDK，支持多提供商
• i18n — 15 种语言
• 无头设计引擎 (pen-engine) + React UI SDK (pen-react)
• 样式指南，带标签匹配和 MCP 工具
• 并发代理团队，带委托工具和画布指示器
• 原生代理运行时 (agent-native — Zig NAPI)
• Git 集成 — 克隆、分支、推送/拉取、文件夹模式三路合并
• 画布栅格导出 (PNG / JPEG / WEBP / PDF)
• 协作编辑
• 插件系统

贡献者

赞助商

OpenPencil 是免费且开源的。开发资金来自那些觉得它有用的人——感谢您让画布保持开放。

感谢 MrQyun — 想让您的名字也出现在这里吗？成为赞助商 →

社区

加入我们的 Discord — 提问、分享设计、提出功能建议。

星标历史

许可证

MIT — 版权归 2026 ZSeven-W 所有

OpenPencil 快速上手指南

OpenPencil 是全球首款开源的 AI 原生矢量设计工具。它支持通过自然语言提示词直接生成 UI 界面，采用“设计即代码”（Design-as-Code）理念，并内置多智能体协作与 MCP 服务器功能。

环境准备

在开始之前，请确保您的系统满足以下要求：

• 操作系统：macOS, Windows, 或 Linux。
• 运行时依赖：
  • Node.js >= 18
  • Bun >= 1.0 (推荐用于开发和运行)
• 可选依赖：
  • Zig >= 0.14：如需从源码构建 agent-native 模块则需要（若未安装，系统将自动下载预编译二进制文件）。
• 网络环境：由于涉及 AI 模型调用，请确保网络畅通以连接各大模型提供商（如 Anthropic, OpenAI, Google 等）。

安装步骤

您可以根据需求选择安装桌面端应用或命令行工具（CLI）。

1. 安装桌面应用

macOS (使用 Homebrew):

brew tap zseven-w/openpencil
brew install --cask openpencil

Windows (使用 Scoop):

scoop bucket add openpencil https://github.com/zseven-w/scoop-openpencil
scoop install openpencil

Linux / Windows (直接下载): 访问 GitHub Releases 下载对应安装包：

• Windows: .exe
• Linux: .AppImage 或 .deb

2. 安装命令行工具 (CLI)

若需通过终端控制设计流程或使用 op 命令，请全局安装：

npm install -g @zseven-w/openpencil

3. Docker 部署 (可选)

如果您偏好容器化部署，可以使用以下命令启动 Web 版：

docker run -d -p 3000:3000 ghcr.io/zseven-w/openpencil:latest

注：如需集成 Claude Code 等 AI CLI 工具，请使用对应的镜像标签（如 openpencil-claude:latest）并挂载认证卷。

基本使用

方式一：桌面端快速体验

1. 启动安装好的 OpenPencil 桌面应用。
2. 在界面中找到输入框，使用自然语言描述您想要的界面（例如：“创建一个带有深色模式的现代登录页面”）。
3. 系统将实时流式生成矢量设计稿。
4. 选中画布上的任意元素，继续通过对话进行修改（例如：“把按钮变成圆角，颜色改为蓝色”）。

方式二：使用 CLI 进行自动化设计

安装 CLI 后，您可以在终端直接执行设计任务：

启动桌面应用：

op start

从文本文件批量生成设计： 假设 landing.txt 中包含您的设计提示词：

op design @landing.txt

插入节点：

op insert '{"type":"RECT"}'

导出代码（React + Tailwind）：

op export react --out .

管道输入（从 stdin 读取）：

cat design.dsl | op design -

方式二：本地开发运行

如果您想贡献代码或运行最新开发版：

# 安装依赖
bun install

# 启动 Web 开发服务器 (http://localhost:3000)
bun --bun run dev

# 或以桌面应用模式运行
bun run electron:dev

核心工作流提示

• 提示词生成 (Prompt → Canvas)：直接描述 UI，支持流式动画预览。
• 多智能体协作：复杂页面会自动分解为由多个 AI 代理并行处理的子任务（如头部、特性区、页脚）。
• 风格应用：通过标签模糊匹配应用内置风格指南（如玻璃拟态、粗野主义、复古风等）。
• 代码导出：设计完成后，可一键导出为 React+Tailwind, Vue, Flutter, SwiftUI 等多种格式代码。