5.6k星!世界第一个AI原生设计工具:一句话画完整UI,多个Agent同时开工

说起设计工具，大家脑子里第一反应是 Figma。说起 AI 画 UI，可能想到 v0、Bolt 这类「输入提示词生成网页」的产品。

但有个项目把这两件事捏在一起了——OpenPencil，GitHub 上 5.6k 星，自称「世界第一个开源 AI 原生矢量设计工具」。

它不是在 Figma 上加个 AI 插件，也不是 v0 那样生成一坨代码扔给你。它的核心逻辑是：你说一句话，AI 在无限画布上实时画出矢量 UI，而且多个 AI Agent 能同时处理不同区域。

更猛的是，这个项目从 Electron + TypeScript 完全重写成了纯 Rust。

先说它到底是个什么东西

OpenPencil 是一个矢量设计工具，跟 Figma、Sketch 定位类似——画布、钢笔工具、布尔运算、组件系统、自动布局，该有的都有。

但它的「AI 原生」体现在几个地方：

Prompt → Canvas：你用自然语言描述 UI，AI 实时流式生成到画布上，不是生成代码再渲染，而是直接在矢量画布上画
并发 Agent Teams：一个复杂页面会被拆成多个空间子任务（hero 区、功能区、footer 等），多个 AI agent 并行处理，画布上能看到每个 agent 的工作指示器
分层设计流：design_skeleton（骨架）→ design_content（内容）→ design_refine（精修），三个阶段逐步收敛
反 AI 味：内置跨生成多样性追踪（anti-slop），避免每次生成的 UI 都长得一样

这个定位很精准。v0 类工具的问题是：生成的代码你没法精细调整，改起来比从头写还麻烦。而 OpenPencil 是在矢量画布上操作，AI 画完你能直接拖拽修改，跟用 Figma 一样。

最有意思的：并发 Agent Teams

这是项目最大的技术看点。普通 AI 设计工具是一个模型从头干到尾，OpenPencil 不一样。

它有个编排器（orchestrator），工作流程是这样的：

你说「帮我设计一个 SaaS 落地页」
编排器把这个任务拆成空间子任务：hero 区谁来做、功能区谁来做、footer 谁来做
多个 AI agent 并行处理各自的区域
每个 agent 在画布上有自己的指示器，你能实时看到谁在干什么
冲突面板负责处理重叠和矛盾

这跟 Claude Code 的多 agent 协作思路很像，只不过一个在代码层面，一个在视觉设计层面。把一个复杂任务拆成多个并行子任务，每个 agent 只管自己那一块——这个范式正在从编程蔓延到设计领域。

从 Electron 到纯 Rust：不只是换个语言

这个项目原来是用 Electron + TypeScript 写的，后来作者做了一个决定：用 Rust 完全重写。

不是包一层 Tauri 那种，是从渲染引擎到 UI 框架全部自研。作者自己造了三个轮子：

自研项目	作用
jian	纯 Rust GPU-Skia UI 框架，替代浏览器渲染层
agent-rs	纯 Rust 异步 LLM agent 运行时
noema	本地优先的非向量编码 agent 记忆系统

效果怎么样？作者给了几组数据：

桌面端从 Electron 的完整 Chromium 运行时变成了 55.5MB 单一二进制
Web 端 WASM 包 8.2MB（gzip 后 2.18MB）
10,000 节点画布，空闲 CPU 占用接近 0%，布局快照约 0.68 秒
滚轮缩放 CPU 从 69% 降到接近 0%

没有 GC 暂停、没有 Chromium 内存开销、单一代码库编译到桌面和 Web 两端。这个决策的含金量在于：作者不是在「用 Rust 重写一个工具」，而是在搭建一套完整的 Rust AI 原生工具链。

Design-as-Code：设计文件能 Git 管理

这是我觉得对开发者最有价值的设计。

OpenPencil 的文件格式叫 .op，本质就是 JSON。意味着什么？

git diff 能看到设计变更的具体内容
设计文件可以走 code review 流程
CI/CD 可以自动检查设计变更
团队协作时合并冲突有语义，不是二进制文件冲突

而且设计变量能自动同步成 CSS 自定义属性。你定义的颜色 token、间距 token，导出时直接变成 --color-primary: #xxx，前端直接用。

这解决了一个长期痛点：设计师在 Figma 里改了一版，前端得人工对照着改代码。如果设计文件本身就是代码友好的格式，这个对齐成本就消失了。

9 种框架代码导出

从一个 .op 文件，能导出到这些平台：

React + Tailwind
HTML + CSS
Vue
Svelte
Flutter
SwiftUI
Jetpack Compose
React Native

加上画布本身可以导出 PNG/JPEG/WEBP/PDF，演示文稿能导出 PowerPoint（.pptx）和视频。

这个覆盖面相当狠。一个设计文件喂进去，前端、移动端、桌面端全平台代码出来。当然，生成代码的质量得实测，但这个方向是对的——设计到代码之间不应该有人工翻译。

多模型适配：不同模型用不同策略

OpenPencil 内置了 9+ 个 AI 提供商，但不是简单接 API 就完了。它会根据模型能力分三档调整策略：

完整层（Claude）：完整提示词 + 开启思考模式
标准层（GPT-4o、Gemini、DeepSeek）：禁用思考（这类模型思考模式对设计任务反而有干扰）
基础层（MiniMax、Qwen、Llama、Mistral）：简化嵌套 JSON 提示，降低提示复杂度

还支持中国厂商：Kimi、智谱、GLM、DouBao、Ark、Bailian/DashScope、ModelScope。

这个分级策略说明作者真的试过不同模型在设计任务上的表现差异，不是无脑接 API。思考模式对设计任务是加分还是减分，这本身就是个有意思的问题。

MCP Server：从终端控制设计

OpenPencil 内置了 MCP Server，一键安装到 Claude Code、Codex、OpenCode、Kiro、Copilot CLI。

装上之后你在终端里可以：

op start                          # 启动桌面应用
op design @landing.txt            # 从文件批量设计
op insert '{「type」:「rectangle」}'  # 插入节点
op import:figma design.fig        # 导入 Figma 文件
cat design.dsl | op design -      # 从 stdin 管道输入

也就是说，你可以让 Claude Code 直接操作 OpenPencil 的画布——AI 写代码的同时也在画 UI。设计工具从 GUI 操作变成了 CLI 可编程的对象，这个思路跟整个 AI 编程生态是打通的。

还有个 Chrome 扩展，能把任何网页快照成 .op 文件。看到好看的网页，一键抓回来在 OpenPencil 里改。

实话实说：四个要注意的点

跟 Figma 比生态差距明显。Figma 的插件市场、社区资源、模板库是多年积累的，OpenPencil 的插件系统还在路线图上
协作功能是新功能。P2P 协作刚上线，跟 Figma 的实时协作成熟度有差距
5.6k 星是个年轻项目。2810 个 commits、作者 ZSeven-W 一人主导（有一个赞助商 MrQyun），长期维护能力需要观察
生成的代码质量待验证。9 种框架导出听着很全，但实际前端项目能用多少、需要多少手改，得拿真实项目测

写在最后

OpenPencil 让我感兴趣的不是某个单一功能，而是它代表的趋势：

AI 原生工具不是在旧工具上加 AI 按钮，而是从架构层面为 AI 工作流重新设计。

并发 Agent Teams、Design-as-Code、MCP 集成、多模型分级适配、反 AI 味设计——每个点都在解决「AI 生成内容」和「专业工作流」之间的摩擦。而这个摩擦，正是当前 AI 落地最大的障碍。

更值得注意的是，这套东西是纯 Rust 搭的。作者同时在维护 jian（UI 框架）、agent-rs（agent 运行时）、noema（记忆系统）、Zode（AI 终端），这几个项目能互相组合。一个人在搭一套 Rust AI 原生工具的底层基建，这个野心比单个设计工具大得多。

设计工具可能只是第一个落地点。

项目地址：https://github.com/ZSeven-W/openpencil

官网：https://op.zseven.tech

Discord：https://discord.gg/h9Fmyy6pVh

License：MIT，商用友好。