Moda 用 Deep Agents 打造生产级 AI 设计智能体
Moda 是一个面向非设计师（如营销人员、创始人、销售人员和小企业主）的 AI 原生设计平台。用户无需设计背景，就能创建专业级的演示文稿、社交媒体帖子、宣传册和 PDF。你可以把它想象成 Canva 或 Figma，但它有一个类似 Cursor 的 AI 侧边栏，可以直接在一个完全可编辑的 2D 矢量画布上构建和迭代设计。
Moda 的核心是一个用 Deep Agents 构建的多智能体系统，LangSmith 提供了可观测性（Observability）层，让团队能够快速迭代并自信地交付。
挑战：让 AI 擅长视觉设计
AI 代码生成效果不错，部分原因是 HTML 和 CSS 已经有了像 Flexbox 和网格这样的布局抽象。你描述的是关系和相对大小，而不是像素坐标。
视觉设计没有等效的抽象。最接近的标准是 PowerPoint 的 XML 规范，这是一个有 40 年历史的格式，充满了冗长的、绝对的 XY 坐标，而大语言模型（LLM） notoriously 不擅长处理这些。使用 XML 的工具产生的设计看起来就像其他所有 AI 生成的幻灯片。
Moda 需要一个能生成真正好看设计的系统，以及一个能够以生产质量处理复杂的、多轮次的、基于视觉的任务的智能体架构。
智能体执行框架（Harness）：基于 Deep Agents 构建
Moda 的 AI 系统由三个智能体组成：
- 设计智能体（Design Agent）： 类似 Cursor 风格侧边栏背后的主要智能体，处理画布上所有实时的设计创建和迭代。
- 研究智能体（Research Agent）： 从外部来源（例如公司网站）获取结构化内容，并存储到 Moda 内每个用户的文件系统中。
- 品牌工具包智能体（Brand Kit Agent）： 从网站、上传的品牌手册或现有幻灯片中提取品牌资产（颜色、字体、标志、品牌声音），让每个设计从一开始就符合品牌调性。
研究智能体和品牌工具包智能体都运行在 Deep Agents 上。 这些是团队最新的智能体，他们投入了大量精力。设计智能体运行在一个自定义的 LangGraph 循环上——这是在 Deep Agents 之前构建的旧实现——团队正在积极评估是否也将其迁移过来。
所有三个智能体共享相同的整体架构：一个轻量级的分类步骤，一个主智能体循环，动态上下文加载，以及在 LangSmith 中的完整追踪。
上下文工程：细节决定成败
要让一个设计智能体产生真正优秀、视觉连贯且品牌准确（不仅仅是技术正确）的输出，需要进行大量有意的上下文工程。
以下是 Moda 摸索出的经验。
自定义 DSL 而非原始场景图
构建设计智能体最困难的部分之一，是找出一种能让 LLM 有效推理的视觉布局表示方法。原始画布状态冗长、坐标密集且 token 成本高——这并不符合模型思考结构和布局的方式。
Moda 开发了一个上下文表示层，为智能体提供了一个更简洁、更紧凑的画布视图，从而降低了 token 成本并提高了输出质量。具体细节是专有的，但总体原则与让 LLM 在 Web 开发中有效的原则相同：给模型提供可以推理的布局抽象，而不是原始的数值坐标。
“LLM 不擅长数学。PowerPoint 的 XML 规范有一堆 XY 坐标——这是数据的一种很好的表示方式，但对于 LLM 来说，这不是描述它希望元素位置的好方法。” —— Ravi Parikh, Moda.app 联合创始人
Deep Agents 和 LangSmith 在这里至关重要。团队广泛使用 LangSmith 追踪来评估不同的上下文表示如何影响智能体行为，迭代决定包含哪些信息、如何构建信息，以及缓存断点在哪里对成本和延迟影响最大。
分类 → 技能（Skills） → 主循环
每个请求在到达主智能体之前，都会经过一个轻量级的分类节点（使用快速且便宜的 Haiku 模型）。分类节点确定输出格式（幻灯片、PDF、LinkedIn 轮播图、标志等），并预加载相关的技能（Skills），这些技能是包含设计最佳实践、格式指南和特定任务创意说明的 Markdown 文档。
技能作为人类消息注入，提示缓存断点设置在系统提示之后和技能块之后。这使得系统提示保持固定并始终被缓存，同时允许每个请求动态注入上下文。
主智能体也可以在循环中根据需要拉取额外的技能。分类步骤只是预先加载高置信度的技能，以避免不必要的额外轮次。
动态工具加载
设计智能体运行时，始终在上下文中保留 12-15 个核心工具。另外还有大约 30 个工具可以通过 RequestToolActivation 工具按需提供，当智能体识别出特殊需求（例如解析上传的 PowerPoint 文件）时可以调用该工具。
每个额外的工具在提示前缀中会消耗 50-300 个 token，并且加载新工具会破坏提示缓存。但计算结果是：绝大多数请求不需要额外的工具，因此保持上下文精简总体上更有利。
“如果我只看数据，大多数请求不需要激活任何额外的工具，而且只让 12 到 15 个工具保持在上下文中感觉真的很好。” —— Ravi Parikh
根据画布大小扩展上下文
并非每个请求都需要完全了解整个项目。对于较小的画布，智能体可以处理当前状态的完整视图。对于较大的项目——例如一个 20 页的幻灯片——Moda 会动态管理智能体接收多少上下文，给它一个更高级别的摘要，并让它根据需要通过工具调用拉取细节。
这使得 token 使用量保持有界，同时又不牺牲智能体在复杂、多页项目中做出明智设计决策的能力。LangSmith 按节点进行的成本跟踪使得找到上下文丰富度和效率之间的正确平衡变得简单直接。
用户体验：设计的“Cursor 时刻”
Moda 最深思熟虑的产品选择之一是交互模式。它不是生成并替换的流程（AI 产生静态输出然后移交），Moda 的 AI 直接在完全可编辑的 2D 矢量画布上工作。智能体创建的每个元素都可以立即被用户选择、移动、调整大小和设置样式。
这改变了用户和 AI 之间的关系，从“接受或拒绝”变成了真正的协作。AI 生成一个坚实的起点，用户来完善它。双方都不必完成所有工作。
类似 Cursor 的侧边栏强化了这一点：它始终存在，始终对画布上的内容有上下文感知，并且设计用于迭代式的来回交互，而不是一次性生成。对于非设计师来说，这消除了面对空白画布的恐惧，同时让他们能够控制最终结果。
通过 LangSmith 实现可观测性（Observability）
由于所有三个智能体都通过 LangSmith 进行追踪，Ravi 对每次执行都有完全的可见性。只要他在积极开发，就会一直开着它。
关键工作流：
- 提示和工具迭代： 做出更改，运行查询，立即拉取追踪以查看智能体到底做了什么以及为什么。
- 成本跟踪： token 成本按节点细分，让昂贵的步骤一目了然。
- 缓存命中分析： 考虑到动态技能和工具加载，这一点尤其重要；快速显示缓存在哪里有效，在哪里失效。
- 错误诊断： 在工具调用失败和意外的模型行为成为面向用户的问题之前，将其暴露出来。
“如果我在迭代提示，如果我在迭代工具集，我会做一个更改，运行一个查询，然后在 LangSmith 中拉出那个追踪，看看发生了什么……它让我们行动得更快。” —— Ravi Parikh
Moda 目前还没有运行正式的评估（Evals），但这已经在路线图上。目前，LangSmith 追踪是捕捉回归和验证改进的主要反馈循环。
成果与未来计划
Moda 发现其产品在 B2B 公司进行企业销售方面有很强的早期市场契合度：这些团队需要快速制作精美、品牌准确的宣传幻灯片。完全可编辑的画布和由 Deep Agents 驱动的后端相结合，意味着用户获得的是一个他们可以真正完善的、专业的起点，而不是一个他们无法更改的静态输出。
下一步计划：连接已经到位的记忆原语，完成设计智能体向 Deep Agents 的迁移，并扩展品牌上下文系统以支持多团队、多品牌的企业客户。
有兴趣构建生产级 AI 智能体吗？开始使用 LangChain Deep Agents。
觉得有用？分享给更多人