Agent Draw：基于 TLDraw 的实时语音绘图 AI Agent
Agent Draw：基于 TLDraw 的实时语音绘图 AI Agent
边说话边画图，AI 在画布上实时呈现你描述的内容。
开会演示的时候，你一边讲一边在白板上画框图--这个场景再常见不过。但如果 AI 能替你画呢？
Agent Draw 做的就是这件事：你在 TLDraw 画布上拖一个矩形区域，对着麦克风说出想要的内容，Agent 就在你说话的同时把图画好。整个交互过程不需要停止讲话，画图和演示同步进行。
项目在 Hacker News 拿了 36 分、14 条评论。评论区有人拿它做思维导图，有人说想在会议上实时映射讨论内容，还有人畅想 RSA 风格的可视化讲解视频。我翻完了项目源码和作者的完整技术文章，这篇拆解一下它的实现机制和不同模型的能力差异。
本文提纲
- TLDraw 是什么，为什么适合做 Agent 画布
- Agent Draw 的工作流程
- 技术实现：区域捕获 + 语音管线 + 绘制队列
- 模型能力对比：Opus vs Haiku vs Gemini
- HN 讨论：社区怎么用
- 局限性和扩展方向
TLDraw 是什么，为什么适合做 Agent 画布
TLDraw 是一个无限画布 SDK for React。它提供的编辑器 API，用户用鼠标能做的事，代码也能做--创建形状、移动、画箭头、调整大小。关键是这套 API 对 Agent 友好：Agent 可以像人类用户一样驱动画布。
TLDraw 自己还发布了官方的 Agent Starter Kit，通过聊天面板让 Agent 创建和排列形状，后端跑在 Cloudflare Worker 上。Agent Draw 就是基于这个 Starter Kit 构建的。
为什么选 TLDraw 而不是 Mermaid 或 Excalidraw？HN 评论区里 ldubinets（做了类似工具 shimmerdiagrams.com）说得很直接："TLDraw 作为媒介比 Mermaid 好太多了。" Mermaid 是声明式文本生成图表，TLDraw 是直接操作画布对象--后者给 Agent 的控制粒度更细，能做更丰富的视觉表达。
Agent Draw 的工作流程
整个交互分三步：
- 拖区域：用户在画布上拖一个矩形，指定 Agent 绘制的目标区域
- 说话：松开鼠标的瞬间，麦克风开启，用户用自然语言描述要画什么
- 绘制：语音转文字，LLM 理解指令，通过 TLDraw API 在指定区域内绘制
多个请求可以排队--拖几个矩形分别说话，Agent 会按顺序依次绘制。你在讲下一个的时候，上一个已经在画了。
graph LR
A["User drags rectangle"] --> B["Mic opens"]
B --> C["Speech to text"]
C --> D["LLM parses intent"]
D --> E["Draw queue"]
E --> F["TLDraw API draws shapes"]
G["User keeps talking"] -.->|concurrent| F
style A fill:#FF6B6B,color:#000000
style C fill:#4ECDC4,color:#000000
style D fill:#45B7D1,color:#000000
style F fill:#96CEB4,color:#000000
style E fill:#FFEAA7,color:#000000关键设计：绘制和说话是并发的。用户不需要等画完再继续讲，Agent 在后台处理绘制队列，用户可以一直说下去。这才是"draws while you talk"的核心体验。
技术实现：区域捕获 + 语音管线 + 绘制队列
作者在技术文章里公开了完整源码，三个核心组件：
区域捕获工具（AreaCaptureTool）
TLDraw 的工具是状态机。你继承 StateNode，定义子状态，TLDraw 把指针事件路由到当前激活的状态。Agent Draw 的区域捕获工具有三个状态：idle -> pointing -> dragging。
在 dragging 状态下，工具实时更新画布上的选择刷矩形（复用 TLDraw 原生的 editor.updateInstanceState({ brush })），在 pointerUp 时把最终矩形坐标交给捕获会话。坐标用页面坐标系，不管用户怎么平移缩放都正确。
语音录制器（AreaRecorder）
捕获开始的那一刻，麦克风打开。AreaRecorder 是浏览器 MediaRecorder 的薄封装，只暴露 start() 和 stop()，不关心 Agent 或转录逻辑。职责分离得很干净。
序列化绘制队列
多个区域的绘制请求排成队列，依次执行。每个请求包含：目标区域坐标、转录文本、LLM 生成的绘制指令。队列序列化处理，避免并发写入画布导致冲突。
后端跑在 Cloudflare Worker 上，接收音频数据，调用 LLM API，返回 TLDraw 形状指令。整个链路：音频 -> 转录 -> LLM -> 形状 JSON -> TLDraw API。
模型能力对比：Opus vs Haiku vs Gemini
这是项目最有意思的发现。作者用同一个会话给不同模型发了两个请求：画一个决策流程图，画一个打板球的人。
Claude Opus 4.8：两个都画得很好。决策流程图用基本图元（矩形、菱形、箭头）干净利落地完成。更让人印象深刻的是板球场景--Opus 直接拿起了画笔工具（pen tool），画了一个完整的板球动态场景，不是简单堆图元，是真的在画。
Claude Haiku 4.5：决策流程图跟 Opus 水平相当。但板球请求就露馅了--Haiku 没有去拿画笔，而是用基本图元拼了一个静态的简单构图，加了个标签凑数。野心和表达力都差了一个档次。
Gemini 2.5 Flash Lite：直接放弃。两个请求都草草了事，画出来的东西基本不可用。
这个对比说明一个关键问题：在需要空间推理和视觉表达的任务上，模型之间的能力差距比文本任务大得多。文本生成上，小模型可能只比大模型"差一点"；但在画布上，差距是"能画"和"画不了"的区别。
作者总结：更强的模型倾向于更有野心的构图，在画布上的布局能力也更好。这不是参数量的小差异，是能力阶跃。
HN 讨论：社区怎么用
评论区几条有价值的反馈：
eventualcomp 说他在工作中开会时就在做类似的事--实时把别人说的内容映射成心智模型。Agent Draw 让 AI 直接帮你画出来，不用自己手动整理。
3kidsinacoat 试了思维导图功能，看着分支实时生长、探索不同方向，觉得这是"AI 辅助视觉思维"的有趣概念验证。
mkolodny 的思路更远：可以用这个做 RSA 风格的可视化讲解视频（那种手绘动画配解说的形式），比手动画效率高太多。
vanditk194 从教育角度切入：辅导学生的时候如果有这个工具，边讲边画，体验会好很多。
ldubinets 做了类似工具 shimmerdiagrams.com，特别关注本地/浏览器内运行模型的可能性，认为 TLDraw 比 Mermaid 更适合做这个。
局限性和扩展方向
项目还很早期，13 Star，1 Fork，有几个明显的局限：
语言支持有限。TLDraw 原生支持矩形、菱形、箭头等基本图元和画笔工具。复杂图表（甘特图、ER 图、时序图）需要自定义形状，目前没覆盖。
实时性依赖网络。音频要上传到 Cloudflare Worker 转录和调用 LLM，延迟取决于网络和模型响应速度。本地模型方案（如 ldubinets 探索的方向）可以降低延迟但牺牲能力。
绘制精度有限。LLM 对空间布局的控制还是粗粒度的。Opus 能用画笔画场景，但精确的 UI 原型设计（像素级对齐、间距规范）还做不到。
扩展方向值得关注的几个：
- 架构图/流程图：用基本图元就能做，这是最容易落地的场景
- 教育场景：老师边讲边画，学生实时看到可视化，比 PPT 更动态
- 会议记录：实时把讨论内容映射成结构化图表
- UI 原型：结合 TLDraw 的 UI 工具包，用自然语言快速生成线框图
参考文档与链接
- GitHub: ritza-co/tldraw-agent-draw-demo - 13 Star，TypeScript，源码开放
- Agent Draw 技术文章 - 作者 James Whitford 的完整实现解析
- Agent Draw 在线 Demo - 可以直接试用
- TLDraw 官方文档 - 无限画布 SDK for React
- TLDraw Agent Starter Kit - Agent Draw 的基础框架
- Shimmer Diagrams - HN 评论区推荐的类似工具
- Hacker News 原帖 - 36 分，14 条评论
- Cloudflare Workers - Agent Draw 的后端运行环境
你觉得语音驱动画图实用吗？评论区聊聊你会怎么用。觉得有趣就点个赞让更多人看到。
作者: itech001 来源: 公众号：AI人工智能时代 网站: https://www.theaiera.cn/ 每日分享最前沿的AI新闻资讯和技术研究。
本文首发于 AI人工智能时代，转载请注明出处。
