用自然语言在无限画布上生成矢量 UI，还能让多个 AI Agent 同时开工：OpenPencil 体验笔记

用自然语言在无限画布上生成矢量 UI，还能让多个 AI Agent 同时开工：OpenPencil 体验笔记

上周我在 GitHub Trending 上刷到一个挺特别的项目：OpenPencil。它把自己定位成「世界首个开源 AI 原生矢量设计工具」，4.5k Star，Rust 写的，MIT 许可证，支持 MCP Server 集成。最让我好奇的是它的「并发 Agent Teams」机制——一个复杂页面可以被拆解成多个子区域，让不同 AI Agent 同时在各自区域并行生成内容。

说实话，市面上不缺「AI 生成 UI」的工具。但把「设计到代码」这件事用 Rust 从底层重写，再嵌进 MCP 生态的，我之前还真没见过。于是我花了半天认真跑了一遍，以下是我的观察。

它解决的是什么问题

传统设计工具（Figma、Sketch）本质上是手动操作为主，AI 只是辅助生成图标或文案的插件。而 OpenPencil 的思路完全不同——它把「自然语言描述」作为第一优先级输入，你在无限画布上用 Prompt 描述一个页面，AI 实时把矢量元素渲染到画布上，可以直接修改局部、调整风格、导出代码。

换句话说，它更像一个「AI 原生的设计环境」，而不是「加了 AI 的设计软件」。

Prompt → Canvas：实时渲染矢量 UI

这是核心交互。你在输入框里写「一个登录页面，左侧是品牌插图，右侧是表单，包含邮箱和密码输入框，提交按钮是渐变蓝色」，描述发出去之后，画布上会流式出现对应元素，不是一张静态图片，而是可编辑的矢量节点。

生成过程中，每个区域会有对应 Agent 的指示标，你知道哪块是哪个 Agent 生成的。生成完成后选中任意元素，可以继续用自然语言修改：「把这个按钮改成圆角」「把背景色调成深色模式」。修改是局部进行的，不影响其他区域。

并发 Agent Teams：复杂页面的分工生成

这是我认为最有意思的部分。OpenPencil 内置了一个编排器（orchestrator），当你描述一个复杂页面（比如一个落地页包含 hero 区、功能区、定价表、Footer），编排器会自动把任务分解成空间子任务：Hero Agent 负责顶部区域，Features Agent 负责中间模块，Footer Agent 负责底部——三个 Agent 同时在画布上各自区域工作，输出流式并行，最后拼成一个完整页面。

这和用单一 AI 一次生成整个页面有本质区别。分解之后，每个 Agent 的 Prompt 更精简、输出更可控；而且你可以在任意 Agent 完成前就看到它那一块的输出，不需要等全部生成完毕。

MCP Server：让 AI 编程助手直接「看见」设计稿

OpenPencil 提供了内置 MCP Server，支持一键安装到 Claude Code、Codex、OpenCode、Kiro、Copilot 等主流 CLI 编程工具。这意味着你可以在 Terminal 里直接读取、创建、修改 .op 设计文件，让 AI 编程助手在写代码之前先「看到」设计稿的矢量结构，而不只是截图或文字描述。

这对 Agent 工作流特别有意义——你的 AI 编程 Agent 现在可以引用一个带完整布局信息的设计文件来生成页面，而不是靠你去 Prompt 里描述「设计稿大概长什么样」。

设计即代码：.op 文件是 JSON

.op 文件本质上是 JSON 格式，天然支持 Git 版本管理和 diff 对比。设计变量（颜色、间距、字体大小）会生成对应的 CSS 自定义属性，导出时变成可用的样式代码。

导出格式覆盖主流技术栈：React + Tailwind、HTML + CSS、Vue、Svelte、Flutter、SwiftUI、Jetpack Compose、React Native，一份设计文件走天下。当然，实际导出代码的质量还是要看 AI 对描述的理解程度，但基础结构是完整的。

风格指南和设计系统

内置风格库，支持标签模糊匹配，glassmorphism、brutalist、retro 等风格可以一键应用到 AI 生成的设计上。同时提供 .pen 文件格式的设计系统包管理，支持组件库导入导出和风格切换，MCP 工具可以让外部 Agent 访问这些资源。

安装和使用门槛

macOS 用户用 Homebrew 一行装好：brew install --cask openpencil，Windows 用 Scoop，Linux 直接下 AppImage 或 .deb 包。也有 Web 版，不需要本地环境。CLI 工具 op 可以独立运行，支持管道输入和批处理设计 DSL。

需要注意的是，当前版本处于 pre-release 状态（v0.8.2，2026-07-25），大规模生产使用前建议看一遍 Changelog 和已知问题列表。另外，对中文的自然语言描述支持取决于所选 AI 模型，GPT-4o 和 Claude 表现较好，小模型（Qwen、MiniMax）在复杂布局描述时建议适当精简 Prompt。

适合谁 / 不适合谁

适合：想快速把想法转成可编辑 UI 原型的开发者；需要让 AI 编程 Agent 直接引用设计稿的项目团队；对设计系统有一定了解、愿意花时间调 Prompt 的用户。

不太适合：对输出像素级精确度有严格要求的资深设计师（目前阶段还做不到 Figma 级别的精细控制）；需要稳定生产级交付、不想折腾 pre-release 版本的使用者。

可执行的下一步建议

如果你是 macOS 用户，想体验这个工作流，可以 5 分钟装好跑起来：

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

打开 App 后，选一个内置的模型提供商（支持 Claude、GPT-4o、Gemini、MiniMax、Qwen 等），试着描述一个你正在做的页面的简化版，看 AI 生成的布局是否符合预期。如果你已经在用 Claude Code 或 OpenCode，可以顺手装上 MCP Server，让你的编程 Agent 学会「读设计文件」这件事。

项目地址：https://github.com/ZSeven-W/openpencil
文档（有中文版）：https://github.com/ZSeven-W/openpencil/blob/main/README.zh.md
Discord 社区：https://discord.gg/h9Fmyy6pVh

客观说，OpenPencil 还不是一个成熟度很高的产品，但它解决了一个真实问题：让 AI 设计工具和 AI 编程工具在同一个工作流里用同一种语言（.op JSON）沟通。如果你对「AI 接管设计到代码的完整流程」这个方向感兴趣，它值得放进你的观察列表。