ZSeven-W/openpencil
GitHub: ZSeven-W/openpencil
开源 AI 原生矢量设计工具，通过自然语言提示和多 Agent 协作在无限画布上实时生成 UI，并将设计文件转化为可导出的多平台代码。
Stars: 4320 | Forks: 421
OpenPencil
全球首个开源 AI 原生矢量设计工具。
并发 Agent 团队 • 设计即代码 • 内置 MCP Server • 多模型智能
English · 简体中文 · 繁體中文 · 日本語 · 한국어 · Français · Español · Deutsch · Português · Русский · हिन्दी · Türkçe · ไทย · Tiếng Việt · Bahasa Indonesia
Click the image to watch the demo video
## 为什么选择 OpenPencil
|
### 🎨 Prompt → 画布
使用自然语言描述任何 UI。通过流式动画实时观看它出现在无限画布上。通过选择元素并进行对话来修改现有设计。
|
### 🤖 并发 Agent 团队
编排器将复杂页面分解为空间子任务。多个 AI Agent 同时处理不同部分——主视觉区、功能区、页脚——全部通过每个成员的画布指示器并行流式传输。
|
|
### 🧠 多模型智能
自动适应每个模型的能力。Claude 获得带有思考的完整 prompt；GPT-4o/Gemini 禁用思考；较小的模型（MiniMax、Qwen、Llama）获得简化的 prompt 以确保输出可靠。
|
### 🔌 MCP Server
一键安装到 Claude Code、Codex、Gemini、OpenCode、Kiro 或 Copilot CLI。从终端进行设计——通过任何兼容 MCP 的 Agent 读取、创建和修改 `.op` 文件。
|
|
### 🎨 风格指南
内置带有基于标签模糊匹配的风格指南库。将视觉风格（毛玻璃效果、粗野主义、复古等）应用于 AI 生成的设计。提供用于外部 Agent 访问的 MCP 工具。
|
### 📦 设计即代码
`.op` 文件采用 JSON 格式——人类可读、对 Git 友好、可进行 diff 对比。设计变量生成 CSS 自定义属性。支持导出为 React + Tailwind 或 HTML + CSS 代码。
|
|
### 🖥️ 随处运行
支持 Web 应用 + macOS、Windows 和 Linux 上的原生桌面应用——一个 Rust 核心，一个独立的二进制文件，无需浏览器引擎。`.op` 文件关联——双击即可打开。
|
### ⌨️ CLI — `op`
从终端控制设计工具。`op design`、`op insert`——批量设计 DSL 和节点操作。支持从文件或 stdin 管道输入。可与桌面应用或 Web 服务器配合使用。
|
|
### 🎯 多平台代码导出
从一个 `.op` 文件导出为 React + Tailwind、HTML + CSS、Vue、Svelte、Flutter、SwiftUI、Jetpack Compose、React Native。设计变量将转换为 CSS 自定义属性。
|
### 🧩 可嵌入 SDK
`op-web-sdk`（原生）+ `op-web-sdk-react` / `op-web-sdk-vue` 适配器——由编辑器附带的同一套 wasm 渲染器驱动，可在您自己的应用中嵌入只读的 `.op` 查看器。
|
|
### 🛡️ 设计系统套件
通过样式切换和组件组合管理可复用的 UIKit。从 `.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](https://github.com/ZSeven-W/openpencil/releases) — `.exe` (Windows), `.AppImage` / `.deb` (Linux)
**CLI (`op`):**
```
brew install zseven-w/openpencil/op
```
或使用安装脚本 (macOS / Linux)：
```
curl -fsSL https://raw.githubusercontent.com/ZSeven-W/openpencil/main/scripts/install-op.sh | bash
```
允许最新的预发布版本：
```
curl -fsSL https://raw.githubusercontent.com/ZSeven-W/openpencil/main/scripts/install-op.sh | OP_PRERELEASE=1 bash
```
Windows PowerShell:
```
irm https://raw.githubusercontent.com/ZSeven-W/openpencil/main/scripts/install-op.ps1 | iex
```
允许最新的预发布版本：
```
$env:OP_PRERELEASE = "1"; irm https://raw.githubusercontent.com/ZSeven-W/openpencil/main/scripts/install-op.ps1 | iex
```
## 克隆（包含子模块）
```
git clone --recurse-submodules https://github.com/ZSeven-W/openpencil.git
# 或者已经克隆过 — 先同步，以便过时的 submodule URL 获取 .gitmodules 的更改：
git submodule sync --recursive && git submodule update --init --recursive
```
`vendor/` 目录下包含三个子模块，它们都是公开的并通过 HTTPS 获取（无需 SSH 密钥）：`jian`（基于 GPU-Skia 的 UI 框架——控件/渲染/事件）、`casement`（winit 的一个分支）和 `agent`（`agent-rs`——跨产品 Rust agent 运行时，由 OP 和 Zode 共享）。`vendor/anthropic-agent-sdk` 直接在树中进行跟踪，而不是一个子模块。
## 快速开始（开发）
```
# Web dev server（构建 CanvasKit wasm bundle，然后运行 headless web host）
bash scripts/start-web-rust.sh
```
在浏览器中输入的内置提供商、图像生成和 Openverse 凭据
默认保存在同源的 `localStorage`
（`openpencil-rust-web-credentials`）中，
与普通的 Web 偏好设置分开。AI 请求所需的凭据会
随该请求一起发送，但守护进程不会将浏览器快照写入
`settings.json`。
私有部署可以通过设置
`OPENPENCIL_PERSIST_WEB_CREDENTIALS_SERVER=true` 来选择启用服务器持久化。此设置是
全部署范围的；每个接受的浏览器快照都会替换共享的
浏览器拥有副本。仅在受信任、受访问控制的部署环境中启用它，
并且该环境应具有一个活动的管理员配置，位于 HTTPS 之后。关闭该设置后，
将在下次启动时移除之前持久化的浏览器拥有的凭据，
同时保留操作员拥有的配置。与所有 `localStorage` 一样，
同源脚本可以读取这些值，因此必须保护 Web 源
免受不受信任的脚本和 XSS 的攻击。在降级到早于
此切换功能的版本之前，请关闭它并启动当前版本一次以清除
浏览器拥有的副本。
Web 主机仅支持内置的 API-key agent。CLI 和 ACP agent 仍保持
原生独占：它们不会显示在 Web 模型选择器中，也不会存储在浏览器凭据快照中、同步到服务器或通过 Web 连接路由公开。对凭据和 AI endpoint 的浏览器请求
默认允许环回/localhost 源。公共反向代理必须单独将
`OPENPENCIL_WEB_ALLOWED_ORIGINS` 设置为以逗号分隔的精确源列表，
例如 `https://demo.openpencil.dev`。
服务器持久化不允许浏览器控制的请求访问环回、
私有、链路本地、元数据或保留的提供商 endpoint。如果受信任的私有
部署有意使用内部提供商，则必须单独将
`OPENPENCIL_WEB_AI_ENDPOINT_ALLOWLIST` 设置为以逗号分隔的精确 URL
源列表，例如 `http://127.0.0.1:11434,https://llm.internal.example`。
或者作为桌面应用程序运行：
```
cargo run -p op-host-desktop
```
### Docker
带有标签的 Rust 发布版会发布单个 Web 主机镜像。随附 AI CLI 的旧版 TypeScript 镜像不再发布。
| 镜像 | 包含内容 |
| --- | --- |
| `ghcr.io/zseven-w/openpencil-web:vX.Y.Z` | Rust Web 主机、wasm bundle 和 CanvasKit 资源 |
Web UI 仅公开内置的 agent 配置文件；Claude/Codex/OpenCode/Copilot/Gemini CLI 工具不包含在 Docker 镜像中。
**运行：**
```
VERSION="$(scripts/workspace-version.sh)"
docker run -d -p 3100:3100 "ghcr.io/zseven-w/openpencil-web:v${VERSION}"
```
然后打开 `http://localhost:3100/`。
**本地构建：**
```
docker build -f Dockerfile.web-rust -t openpencil-web-rust .
docker run -p 3100:3100 openpencil-web-rust
```
## AI 原生设计
**Prompt 到 UI**
- **文本到设计**——描述一个页面，通过 SSE 流式动画实时在画布上生成它
- **编排器**——将复杂页面分解为空间子任务以进行并行生成
- **Agent 团队**——并发团队成员具备委派工具、每个成员的画布指示器和后备策略
- **设计修改**——选择元素，然后用自然语言描述更改
- **视觉输入**——附加屏幕截图或模型以进行基于参考的设计
- **风格指南**——通过基于标签的模糊匹配应用视觉风格（毛玻璃效果、粗野主义、复古等）
- **防泛滥**——跨世代多样性跟踪以避免重复的 AI 输出
**多 Agent 支持**
| Agent | 设置 |
| --------------------------- | ------------------------------------------------------------------------------------------------- |
| **内置（9+ 提供商）** | 从具有区域切换功能的提供商预设中进行选择——Anthropic、OpenAI、Google、DeepSeek 等 |
| **Claude Code** | 无需配置——使用带有本地 OAuth 的 Claude Agent SDK |
| **Codex CLI** | 在 Agent 设置 (`Cmd+,`) 中连接 |
| **OpenCode** | 在 Agent 设置 (`Cmd+,`) 中连接 |
| **GitHub Copilot** | `copilot login`，然后在 Agent 设置 (`Cmd+,`) 中连接 |
| **Gemini CLI** | 在 Agent 设置 (`Cmd+,`) 中连接 |
**模型能力配置文件** ——自动适应每个模型层级的 prompt、思考模式和超时限制。完整层级模型（Claude）获得完整的 prompt；标准层级（GPT-4o、Gemini、DeepSeek）禁用思考；基础层级（MiniMax、Qwen、Llama、Mistral）获得简化的嵌套 JSON prompt 以实现最大可靠性。
**i18n** ——支持 15 种语言的完整界面本地化：English、简体中文、繁體中文、日本語、한국어、Français、Español、Deutsch、Português、Русский、हिन्दी、Türkçe、ไทย、Tiếng Việt、Bahasa Indonesia。
**MCP Server**
- 内置 MCP 服务器（`op-mcp` crate）——一键安装到 Claude Code / Codex / Gemini / OpenCode / Kiro / Copilot CLI
- 无需 Node.js——通过桌面二进制文件进行 stdio 传输（`--mcp
`），外加运行中应用程序的实时 HTTP endpoint（`127.0.0.1:/mcp`）
- 从终端进行设计自动化：通过任何兼容 MCP 的 agent 读取、创建和修改 `.op` 文件
- **分层设计工作流** —— `design_skeleton` → `design_content` → `design_refine`，用于更高保真度的多节设计
- **分段 prompt 检索** ——仅加载您所需的设计知识（schema、布局、角色、图标、规划等）
- **风格指南工具** —— `get_style_guide_tags` 和 `get_style_guide`，用于通过 MCP 应用视觉风格
- 多页面支持——通过 MCP 工具创建、重命名、重新排序和复制页面
**代码生成**
- React + Tailwind CSS, HTML + CSS, CSS Variables
- Vue, Svelte, Flutter, SwiftUI, Jetpack Compose, React Native
## CLI — `op`
通过 Homebrew 或安装脚本进行安装，然后从您的终端控制设计工具：
```
brew install zseven-w/openpencil/op
```
```
curl -fsSL https://raw.githubusercontent.com/ZSeven-W/openpencil/main/scripts/install-op.sh | bash
```
```
curl -fsSL https://raw.githubusercontent.com/ZSeven-W/openpencil/main/scripts/install-op.sh | OP_PRERELEASE=1 bash
```
```
irm https://raw.githubusercontent.com/ZSeven-W/openpencil/main/scripts/install-op.ps1 | iex
```
```
$env:OP_PRERELEASE = "1"; irm https://raw.githubusercontent.com/ZSeven-W/openpencil/main/scripts/install-op.ps1 | iex
```
```
op start # Launch desktop app
op start --headless --file design.op # Launch headless file-backed server
op design @landing.txt # Batch design from file
op design @ui.js # Sandboxed JavaScript with loops
op insert '{"type":"rectangle"}' # Insert a node
op import:figma design.fig # Import Figma file
cat design.dsl | op design - # Pipe from stdin
```
支持三种输入方式：内联字符串、`@filepath`（从文件读取）或 `-`（从 stdin 读取）。可与桌面应用、Web 服务器或无头文件支持的服务器配合使用。有关所有命令，请参阅 [CLI 命令参考](./crates/op-cli/src/usage.txt)。
**LLM 技能** ——安装 [OpenPencil Skill](https://github.com/ZSeven-W/openpencil-skill) 插件，教导 AI agent 如何使用 `op` 进行设计。运行 `op install` 以应用于检测到的 agent，或使用 `op install --target codex` 明确指定一个目标。
## 功能特性
**画布与绘图**
- 具有平移、缩放、智能对齐参考线和吸附功能的无限画布
- 矩形、椭圆、直线、多边形、钢笔（贝塞尔曲线）、框架、文本
- 布尔运算——并集、减去、相交，带有上下文工具栏
- 图标选择器（Iconify）和图像导入（PNG/JPEG/SVG/WebP/GIF）
- 自动布局——/水平，支持间距、内边距、排列、对齐
- 带有标签导航的多页面文档
**设计系统**
- 设计变量——具有 `$variable` 引用的颜色、数字、字符串 token
- 多主题支持——多个轴，每个轴都有变体（浅色/深色、紧凑/舒适）
- 组件系统——具有实例和覆盖功能的可复用组件
- CSS 同步——自动生成的自定义属性，代码输出中的 `var(--name)`
- 可复用的 UIKit——从 `.pen` 文件导入/导出组件套件
**AI 与 Agent**
- Prompt 到画布，支持流式生成和编排器驱动的空间分解
- 并发 Agent 团队——多名设计师并行处理不同部分，并具有每个成员的画布指示器
- 分层工作流—— `design_skeleton` → `design_content` → `design_refine`，每个阶段都有专注的 prompt
- 风格指南——50+ 内置风格（毛玻璃效果、粗野主义、复古等），带有基于标签的模糊匹配，已接入规划和生成阶段
- 多模型能力配置文件——根据模型层级自动调整思考模式、工作量和 prompt 形态
- 内置 Rust agent 运行时 + Anthropic、Claude Agent SDK、OpenCode、Codex、Copilot、Gemini 提供商
- 针对中国大语言模型提供商的 Anthropic 格式透传——Kimi、Zhipu、GLM、DouBao、Ark、Bailian/DashScope、ModelScope、Coding Plans
**Git 集成**
- 带有 SSH / HTTPS 认证和 SSH 密钥管理的克隆向导
- 分支选择器——创建、切换、删除、合并，全部可在 git 面板中完成
- 拉取 / 推送级联，带有认证重试和非快进处理
- 文件夹模式三方合并，具有磁盘上的 `MERGE_HEAD` 状态跟踪
- 冲突面板，带有每个节点 / 每个字段的三方卡片、内联 JSON 编辑器、批量操作和内联 diff 块
- 远程设置和 SSH 密钥 UI；整个 Git 表面支持 15 种区域设置的 i18n
**导出**
- 画布导出——PNG、JPEG、WEBP、PDF (`Cmd+Shift+P`)
- 代码导出——React + Tailwind、HTML + CSS、Vue、Svelte、Flutter、SwiftUI、Jetpack Compose、React Native
- 增量式 MCP codegen 流水线—— `codegen_plan`、`codegen_submit_chunk`、`codegen_assemble`、`codegen_clean`
**Figma 导入**
- 导入 `.fig` 文件，保留布局、填充、描边、效果、文本、图像和矢量
**桌面应用**
- 原生 macOS、Windows 和 Linux——单一的自包含二进制文件（winit + GPU Skia，无 Electron）
- `.op` 文件关联——双击打开，单实例锁定
- 针对 GitHub Releases 的后台更新检查
- 原生应用程序菜单，具有另存为、打开最近的文件以及关闭时未保存更改的对话框
- 最近使用的文件持久化
## 技术栈
| | |
| --------------- | ------------------------------------------------------------------------------------------ |
| **核心** | Rust workspace (`crates/`)——编辑器状态、控件、主机、MCP、AI、codegen |
| **渲染** | 到处使用 GPU Skia——原生端使用 `skia-safe` (GL)，浏览器端使用 CanvasKit (WASM/WebGL2) |
| **UI 框架** | jian ——内部打包的纯 Rust GPU-Skia UI 框架：控件、布局、事件、热重载 (`vendor/jian`) |
| **窗口管理** | winit（内部打包的 `casement` 分支） |
| **桌面端** | 原生二进制文件 `openpencil-desktop`——无浏览器引擎 |
| **Web SDK** | `op-web-sdk` + React 19 / Vue 3 适配器——只读的 `.op` 查看器 (TypeScript) |
| **CLI** | `op`——终端控制、批量设计 DSL |
| **AI** | 内置 Rust agent 运行时 · Anthropic SDK · Claude Agent SDK · OpenCode SDK · Copilot SDK |
| **Lint** | clippy · rustfmt (Rust) · oxlint · oxfmt (Web SDK) |
| **文件格式** | `.op`——基于 JSON、人类可读、对 Git 友好 |
## 生态系统
OpenPencil 是 **[ZSeven-W](https://github.com/ZSeven-W)** 开发的纯 Rust、AI 原生工具家族的一部分。它们组合使用：`jian` 为 OpenPencil 提供渲染，`agent-rs` 运行其 agent，`noema` 提供记忆功能，而 `zode` 支持从终端进行设计。
| 项目 | 它是什么 |
| ------- | ---------- |
| 
**[Zode](https://github.com/ZSeven-W/zode)** | 开源、AI 原生的终端编码助手——快速的 Rust TUI（`ratatui`），可读取您的代码、运行命令、搜索文件并管理 git。通过 MCP 驱动 OpenPencil。 |
| **[agent-rs](https://github.com/ZSeven-W/agent-rs)** | 用于发布 LLM agent 的纯 Rust 异步运行时——支持多提供商、端到端具备工具调用能力、结构化权限、真正的 MCP、零 `unsafe`。为 OpenPencil 的内置 agent 运行时（`vendor/agent`）和 Zode 提供支持。 |
| 
**[jian](https://github.com/ZSeven-W/jian)** | 纯 Rust、GPU-Skia UI 框架——将控件、布局、事件和热重载集成在一个技术栈中。无需 JS 运行时、DOM 或 Electron，即可将声明式的 `.op` 文档转换为可由 AI 控制的原生应用。OpenPencil 的 UI 框架（`vendor/jian`）。 |
| 
**[noema](https://github.com/ZSeven-W/noema)** | 面向本地优先的、非矢量的编码 agent 记忆系统。将持久记忆作为可检查的文件，提供用于新条目的审查队列，以及词法（无 embedding）召回——可跨 Zode、Codex、Claude Code 和 MCP 运行时使用。 |
## 为什么选择 Rust
OpenPencil 使用 **Rust** 从头完全重写（[#129](https://github.com/ZSeven-W/openpencil/issues/129)）。重写已完成——TypeScript + Electron 编辑器在 `v0.7.5` 版本被弃用，此代码库中的 Rust workspace 即为最终产品：一个体积极小且速度极快的原生核心，可从单一代码库在更多平台上运行。
| | TypeScript + Electron（已弃用，`v0.7.5`） | Rust（今天） |
| --------------------- | ---------------------------------------------- | ------------------------------------------------------------------- |
| **桌面运行时** | Electron——捆绑 Chromium + Node.js | 原生窗口（`winit` + GPU Skia），无浏览器引擎 |
| **桌面端体积** | 每次安装完整的 Chromium 运行时 | 单一的自包含二进制文件——**55.5 MB** |
| **Web 负载** | JS + WASM bundle | **8.2 MB** wasm / **2.18 MB** 通过网络传输的 gzip |
| **渲染** | Web 端使用 CanvasKit/Skia | 在**每个**目标平台上使用同一个 GPU 加速的 Skia 后端 |
| **内存** | JavaScript GC 暂停 | 无 GC——Rust 所有权机制，延迟可预测 |
| **代码库** | Web 技术栈 + Electron | 一个 Rust workspace：编辑器 · CLI · MCP · AI · codegen · Figma · Git |
| **目标平台** | Web + 桌面端，两个独立的技术栈 | 桌面端 (macOS/Win/Linux) · 移动端 · 浏览器——同一个核心 |
**实测改进**
- **体积小巧**——整个桌面应用程序是一个 **55.5 MB** 的原生二进制文件，而不是捆绑的浏览器引擎加上 Node 运行时。Web 构建在拆分图标目录后（网络传输减少 48%），原始体积为 **8.2 MB** / gzip 压缩后为 **2.18 MB**。
- **扩展至大型文档**——拥有 **10,000 个节点**的实时画布（嵌套自动布局，深达四级）在进行布局写入、读取和快照时，**未发生 panic 且 CPU 空闲率约为 0%**；对所有 10k 个节点进行完整布局快照返回仅需 **~0.68 秒**。
- **交互迅速**——平移/缩放不再需要每一帧都重新序列化文档（一项关键路径的修复将滚轮缩放时的 CPU 占用从 **~69% 降至 ~0%**）；拖拽操作会增量修补场景，文本测量结果被缓存，并且重绘操作合并为每帧一次。
- **一个核心，适配所有屏幕**——相同的编辑器状态和相同的渲染后端可通过 WASM 编译为原生桌面、移动端和浏览器——无需保持并行重新实现的同步。
- **到处使用 GPU Skia**——原生端通过 GL 上下文上的 `skia-safe` 进行渲染；浏览器通过 WebGL2 上的 CanvasKit 进行渲染——相同的绘图代码，相同的输出。
- **原生无障碍**——在 macOS、Windows 和 Linux 上使用 AccessKit，外加 Web 端的 DOM 映射，而不是依赖浏览器的 a11y 树。
- **一个类型检查的 workspace**——MCP 主机、CLI、AI 提供商、代码生成、Figma 导入和 Git 集成全部位于同一个 Rust workspace 中，并在 CI 中通过 `cargo-deny` 进行供应链限制。
## 项目结构
```
openpencil/
├── crates/ Rust workspace — the product
│ ├── op-editor-core/ Canonical `.op` (PenDocument) editor state + EditorCommand + design variables
│ ├── op-editor-ui/ Platform-free widgets + RenderBackend facade (wasm32-clean)
│ ├── op-editor-host-core/ Transport-free host state machines shared by all hosts
│ ├── op-host-native/ Native host lib — winit + skia-safe GL (desktop + mobile)
│ ├── op-host-web/ Browser bundle — wasm32 cdylib, CanvasKit renderer
│ ├── op-host-desktop/ Desktop binary `openpencil-desktop`; also the `--serve-web` daemon
│ ├── op-host-services/ Headless serve-web / MCP daemon lib
│ ├── op-host-web-server/ Thin GL-free web-server binary
│ ├── op-cli/ CLI tool — `op` command
│ ├── op-mcp/ MCP server — tools, batch design, layered workflow
│ ├── op-ai/ AI providers, chat runtime, streaming
│ ├── op-ai-skills/ AI prompt skill engine (phase-driven prompt loading)
│ ├── op-orchestrator/ Concurrent agent-team orchestration
│ ├── op-codegen/ Code generators (React, HTML, Vue, Flutter, ...)
│ ├── op-figma/ Figma .fig file parser and converter
│ ├── op-git/ Git integration — clone, branch, push/pull, merge
│ └── ... op-opmerge / op-pen-loader / op-design-lint / op-i18n /
│ op-config-store / op-process-io / op-acp / op-smoke / ...
├── packages/ Web SDK workspace (Bun)
│ ├── op-web-sdk/ Read-only `.op` web viewer SDK (wraps the wasm bundle)
│ ├── op-web-sdk-react/ React 19 adapter
│ └── op-web-sdk-vue/ Vue 3 adapter
├── vendor/ Vendored subsystems (git submodules)
│ ├── jian/ GPU-Skia UI framework — widgets/render/events
│ ├── casement/ winit fork
│ └── agent/ Cross-product Rust agent runtime (agent-rs)
└── .githooks/ Pre-commit version drift check
```
## 键盘快捷键
| 按键 | 动作 | | 按键 | 动作 |
| ----------- | ----------------- | --- | ------------- | ------------------------- |
| `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+,` | Agent 设置 |
| `Cmd+Alt+U` | 布尔并集 | | `Cmd+Alt+S` | 布尔减去 |
| `Cmd+Alt+I` | 布尔相交 | | `Cmd+Shift+S` | 另存为 |
## 脚本
```
# Product (Rust — 从 repo root 运行)
cargo build --workspace # Build all crates (add --release for prod)
cargo test --workspace # Run all tests
cargo check --workspace # Type check
cargo clippy --workspace --all-targets -- -D warnings # Lint
cargo fmt --all # Format
bash scripts/start-web-rust.sh # Web dev server (wasm bundle + headless host)
cargo run -p op-host-desktop # Desktop app (binary: openpencil-desktop)
cargo run -p op-cli -- # CLI (binary: op)
# Web SDK / JS tooling（从 packages/ 运行）
cd packages && bun run lint # Lint the web SDK (oxlint); also: bun run format
cd packages && bun run generate-iconify-catalog # Regenerate the Rust icon catalog assets
# 版本同步（从 repository root 运行）
scripts/sync-version.sh # Sync all managed versions from root Cargo.toml
tools/check-version-sync.sh # Verify all managed versions match root Cargo.toml
```
### Rust workspace 详情
Rust 化已完成——Rust workspace 即为最终产品。启动规格说明：`openpencil-docs/superpowers/specs/2026-05-02-rust-ification-kickoff.md`（v7 FROZEN）。
```
# 安装 Rust toolchain（rust-toolchain.toml 自动锁定 1.94 版本）
rustup toolchain install 1.94
rustup target add wasm32-unknown-unknown
# build / test / lint
cargo check --workspace
cargo test --workspace
cargo clippy --workspace --all-targets -- -D warnings
cargo check --target wasm32-unknown-unknown -p op-host-web --no-default-features --features web # kickoff §1.2 wasm32 invariant
cargo deny check && cargo deny --target wasm32-unknown-unknown check bans # cargo-deny (native + wasm32 bans; CI uses cargo-deny-action@v2)
```
**入口 crate（`crates/`——构建目标）：**
| Crate | 类别 | wasm32 |
| --------------- | -------------------------------------------------------------------------------- | ---------------- |
| op-host-web | 浏览器 bundle 入口——wasm32 cdylib，通过 CanvasKit 渲染 | ✅ |
| op-host-native | 原生主机库——WidgetHostNative + skia-safe GL 后端（桌面端 + 移动端） | ❌（仅限原生） |
| op-host-desktop | 桌面二进制文件 `openpencil-desktop`（winit + skia-safe GL）——也是用于托管 Web bundle 的 `serve-web` 守护进程 | ❌（仅限原生） |
| op-cli | `op` 命令行工具 | ❌（仅限原生） |
**共享库 crate：** `op-editor-core`（规范的 `.op` 状态）、`op-editor-ui`（与平台无关的控件 + `RenderBackend`）、`op-editor-host-core`（与传输无关的主机状态机）、`op-mcp`、`op-ai`、`op-ai-skills`、`op-codegen`、`op-orchestrator`、`op-figma`、`op-git`、`op-opmerge`、`op-pen-loader`、`op-design-lint`、`op-config-store`、`op-process-io`、`op-acp`、`op-i18n`、`op-rpc-transport` ——外加 `op-smoke`（无头设计回合测试运行程序）。浏览器 bundle 通过官方的 CanvasKit skia WASM（单独加载）进行渲染，因此已弃用的 `skia-safe-op` wasm 分支 + `wasm-libc-shim` 不复存在。
**子模块：** `vendor/agent` → `github.com/ZSeven-W/agent-rs`（跨产品 Rust agent 运行时）。
## 贡献
欢迎 contributions！有关架构详情和代码风格，请参阅 [CLAUDE.md](./CLAUDE.md)。
1. Fork 并 clone 代码库
2. 启用版本漂移检查：`git config core.hooksPath .githooks`
3. 创建分支：`git checkout -b feat/my-feature`
4. 运行检查：`cargo test --workspace && cargo clippy --workspace --all-targets -- -D warnings`
5. 使用 [Conventional Commits](https://www.conventionalcommits.org/) 提交：`feat(canvas): add rotation snapping`
6. 向 `main` 提交 PR
## 路线图
- [x] 具有 CSS 同步的设计变量与 token
- [x] 组件系统（实例与覆盖）
- [x] 带有编排器的 AI 设计生成
- [x] 具有分层设计工作流的 MCP 服务器集成
- [x] 多页面支持
- [x] Figma `.fig` 导入
- [x] 布尔运算（并集、减去、相交）
- [x] 多模型能力配置文件
- [x] 具有可复用 Rust crate 和 Web SDK 包的 Cargo workspace
- [x] Rust 桌面与 Web 编辑器
- [x] 用于终端控制的 CLI 工具（`op`）
- [x] 内置支持多提供商的 Rust agent 运行时
- [x] i18n——15 种语言
- [x] 适用于 JavaScript、React 和 Vue 的基于 Wasm 的查看器 SDK
- [x] 具有基于标签匹配和 MCP 工具的风格指南
- [x] 具有委派和画布指示器的并发 Agent 团队
- [x] Git 集成——克隆、分支、推送/拉取、文件夹模式三方合并
- [x] 画布导出 (SVG / PNG / JPEG / WEBP / PDF)
- [ ] 协同编辑
- [ ] 插件系统
## 贡献者
## 赞助商
OpenPencil 是免费且开源的。其开发由那些认为它有用的人提供资金——感谢您让画布保持开放。
感谢 **[MrQyun](https://github.com/mrqyun)** ——想在这里看到您的名字吗？**[成为赞助商 →](https://github.com/sponsors/ZSeven-W)**
## 社区
Join our Discord
— Ask questions, share designs, suggest features.
**认可的社区：[LINUX DO](https://linux.do/)**
## Star 历史
## 评估
[](https://mseep.ai/app/zseven-w-openpencil)
## 许可证
[MIT](./LICENSE) — 版权所有 (c) 2026 ZSeven-W标签：AI原生, AI工具, Homebrew安装, Rust, UI设计, 可视化界面, 桌面应用, 矢量绘图, 网络流量审计, 设计工具, 通知系统