OpenPencil

全球首个开源 AI 原生矢量设计工具。 支持并发 Agent 团队 · Design-as-Code（设计即代码） · 内置 MCP Server · 多模型智能支持

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

注意： 存在另一个同名开源项目 —— OpenPencil，该项目专注于与 Figma 兼容的可视化设计及实时协作。而本项目侧重于 AI 原生的“设计到代码”（design-to-code）工作流。

为什么选择 OpenPencil

🎨 Prompt → 画布

用自然语言描述任何 UI。在无限画布上实时观察其通过流式动画生成。通过选中元素并进行对话即可修改现有设计。

🤖 并发 Agent 团队

协调器将复杂的页面分解为空间子任务。多个 AI Agent 可以同时处理不同部分（如首屏、功能区、页脚）——所有内容均通过成员画布指示器并行流式呈现。

🧠 多模型智能

自动适配各模型的能力。Claude 可获得带有思维链（thinking）的完整 Prompt；GPT-4o/Gemini 会禁用思维链；较小的模型（如 MiniMax, Qwen, Llama）则会接收简化后的 Prompt 以确保输出质量。

🔌 MCP Server

一键安装至 Claude Code、Codex、Gemini、OpenCode、Kiro 或 Copilot CLI。在终端中直接进行设计 —— 通过任何兼容 MCP 的 Agent 读取、创建和修改 .op 文件。

🎨 样式指南

内置基于标签模糊匹配的样式指南库。可将各种视觉风格（如玻璃拟态、粗野主义、复古风等）应用于 AI 生成的设计。提供 MCP 工具以供外部 Agent 调用。

📦 Design-as-Code（设计即代码）

.op 文件即 JSON —— 易于阅读、Git 友好且支持 diff 对比。设计变量可生成 CSS 自定义属性。支持导出代码至 React + Tailwind 或 HTML + CSS。

🖥️ 随处运行

通过 Electron 支持 Web 应用及 macOS、Windows 和 Linux 的原生桌面端。支持 GitHub Releases 自动更新。支持 .op 文件关联 —— 双击即可打开。

⌨️ CLI — op

通过终端控制设计工具。支持 op design、op insert —— 批量处理 DSL 设计、节点操作。支持通过文件或 stdin 管道输入。可配合桌面端或 Web 服务器使用。

🎯 多平台代码导出

支持导出至 React + Tailwind、HTML + CSS、Vue、Svelte、Flutter、SwiftUI、Jetpack Compose、React Native —— 所有这一切均源自同一个 .op 文件。设计变量将转换为 CSS 自定义属性。

🧩 可嵌入 SDK

pen-engine (无头引擎) + pen-react (React UI SDK) —— 可将设计引擎嵌入您自己的应用程序。开箱即用，包含 DesignProvider、DesignCanvas、Hooks、面板及工具栏组件。

🛡️ 设计系统工具包

管理带有样式切换和组件组合的可复用 UI Kit。支持从 .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 volume 来持久化登录会话：

# 第 1 步 — 登录 (仅需一次)
docker volume create openpencil-claude-auth
docker run -it --rm \
  -v openpencil-claude-auth:/root/.claude \
  ghcr.io/zseven-w