在 OpenPencil（一个开源矢量设计工具）的 AI 设计生成功能中，我实现了一套多智能体编排系统（Agent Team）。用户输入一句话描述，系统会自动将其拆解为多个子任务，分配给不同的 Sub-Agent 并行生成，最终在画布上实时呈现完整的 UI 设计。
本文将从架构设计、核心实现、并发控制、流式渲染等角度，详细拆解这套系统的实现过程。
单 Agent 的瓶颈
最初的设计生成是”一锅端”：把整个 UI 描述扔给一个 LLM，让它一次性输出所有节点。问题很快暴露：
- 上下文爆炸：一个完整的 Landing Page 可能包含 100+ 节点，LLM 在后半段容易”遗忘”前面的设计约束
- 速度太慢：复杂页面需要 30-60 秒才能完成，用户盯着空白画布等待
- 错误传播：一个区域出错（比如 Hero 排版溢出），后续所有区域都会受到影响
- 无法并行：单次 API 调用是串行的，无法利用多路并发加速
Agent Team 的思路
借鉴软件工程中的分治策略：
每个 Agent 只负责一个空间区域，互不干扰，独立生成，最终合并到同一个画布。
整个 Agent Team 的执行分为 5 个阶段：
GPT plus 代充 只需 145
第一阶段用一个轻量级的 Orchestrator Agent 将用户的设计描述拆解为多个空间子任务。这个 Agent 不做任何实际的设计生成，只做"分活"。
Orchestrator 的 system prompt 经过精心设计，只做一件事——结构化分解：
GPT plus 代充 只需 145
输出是一个严格的 JSON 结构：
这里有几个关键的设计决策：
1. 元素边界（Element Boundaries）
每个子任务必须声明自己负责哪些 UI 元素，且元素不能跨子任务重叠。这是防止"两个 Agent 同时生成了提交按钮"这类冲突的关键：
GPT plus 代充 只需 145
2. 统一的 Style Guide
Orchestrator 生成一份全局色板和字体方案，所有 Sub-Agent 共享这份 Style Guide。这保证了即使多个 Agent 并行工作，最终产出的颜色和风格也是一致的。
3. 空间区域（Region）
每个子任务带有目标区域尺寸（宽高），Sub-Agent 据此控制内容量，不会生成过多或过少的节点。
根据 Plan 在画布上创建根容器。对于并发模式（多屏设计），系统会为每组屏幕创建独立的根 Frame：
这是最复杂也最精彩的部分。每个子任务会被分配给一个 Sub-Agent，以 JSONL 流式格式输出 PenNode 节点。
ID 命名空间隔离
这是并发安全的核心机制。每个 Sub-Agent 的所有节点 ID 必须带上所属子任务的前缀：
GPT plus 代充 只需 145
这样即使两个 Agent 都生成了 的节点，实际写入画布的是 和 ，不会冲突。
流式 JSONL 解析
Sub-Agent 输出的格式是 JSONL（每行一个 JSON 节点），通过 字段表达树形关系：
流式解析器在每个 token 到达时就尝试提取完整的 JSON 对象：
GPT plus 代充 只需 145
每个节点在解析出来的瞬间就**入画布，用户能看到 UI 元素像"打字机"一样逐个出现。
并发控制：信号量 + 屏幕分组
并发执行使用了一个手动实现的信号量（Semaphore）来限制同时进行的 API 调用数：
同一屏幕内的子任务仍然串行执行（保证 Navigation → Hero → Features 的顺序），不同屏幕之间并行执行：
GPT plus 代充 只需 145
为什么不全部并行？因为垂直布局的页面，上下区域的视觉连贯性很重要。如果 Footer 比 Hero 先生成完毕，用户看到的就是颠倒的页面。
Phase 4：后处理
所有 Sub-Agent 完成后，执行后处理：
- ：根据实际内容调整根 Frame 高度
- ：应用基于树结构的启发式规则（按钮宽度、Frame 高度、clipContent 等）
- ：自动缩放画布以展示完整设计
利用 Vision API 对生成的设计截图进行自动校验，检测并修复视觉问题：
在并发模式下，多个 Agent 同时在画布上工作。为了让用户直观地看到"谁在画什么"，我设计了一套 Agent Identity 系统：
GPT plus 代充 只需 145
每个 Agent 在画布上的节点会显示带颜色的标记和名字（比如紫色的 "Pixel" 正在生成 Features 区域），Sub-Agent 完成后标记自动淡出：
标记通过 上的共享 Map 管理，避免了 Vite 模块分割导致的状态隔离问题：
GPT plus 代充 只需 145
用户在聊天面板中能看到每个 Agent 的实时状态，这通过 标签协议实现：
聊天面板解析这些 标签渲染为一个 Checklist UI：
GPT plus 代充 只需 145
Sub-Agent 的 prompt 构建是整个系统中最需要精心打磨的部分。每个 Sub-Agent 收到的上下文包含：
1. 全局上下文（知道整体结构但不越界）
输出效果：
GPT plus 代充 只需 145
根据内容特征动态注入额外约束，而非一次性塞入所有规则：
GPT plus 代充 只需 145
这种按需注入策略避免了 prompt 膨胀——一个简单的导航栏不需要看到 20 条表格排版规则。
Agent Team 系统的健壮性来自多层容错：
1. Orchestrator 失败 → 启发式降级
如果编排 Agent 无法返回有效的 Plan，系统会根据用户 prompt 启发式地生成一个默认 Plan：
如果流式 JSONL 解析器没有提取到任何节点（可能是 LLM 输出格式偏差），在流结束后尝试批量解析：
GPT plus 代充 只需 145
某个 Sub-Agent 超时或报错时，只有该区域标记为 error，其他已完成的区域正常保留：
通过 实现优雅的中断——已生成的节点保留在画布上，只是停止后续生成：
GPT plus 代充 只需 145
与 LLM 的长连接需要精心的超时管理：
服务端每 15 秒发送一次 keep-alive ping，防止 SSE 连接被中间代理切断：
GPT plus 代充 只需 145
超时时长根据 prompt 长度动态调整——简短的 "login page" 不需要和复杂的 "电商平台首页" 用同样的超时：
编排 Agent 只做分解，不做任何设计决策。它的输出是结构化的 JSON Plan，而非自然语言。这使得解析稳定、执行确定。
相比让多个 Agent "互相通信"，完全隔离 + ID 命名空间是更可靠的并行策略。每个 Agent 看到全局结构（知道自己是哪个区域），但无法影响其他 Agent 的输出。
用户体验的关键在于感知速度。即使总时间没变，逐个节点出现比等 30 秒后"砰"一下全出要好得多。但流式解析必须有批量回退兜底，因为 LLM 输出格式不总是完美的。
根 Frame 的高度在生成过程中只会增长，不会缩短。这避免了"画布抖动"——内容一多一少地跳来跳去。只在所有 Agent 完成后才做最终的高度调整。
这看起来是个小功能，但 Agent Identity（颜色 + 名字）极大提升了用户对并行过程的理解和信任感。用户能看到 "Kiki 正在画导航栏"、"Mochi 在画 Hero"，而不是一堆节点不知道从哪冒出来。
GPT plus 代充 只需 145
实现一个 Agent Team 系统，核心挑战不在于”调 API”，而在于：
- 任务分解的质量 — Orchestrator 的 prompt 决定了整个管线的上限
- 并发安全 — ID 隔离 + 信号量，比锁更适合前端场景
- 流式体验 — JSONL 增量解析 + 实时画布渲染 + 动画
- 优雅降级 — 每一层都有 fallback，部分失败不影响整体
- 可观测性 — Agent Identity + 进度 Checklist，让黑盒变透明
这套架构已经在 OpenPencil 中稳定运行，支持 1-6x 并发度，能在几秒内生成包含 100+ 节点的复杂 UI 设计。
如果你对设计工具、AI 生成或多 Agent 系统感兴趣，欢迎查看 OpenPencil 的源码，所有代码都是开源的。
OpenPencil 是全球首个开源 AI 原生矢量设计工具，也是业界首个实现并发 Agent Team 协作生成的设计工具。
核心特性：
- AI 原生设计 — 输入一句话，多个 AI Agent 协作在画布上实时生成完整 UI，支持 1-6x 并发
- Design-as-Code — 设计即代码，一键导出 React + Tailwind / HTML + CSS，设计变量自动生成 CSS Variables
- 专业矢量编辑 — 基于 Fabric.js v7，支持 Frame、Auto Layout、布尔运算、钢笔工具、智能参考线等专业功能
- 设计变量系统 — 完整的 Design Token 管理，支持多主题轴（Light/Dark、Compact/Comfortable）
- Figma 导入 — 直接解析 文件，无需通过 API
- MCP Server — 内置 MCP 服务器，可被 Claude Code、Cursor 等 AI 工具直接调用
- 全平台桌面端 — 基于 Electron，支持 macOS、Windows、Linux，含自动更新
如果觉得有用，欢迎去 GitHub 点个 Star 支持一下！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/233806.html