OpenPencil 开源：把提示词直接变成可编辑 UI 画布

OpenPencil 这款开源 AI 设计工具，真正打通了从 prompt 到可编辑 UI 画布的转化链路。它不仅仅是一个生成器，更是将设计工作流与 Agent 协作深度整合，彻底终结了以往断裂的设计环节。其核心价值主要体现在三个维度：一是实现了 prompt 到实时画布的无缝设计能力；二是构建了 MCP 与 CLI 的自动化协作机制；三是通过 Rust 重写带来的工程价值与清晰的开源定位。

QUOTE

AI 设计工具正在从生成一张图，转向接管一条可编辑、可交付、可被 Agent 接力的设计工作流。

— OpenPencil 项目主图

OpenPencil 值得看，原因在于它不是在传统设计工具旁边加一个聊天框，而是把画布、文件格式、MCP、CLI、并发 Agent Team 和代码导出放进同一个工作区。设计资产不再只是图片，而是 Agent 可以读取、修改、接力和导出的工程对象。

它的定位很清楚：开源 AI-native 矢量设计工具，支持 Concurrent Agent Teams、Design-as-Code、内置 MCP Server，并且可以把自然语言 prompt 直接写入实时无限画布。项目当前在 GitHub 有约4.5k Star，主语言是 Rust，采用 MIT License。

本文看点

01

Prompt 到实时画布

02

MCP 与 CLI 自动化

03

Rust 重写后的工程价值

01

WORKFLOW

它真正想替代的不是画图，而是断裂的设计链路

很多 AI 设计产品的问题是：生成效果看起来很炫，但产物很快断在一张静态图里。用户还要手动重画、重排、转代码、进 Git，Agent 也很难继续接手。

OpenPencil 想解决的是这条断裂链路：用户用自然语言描述页面，Orchestrator 按空间结构拆任务，多个 Agent 并行处理 Hero、Feature、Footer 等区域，生成过程流式写入无限画布，最后再进入多端代码导出。

— OpenPencil 功能架构图

「真正的变化在于：AI 不再只负责出一版效果，而是进入设计资产的生命周期。」

02

CANVAS

核心能力：Prompt 直接进入画布

OpenPencil 的第一层能力是 Prompt to Canvas。用户描述一个页面后，系统会把设计实时生成到无限画布上，并通过流式动画展示过程。它还支持 Vision input，也就是把截图或 mockup 作为参考，让 AI 按已有视觉方向生成或修改。

第二层能力是并发 Agent Team。它不是让一个模型从头写到尾，而是由 Orchestrator 按空间结构拆分任务，再让多个 Agent 同时处理不同区域。这对复杂落地页、后台界面和多模块页面尤其关键。

第三层能力是模型能力适配。OpenPencil 会根据模型层级自动调整 prompt、thinking mode 和 timeout：强模型拿完整提示和 thinking，标准模型关闭 thinking，小模型则使用更简化的嵌套 JSON prompt 来提高稳定性。

— OpenPencil 工作流程图

03

MCP AND CLI

让设计被 Agent 接管

OpenPencil 内置 MCP Server，可以一键安装到 Claude Code、Codex、OpenCode、Kiro、Copilot CLIs。通过 MCP，外部 Agent 可以读取、创建和修改.op文件。

CLI 工具op则承担终端侧自动化入口。它既可以接收文件，也可以接收 stdin，还支持 batch design DSL。这让需求文档、Agent 编排、设计画布和代码导出之间不再完全靠人工复制粘贴。

. . . bash

op start

op start --headless --file design.op

op design @landing.txt

op import:figma design.fig

cat design.dsl | op design -

04

PRODUCT SURFACE

不只画布：设计系统、代码导出和 Git 集成

1

画布层：无限画布、缩放、智能对齐、吸附、图形、文字、Frame、布尔运算、图标和多页文档。

2

设计系统层：设计变量、多个主题轴、组件系统、CSS sync、可复用 UIKits 和.pen文件导入导出。

3

工程层：PNG、JPEG、WEBP、PDF 导出，以及 React、HTML、Vue、Svelte、Flutter、SwiftUI、Jetpack Compose、React Native 等代码目标。

4

协作层：clone wizard、分支、pull/push、merge、冲突面板、内联 JSON 编辑和三方 diff。

05

RUST CORE

为什么要重写成 Rust

OpenPencil 曾经有 TypeScript + Electron 编辑器，但该编辑器已停在v0.7.5，当前仓库已经是 Rust workspace 产品。

— OpenPencil Rust 重写价值图

55.5 MB

桌面端单二进制

2.18 MB

Web gzip 体积

重写后的收益包括：桌面端不再捆绑浏览器引擎和 Node runtime，10,000-node live canvas 在嵌套 auto-layout 场景中可以写入、读取和快照布局，空闲 CPU 接近 0%；一次热路径修复还把 wheel-zoom CPU 从约 69% 降到接近 0%。

更关键的一点在于，编辑器状态、渲染、MCP、CLI、AI providers、codegen、Figma import 以及 Git integration，并不是各自分散运作，而是被统一放进了同一个 Rust workspace 里。对于 AI-native 设计工具而言，这种“一个核心、多端复用”的架构，意义要比只是把 Electron 简单替换成 Rust 大得多。

06 STACK

一个 Rust workspace 承担产品主体

PROJECT STRUCTURE

核心在crates/：包括编辑器核心、UI、native host、web host、CLI、MCP、AI、orchestrator、codegen、Figma parser 和 Git integration。

RENDERING

渲染上，native 端使用skia-safe，浏览器端使用 CanvasKit WASM/WebGL2，UI 框架是 pure-Rust GPU-Skia UI frameworkjian。

07

ECOSYSTEM

它在 ZSeven-W 工具族里的位置

OpenPencil 不是孤立项目。它和 ZSeven-W 的其他 AI-native Rust 工具组成了一套产品栈：Zode 是终端里的 AI-native coding assistant；agent-rs 是纯 Rust async runtime；jian 承担 UI framework；noema 则是 local-first、非向量的 coding agent memory system。

— ZSeven-W AI-native 工具族

08

INSTALL

安装和开发入口

. . . bash

brew tap zseven-w/openpencil

brew install --cask openpencil

brew install zseven-w/openpencil/op

bash scripts/start-web-rust.sh

cargo run -p op-host-desktop

OpenPencil 更适合正在把 AI 引入设计与前端协作流程的团队，也适合想把设计资产纳入 Git、MCP 和 Agent 工作流的开发者。

∞

THE END

画布正在变成 Agent 的工作环境

OpenPencil 最值得关注的地方，不是又一个开源设计工具，而是它对 AI 设计工具形态的重新定义。过去的设计工具以人操作画布为中心，AI 只是辅助输入；OpenPencil 则把.op 文件、MCP、CLI、Agent Team 和 codegen放进同一条链路，让画布成为 Agent 可以持续工作的对象。

如果这个方向跑通，未来的 UI 设计工具可能不再只是视觉稿编辑器，而会变成 Agent 的设计执行环境：需求进来，Agent 拆任务，上画布，用户审改，代码导出，Git 接管。

END

声明：本文由山行整理自：ZSeven-W/openpencil，如果对您有帮助，请帮忙点赞、关注、收藏，谢谢～

来源链接：https://github.com/ZSeven-W/openpencil

我是山行AI，持续关注 AI 工具链、Agent 工程和开源项目。如果你觉得今天这篇有收获，欢迎

三连，我们下篇见。

登录查看剩余 70% 内容