LangChain 如何搭建设计智能体 Content Studio

上述宣传视频由内容工作室制作，这是我们设计代理机构，它可以从 Slack 中的单个提示中创建视频、社交图形、重新创建的 UI 图像、幻灯片演示文稿等。代理机构生成的每个资产都是用代码编写的。

内容工作室完全是内部构建的，基于 托管深度代理。它现在是我们公司中最广泛使用的 GTM 代理之一，但它最初并不是这样。早期的反馈……并不好。

那么，我们是如何从如此低的质量发展到这一点的？

我们已经花了四个月的时间教内容工作室我们的品味和设计原则，主要通过在全体公司面前看着它做错事来教它。

这篇文章介绍了我们的 GTM 工程团队如何与我们的设计团队合作，从头开始构建内容工作室：对我们来说好的设计意味着什么，我们如何教会代理机构我们的品味，以及它可以从静态图像到发布电影制作任何东西的 harness。

We've open-sourced our design agent. Fork the open-source repo, add your brand tokens, fonts and skills, and deploy it to your team's Slack with Managed Deep Agents.

然后加入我们在 10 月 28 日的 GTM 工程直播。我们将深入了解 harness 和 UX，并展示本文中未包含的工作。

为规模构建设计代理

LangChain 发展迅速。我们有不定期的新产品发布活动、网络研讨会、博客和活动。每个计划都需要资产，从博客标题和图表到演示文稿、视频和广告创意。我们的设计团队人手不足，重复的请求挤占了更具战略性和创新性的工作。作为一个精益初创公司，我们需要一种低摩擦的方式，让公司里的任何人都能创建高质量、符合品牌形象的工作。

为了满足这些需求，我们构建了内容工作室，这是一个存在于 Slack 中的设计代理。团队成员描述他们想要的内容，并附加相关的内容或简报，代理机构就会返回完成的、符合品牌形象的文件。为了构建内容工作室，我们需要三样东西：

1. 我们设计师的专业判断，写入代理机构的技能和检查，以便它知道什么看起来是好的。
2. 围绕模型的定制环境，包括用于设计工作每一层的视频编辑计算机和工具。
3. 正确的 UX，这样整个团队就可以在一个从 Slack 线程运行数小时的项目上合作。

托管深度代理 使我们能够在公司内部生产内容工作室：一个管理的 LangSmith 沙盒、与 Slack 的集成、管理工具、范围代理内存和调度代理运行。这允许一个小团队专注于设计工作、技能、工具和 Slack 体验，而不是管道。

关键结果

• 内容工作室在公司中交付了超过 3,000 个资产，其中包括 80 多个幻灯片演示文稿。它的一个演示文稿甚至被用于我们观看次数最多的有机 YouTube 视频。
• 包含其作品的帖子在 X 上吸引了大约 450 万次浏览。
• 在 LangChain 账户上，包含其视觉效果的帖子获得的点赞比其他帖子多约 2 倍，书签多约 3.7 倍。
• 四分之三的请求现在来自市场营销之外，75% 的用户是重复访问者，每周都会回来。
• 现在，中位数的请求在模型支出上大约花费 50 美分，而 9 月中旬大约为 8 美元。在迁移到 托管深度代理 后，我们自己的代码减少了约 80%。

AI 真的擅长设计吗？

在进入构建之前，让我们首先解决这个世纪的辩论：AI 真的能产生好的设计吗？

The model was already good at execution and could write HTML and CSS, chart specs and animation timelines. However, it didn't have our context, so it reached for familiar patterns, what Anthropic calls “distributional convergence”. The result could look polished and still look like a hundred others, or be beautifully animated and never get its point across. Familiar isn’t always bad, but we wanted our agent to make choices that followed its purpose.

Katie Dill，Stripe的设计主管，做了一个有用的比较。在二战后急于快速建设的压力下，建设者反复复制现代主义的简洁形状和裸露表面。复制品保留了外观，却失去了背后的思想和个性。她的警告是，人工智能也会对软件做到这一点。她称之为“僵尸UI”，并说我们需要一个观点，因为“如果你不这么做，人工智能会替你做到。”

我们认为人工智能在设计方面并不差。它只是在你提供观点之前没有观点，而提供我们的观点意味着教会它我们的品味。

教会设计代理品味

品味是区分正确作品和优秀作品的标准。在设计领域，两个布局可以使用正确的字体、颜色和间距，但只有一个能够传达其要点。品味来自于 Dill 所说的“非常擅长注意到细节”。

这种注意到细节的方式让我们学会了识别人工智能的粗糙之处，这通常在简报将决定留给代理时出现。

例如，下图左侧的图像是由一个本地编码代理使用我们的品牌技能（包括颜色、字体、标志等）创建的。但最终结果遗漏了关键组件，例如正确的标志锁定、文本对齐以及哪些颜色是我们的主要和次要品牌颜色。

相同的提示在内容工作室中产生了一张完全符合品牌形象的图像。这是因为本地代理用它所见最多的事物来填补简报未涵盖的每个决定。使用这种方法，内容工作室用我们的选择填补了同样的空白。

我们给内容工作室提供的指南从基础知识开始，包括颜色标记、字体权重、间距和对齐。但大部分改进来自于我们在其上添加的内容。我们引入了设计原则，例如每帧一个焦点、防止常见人工智能设计模式的护栏，以及每条反馈背后的推理。结合更好的底层模型，这些帮助内容工作室更像设计师一样思考和沟通。

它最初并不是这样的。在我们早期的一个动态图形中，一只鸟在屏幕上飞走，后面拖着一条光带，持续不到一秒。我们要求没有尖锐的边缘，但第一遍反馈回来的是笨拙的，有刺耳的、圆滑的边缘。设计师会明白我们的意思。边缘应该变柔和，而尾巴应该朝着与鸟飞行方向相反的方向变细和淡出。

到后期迭代时，代理用设计师的眼光来评估这个细节。使用快速草图来确定鸟尾巴应该在的位置，它建立了自己的逐帧检查来确保光带保持连接。大多数观众永远不会有意识地注意到这个细节，但如果有什么不对劲，他们会感觉到。

可衡量的问题是最容易解决的。默认大写字母以前经常在评论中出现，但现在自动检查可以捕捉到每一个实例。更难的决策更主观，比如一个活动想法是否足够强大，信息是否传达清楚，或者执行是否与受众产生共鸣。当设计师做出这样的决定时，我们会将推理记录在一个技能中，以便代理可以将其应用于未来的草稿。

内容工作室改变了谁可以做设计工作。产品经理、工程师或创始人可以在 Slack 中向代理简报，然后带着符合品牌并准备好发货的东西离开。现在四分之三的请求来自市场营销之外。对于设计师来说，这个角色已经转向更接近创意总监，设定方向并审查工作，而不是自己制作每个资源。

正确地获得设计判断是过程的一部分。我们也需要给代理提供工具和环境来执行它。

构建媒体 harness

设计师在几个工具之间工作，从 Photoshop 用于静态图像和一个视频引擎用于运动到用于原型设计和协作的共享画布。他们还依赖于品牌指南、设计资源和公司文档。

代理需要一个类似的环境，有电脑可以工作，有不同设计过程部分的工具，以及设计师带给他们工作的背景。Harness 将这些部分结合起来。Deep Agents 提供了底层的 harness，包括代理循环、计划、文件、子代理和上下文管理。Managed Deep Agents 打包并在生产中运行它。我们围绕它构建了环境，给代理一台电脑，它可以在其中维护项目、跨工具工作并检查结果。

harness_v1

我们那个 harness 的第一个版本试图为模型进行设计。早期的模型需要很多帮助来制作我们想要发货的运动图形或发布电影。为了弥补他们自己还无法解决的问题，我们的直觉是将更多的我们自己的设计判断放入指令和代码中。

所以，我们构建了一个包含 115 个可重用的 UI 组件的设计系统，用于标题、布局和动画，以及关于何时以及如何使用它们的指导。这给了模型一套现有的设计供其参考，减少了它必须从头开始做出的创造性决策的数量。

这帮助它保持了品牌一致性，但代理会对每一帧重复相同的布局和动画，几乎没有多样性：

我们知道模型最终会擅长这项任务，所以我们继续构建环境，为那个时刻做准备，沿途进行技能和工具的实验。有时我们会添加更多的参考或更详细的指令来帮助模型。其他时候我们会完全移除它们，看看它自己能做什么。

但结果仍然不是我们想要的，而缩小差距需要越来越多的工程工作。我们不断为技能添加规则，编写更多的运动代码，并构建更多的组件来弥补模型无法做的事情。

然后 Opus 5.5 出现了，我们看到了质量的立即提升。我们重新审视了技能，并移除了大部分硬编码的规则，保留了设计原则和高级指导。结果进一步改善，更多样化，重复更少。模型终于做出了我们之前试图预先构建的创造性决策。

这是我们苦涩的教训。为了弥补模型的弱点而设计的规则，随着模型的改进而变得不那么有用。持久的因素是模型周围的环境，包括它使用的工具、它从中获取的上下文以及人们如何指导它的工作。我们不再预先构建创意决策，而是专注于使缰绳足够灵活，以便利用每一代新的模型。

设计师的电脑

为了展示 harness 的作用，我们要求内容工作室制作一部关于它与视频项目端到端协作的影片。结果是一部以大卫·阿滕伯勒风格旁白的鹦鹉在像素丛林中的影片（配音来自 ElevenLabs）。让我们用它来浏览 harness 的各个层次：电脑、工具及其工作背景。

设计是迭代的。你制作一些东西，看看它并改变它，通常很多次。因此，代理需要一个可以在整个对话中持续工作的计算机。每个 Slack 线索都有自己的LangSmith Sandbox，一个隔离的 Linux 机器，带有文件系统和 shell，项目在该线程的整个生命周期中都存在。

代理创建的所有内容都是用代码构建的，无论是用于幻灯片的 HTML 页面、图表的数据规范，还是视频的动画时间线。这使得迭代变得容易，无需从头开始。如果有人要求早点加入鹦鹉，代理可以改变一个单一的计时值并重新渲染，而不会影响艺术品或文案。对于扁平图像或生成的视频片段，即使是小的编辑也可能意味着重新创建整个资产。

简报、计划、场景代码、音频和渲染都存放在一个项目文件夹中，所有正在工作的子代理都从这个文件夹中获取。

在顶层，我们安装了设计师在每个工作层次中会使用的工具：

运动是最难的一层。它运行在两个引擎上：

1. 用于编辑的 HyperFrames： HyperFrames，HeyGen 的开源视频框架，将视频转换为网页。片段、屏幕录制、字幕和文本只是该页面的元素，而GSAP时间线将它们移动。因此，当有人要求为网络研讨会添加字幕或剪辑产品演示时，代理就像编辑网页一样编辑它。其 CLI 基本上是代理的编辑套件：检查构图、拉取帧以检查、渲染剪辑。我们还安装了HeyGen 的官方技能，以便代理从构建它的人那里学习格式。
2. motion-studio 用于动画⟩：网页无法快速模糊运动、使事物发光或将标志转换为 3D，而我们想要的原始动画效果正是这样。因此，我们构建了自己的画布引擎。代理编写代码来绘制每一帧的每个像素，而引擎将多达 16 个时刻混合到每一个中，就像相机快门模糊运动一样。鹦鹉影片就是用这种方式制作的。

两个引擎都根据其时间戳渲染每一帧，因此十秒处的帧无论何时渲染看起来都一样。这允许代理在不渲染整部影片的情况下检查单个时刻，同时也允许我们并行渲染多个帧。音频运行在同一条时间线上，保持旁白、音乐和音效与视觉效果同步。

有了这个设置，代理可以创建几乎任何东西。但没有进一步的指导，它会默认采用模型自己的设计选择，而不是我们的。下一个挑战是教会它在我们品牌和设计标准内工作。

设计师的大脑

我们将代理的知识围绕四个不同的功能进行组织，每个功能都有明确的目的。技能指导如何执行特定任务，而维基提供了关于我们公司和良好工作标准的背景信息。任何可衡量的内容都由一个门控处理，这是一个用代码编写的确定性检查。一个单独的记忆层捕获了人们随时间教给代理的内容。

技能

代理在处理请求时首先做的是确定它的类型。这是由我们的media-production技能处理的。我们称它为 路由技能，因为它的大部分内容是一个表格。每一行将一种请求（一个活动、重新设计、缩略图、帖子、YouTube套餐、发布电影、短动画）映射到处理它的路径和专门技能。路由器还决定工作是否需要一个共享的视觉画布，并将小的编辑排除在完整过程之外。

对于上面那样的电影，路由器选择launch-film技能，该技能专为指导大型动作制作而设计。我们所有的48个技能，总共近1000个文件，都是针对工作而不是主题进行范围的，因此其描述读起来像路由规则，包括何时不使用它。

技能相互组合而不是重复。launch-film指导，motion-studio制作图片和声音，所以动画的制作只写一次。launch-film还携带它将启动的子代理的角色简报，以及一个真实的88秒发布电影的案例研究，我们逐帧用代码重建了它。该案例研究是代理学习如何将电影分割到子代理的地方。它在硬场景变化处剪辑，用一个子代理保持连续的摄像机移动，并在任何人并行工作之前冻结共享代码。

描述对工具来说和技能一样重要。为了减少上下文使用，我们将MCP工具放在内置搜索后面。代理开始时只有我们自己的工具，并根据需要加载额外的工具模式，使用工具名称和描述中的关键字搜索。

维基

技能解释如何做工作，而维基提供了做好工作所需的背景信息和参考材料。它涵盖了从品牌标记、图形语言和声音到平台、活动和产品信息的所有内容。一个专门的动作维基涵盖了导演、制作、声音和审查，以及70个参考电影的分解。

而不是在技能中重复这些信息，我们直接链接到维基。这使共享知识保持在同一个地方，并使更新更容易。当类似字体规则发生变化时，我们只需要更新一次，并且每个技能都可以参考最新版本。

了解我们的工作并不一定使动作设计更便宜。一个错误的创意决定仍然可能花费数小时的渲染时间。

基于规范的制作

动作尤其容易出错，无论是在渲染时间还是在标记上。一个故事板帧渲染大约需要50毫秒，而一秒钟的成品电影则需要8到40秒。随着子代理编写、渲染和审查每个场景，这些成本会很快累积。因此，代理首先在故事板中发展想法，在那里它可以廉价地探索不同的方向，一旦方向得到批准，再进入完整生产。

为了支持这种探索，我们给代理提供了一库参考影片供其汲取灵感，就像设计师从情绪板中获取灵感一样。当它找不到合适的视觉效果时，它使用图像模型来生成新的参考，从快速草稿开始，然后优化最有希望的选项。这些图像有助于确立视觉方向，而故事板和最终影片仍然使用真实的字体和品牌资产在代码中构建。

一旦我们确定了方向，批准的故事板就成为了其余影片构建的规范。然后项目会经历三个阶段：

1. 故事板，以确定视觉想法、文案和镜头。
2. 动态故事板，一个按音频剪辑的粗剪，以检查静止画面无法展示的节奏。
3. 制作，其中子代理构建、检查和渲染批准的镜头。

我们首先在技能的指令中描述了这个顺序，代理有时会跳过审查以节省时间。现在管道在代码中强制执行它，所以组装要等到每个部分通过审查，而指令仍然指导创意决策。必须始终遵守的顺序存储在代码中，而判断仍然保留在提示中。

指出，而不是提示

在这些方向之间进行选择是一个团队决策。Slack 非常适合请求工作并接收工作，但一个线程是线性文本，而故事板是空间的，所以反馈最终描述的是某物的位置，而不是指向它，而且每个更改，即使是一个单词的修复，也必须作为新的提示返回给代理。

Paper 为我们解决了这个问题。它是一个专为代理设计的设计画布，具有 MCP 服务器，代理可以直接控制文件。人们可以在同一个文件中工作，并逐边比较方向，在特定帧上留下评论，或自行进行编辑。由于画布是共享的，代理可以返回到文件并使用这些评论和编辑来指导其下一次迭代。

挑战在于 Paper 的代理工具只能在它的桌面应用程序中运行，而我们的代理在云沙盒中运行。为了弥合这个差距，我们在始终开启的 Linux 工作者上以无头方式运行 Paper Desktop，使用虚拟显示和认证桥接连接两者。单个设置支持整个团队。

即使批准后，将故事板转换成完成的影片也可能需要数小时。到那时，这项工作类似于一个小型项目，有多个部分并行构建，需要整合在一起。协调所有这些内容超出了单个代理轮次可以处理的范围。

代理作为首席助理

考虑一下之前的鹦鹉影片，它在 Slack 中处于生产中期。一个人分享了一个参考，另一个人建议了一个不同的开头，第三个人在第四帧上留下了反馈，而代理仍在构建。这就像一个头脑风暴，其中做笔记的人也是负责制作影片的人。同步子代理在这里效果不佳，因为主代理必须等待它们完成，从而在 meantime 没有办法让人们与之互动。

为了解决这个问题，我们将子代理改为异步的，并将主代理的角色从实施者转变为首席助理。它将复杂的项目分解成更小、隔离的任务，分配给子代理，并并行运行工作。同时，它保持团队的信息更新，以便人们可以继续提供反馈和引导项目。

对于每个任务，主代理会创建一个子代理配置文件，其中包含清晰的简报，涵盖其角色、相关上下文、文件所有权以及如何验证工作。它还根据任务的复杂性选择模型和努力程度。

我们还为主代理添加了一套小工具来协调工作：

• start_task 在后台将一部分工作交给子代理
• check_tasks 显示正在运行的内容并读取完成的报告
• cancel_task 和 resume_task 停止不再符合简报的工作，或者从上次停止的地方继续
• report_progress 允许子代理在工作过程中发送更新
• schedule_wakeup 给主代理一个计时器来触发另一次运行并继续工作

在底层，每个子代理都是作为后台任务运行的普通 Deep Agents task 工具。当它完成后，我们的代码将一个新的主代理运行队列，并携带结果。人们也可以在运行中途引导主代理，因为在其工作期间收到的消息会插入到其下一次模型调用之前。子代理通过项目文件夹进行协调，每个子代理只写入它拥有的文件，并在磁盘上保留其进度。

随着工作在后台运行，线程必须显示正在发生的事情。主代理通过计划、预计完成时间、运行中的子代理的实时状态行、渲染进度和花费、每次编辑的确认，以及在公开之前之前的批准卡片来保持其更新。

这种方法最清晰的测试来自一个通宵工作的任务，以重新设计一个包含52张幻灯片的演示文稿。代理首先创建了三个示例幻灯片，并在继续处理其余的幻灯片之前审查了自己的工作，以编号批次获得批准。它还在过程中添加了两张新的幻灯片。通宵，主代理运行了大约一个小时，而其子代理集体工作了超过六个小时，所有这些都没有阻塞对话。

自我改进的装置

一个与团队合作数月的设计师会了解其偏好，并且不需要两次听到相同的反馈。如果没有记忆，代理每次新的线程都会从头开始。为了避免这种情况，我们构建了两个学习循环。快速循环捕获人们提供的反馈，而慢速循环在后台从完成的项目中学习。

快速循环：当有人分享一条规则或偏好时，代理会在同一轮中保存它。 Managed Deep Agents 将记忆存储为普通文件，分为两层，一层在团队之间共享，另一层是每个人的特定层。

个人偏好会跨线程传递，但共享标准优先，为公司频道创建的任何内容都遵循公司声音。每一层都有一个 AGENTS.md 文件，每次模型调用时都会加载。我们现在将这些文件限制为200行的索引，因为早期版本增长到500K个标记。

慢速循环：每次工作后，我们的 learn_from_job 工具启动一个轻量级的子代理，捕获最多五个有证据支持的教训，并将它们与所使用的技能相关联。未来的工作会读取和评价那些教训，每周一次，一个后台代理会将那些被证明有用的教训整合到技能和维基中。

下一步

还记得那些早期评论吗？最大的改进来自于在一个代理可以从中学习的共享环境中捕获我们设计师的判断，而不是将其分散在评论线程中。在这个过程中，我们使设计工作对更多人开放。

接下来，我们希望代理管理整个活动生命周期，其中一些功能已经可以工作了。一旦授权的审批人签字，它会通过 Buffer 发布公司社交媒体帖子，为员工从他们自己的账户起草要分享的帖子，并运行计划好的例行程序，包括每天进行一次回顾，建议值得引用的帖子。

我们的目标是进一步推进这项工作，所以一个单一批准的创作方向可以承载整个活动从一个话题到另一个话题。代理会撰写简报，为每个渠道创建资产，安排帖子发布，帮助团队扩大影响力，并使用性能数据来指导下一个活动。在发布之前，人们仍然会审查和批准所有内容。

Build your own design agent: The open-source repo has the harness from this post: the sandbox computer, skills, wiki and memory, async subagents and the Slack UX. Fork it, add your brand tokens, fonts and skills, and deploy it to your team's Slack with Managed Deep Agents.

然后加入我们参加 10 月 28 日的 GTM Engineering Live。我们将深入了解 harness 和 UX 的内部机制，并展示本帖中未能包含的工作内容。