ai for designersApril 28, 202614 min read

AI代理UI设计模式:如何构建自主工具的界面

一个用于 AI 代理 UI 设计的工作模式库。包含来自 Claude Code、Cursor、Devin、Linear、ChatGPT Operator、Replit Agent、Bolt 和 v0 的八个真实产品拆解示例,以及每个代理界面都需要的七种模式。

By Boone
XLinkedIn
ai agent ui design patterns

AI 代理的 UI 设计并非简单地在聊天界面上添加自主功能。代理是一个自主工作者,它接收目标、规划路径,并在每一步都无需请求许可的情况下运行工具。对于这个工作者而言,界面是一个控制界面,而非对话界面。那些提供最简洁代理 UI 的产品,从最初的线框图设计开始就秉持着这样的理念。

所有值得使用的代理 UI 都包含七种基本模式:任务框架、自主控制、规划界面、进度流、确认门、错误恢复和代理交接。如今大多数产品只实现了其中四种,而忽略了其他三种。其结果是,界面演示效果出色,但在实际使用中却漏洞百出。

本文旨在解决这一实际问题。七种模式,八种拆解分析(分别来自 Claude Code、Cursor、Devin、Linear AI、ChatGPT Operator、Replit Agent、Bolt 和 v0),三个常见 bug 及其精确修复方案,以及一份十五分钟的发布前检查清单,任何设计师都可以在用户界面正式上线前运行此清单。

智能体用户界面是控制界面,而非聊天窗口

AI 智能体用户界面是自主工作者的界面。其设计问题更接近于驾驶舱而非聊天线程。用户不再是来回输入文字,而是设定目标并监督流程。

聊天用户界面优化的是轮流发言。而智能体用户界面则优化的是目标清晰度、计划可见性、进度遥测和覆盖功能。大多数早期智能体产品都犯了同样的错误,它们只是在聊天功能的基础上添加了一些“思考”指示器和工具使用日志。用户盯着聊天记录,既看不到计划,也无法暂停运行,更无法在代理程序偏离轨道时进行恢复。将代理程序用户界面视为控制界面,以下七种模式就不再是可选项,而是必不可少。

每个代理程序用户界面都需要的七种模式

任务框架、自主度滑块、计划界面、进度流、确认门、错误恢复和代理程序交接。如今所有代理程序用户界面都是这七种模式的某种组合。

任务框架是指用户如何描述目标。自主度控制是指用户如何选择代理程序的权限。计划界面是代理程序在执行操作之前确认一系列步骤的地方。进度流是代理程序当前操作的实时信息流。确认门是执行破坏性操作前的短暂延迟。错误恢复是从失败步骤中恢复的路径。代理程序交接是指在不丢失上下文的情况下,将任务从代理程序移交给用户或从一个代理程序移交给另一个代理程序的状态转移。

工作室地板上水平排列着七个小型重型方块的体素图,每个方块颜色各异,色调柔和,并附有单字标签,分别代表:框架、自主性、计划、进度、确认、恢复、交接。
工作室地板上水平排列着七个小型重型方块的体素图,每个方块颜色各异,色调柔和,并附有单字标签,分别代表:框架、自主性、计划、进度、确认、恢复、交接。

这七个要素的重要性不相等,但都必不可少。如果产品只提供任务框架而没有计划界面,那就如同在玩猜谜游戏。如果产品只提供确认环节,则如同埋下隐患,随时可能发生灾难。这些模式会不断叠加,任何一个环节的缺失都会削弱其他环节。

任务框架设定契约

糟糕的任务框架就像一个通用的聊天框,用户输入一句模糊的句子,然后系统根据假设填充其余部分。优秀的任务框架则是一个结构化的输入,明确询问系统需要了解的具体信息。

Linear 的 AI 功能在这方面表现出色。用户输入简短的描述,AI 会将其解析为一个结构化的问题,包含标题、描述、标签和项目分配,用户可以在提交前进行编辑。框架结构清晰,输出结构明确,并且在提交前提供了清晰的编辑选项。

框架界面应该像任务本身一样结构化。编码任务需要目标、目标文件和验收标准。Web自动化任务需要起始URL、目标操作和停止条件。通用聊天输入适用于探索阶段,但不适用于生产环境。

自主控制让用户掌控权限

信任并非一成不变,单一设置无法涵盖所有​​任务。

Claude Code 通过其权限系统实现了这一点。用户可以选择两种模式:一种模式下,每次工具调用都需要审批;常用工具自动审批;高风险工具仍需审核;另一种模式下,则完全自主运行。该模式可见,可在会话期间切换,用户能够准确了解代理当前处于哪种权限状态。

大多数产品仅内置一个自主设置,没有针对每个任务的控制,也没有可见的状态。用户无法预知代理是否会在部署、删除或发送电子邮件前征求用户意见。这种不确定性导致用户要么过度依赖,要么盲目信任。这两种模式都会导致失败。

计划界面是智能体的第一个承诺

在智能体执行操作之前,它必须展示其意图。计划必须易于阅读、编辑和拒绝。

Devin 发布了最早一批可用的计划界面之一。智能体生成计划,用户可以在线编辑任何步骤、删除步骤、添加步骤或拒绝整个计划。一旦获得批准,计划就会变成执行日志,智能体执行的每个步骤都会被点亮。计划界面和进度流是同一个界面,只是处于两种状态:运行前和运行中,这是正确的架构选择。

工作室地板上并排堆叠的两个表面构成了一个体素图像,左侧是一排垂直排列的平面图块,上面有一个复选框符号;右侧是一列高高的进度条,像实时日志一样向下滚动。
工作室地板上并排堆叠的两个表面构成了一个体素图像,左侧是一排垂直排列的平面图块,上面有一个复选框符号;右侧是一列高高的进度条,像实时日志一样向下滚动。

一个常见的错误。有些产品将计划显示为一段文字,而不是结构化的列表。计划实际上无法编辑,这意味着用户要么盲目批准,要么需要重新提示。解决方法是机器结构化:一个离散步骤的列表,每个步骤占一行,每一行都可编辑。

进度流是信任循环

代理正在运行,用户正在等待,因此进度流是用户决定终止运行的唯一屏障。

Cursor 的代理界面很好地解决了这个问题。当代理编辑文件时,差异会实时显示在编辑器中。当它运行命令时,终端输出会实时显示。用户可以随时停止查看,并在之后返回查看完整的日志。由于进度流真实可靠,信任过程很短。

相比之下,有些代理会以聊天式的摘要形式显示“我正在考虑下一步”,同时在后台悄悄运行十个工具调用。这种摘要只是个幌子。应该将每个工具调用和文件编辑都记录在结构化的日志中,并将模型的推理过程压缩成每一步的一行摘要。混淆这两者会破坏信任。

确认机制保护破坏性操作

有些操作无法撤销,因此用户界面必须故意让这些操作过程缓慢一些。

ChatGPT 操作员在开放网络上处理此类操作。当代理即将提交表单、填写支付信息或执行涉及账户的操作时,它会暂停并要求用户批准、修改或取消。暂停过程清晰可见,操作说明以纯文本形式呈现,用户可以手动接管浏览器会话。

工作室地板上放置着一个由体素构成的厚重珊瑚拱门,拱门底部有两个体素按钮:一个绿色的“确认”立方体和一个较小的琥珀色“取消”立方体。拱门另一侧有一个小小的特工符号,静止不动。
工作室地板上放置着一个由体素构成的厚重珊瑚拱门,拱门底部有两个体素按钮:一个绿色的“确认”立方体和一个较小的琥珀色“取消”立方体。拱门另一侧有一个小小的特工符号,静止不动。

大多数产品犯的错误是对所有操作的确认权重相同。要么所有操作都设置了确认机制,导致用户在未阅读的情况下点击通过;要么完全不设置确认机制,任由代理造成不可逆转的损害。应将操作分为三种强度:可逆写入操作采用软性确认(30 秒撤销横幅);破坏性操作采用硬性确认(确认弹窗);灾难性操作采用两步确认(弹窗加输入确认语句)。

错误恢复是产品成功的一半

代理会不断出现故障,而那些让人感觉可靠的产品,并非那些成功率最高的产品,而是那些拥有最简洁的恢复机制的产品。

Bolt 和 v0 在这方面做得很好。当构建失败时,错误信息会直接显示在代码中,代理会尝试修复,用户可以选择让它迭代修复,也可以直接跳转到代码进行编辑。状态会在多次尝试之间保持不变。

大多数产品在这方面都存在缺陷。一旦发生错误,代理就会停止运行,用户会收到“出了点问题,要不要我再试一次?”的提示,却完全不知道系统处于什么状态。每个错误都需要清晰的状态信息、一组恢复选项(重试、编辑、接管、放弃)以及状态保持保证。错误是代理在实际使用中的典型体验,而不是罕见事件。

代理交接需要记录

当任务从代理移交给用户,或从代理移交给代理时,接收方需要完整的状态信息,而无需询问。

Linear 的 AI 功能通过将结构化更新写入问题来解决这个问题。下一个团队成员可以直接获取完整的上下文信息。无需单独的仪表板,也无需额外的工具。每次交接都应生成一个状态转储工件(结构化注释、生成的简报、已保存的检查点),接收方可在 30 秒内阅读完毕。如果接收方需要询问“你上次做到哪儿了”,则交接失败。任何可重用的工作流都应遵循同样的原则。

八个真实的代理 UI,附注释

只有当这些模式在最终产品中得到验证时,它们才有意义。目前有八个正在生产环境中使用,每个都很简洁,但没有一个是完美的。

Claude Code,代理 UI 作为透明终端

Claude Code 是迄今为止最简洁的代理 UI,因为它将终端视为界面,并且拒绝隐藏代理正在执行的操作。每个工具调用都会输出到终端,每次文件编辑都会显示差异,每个命令都会显示其输出。它的优势在于诚实。不足之处在于:计划界面是 Markdown 格式,无法像结构化列表一样进行编辑。

Cursor,智能体 UI 作为环境式结对编程

Cursor 的智能体在你需要它之​​前几乎隐形,这体现了智能体 UI 设计的最高境界。小的修改会立即显示差异。多文件重构会显示计划。其优势在于存在感校准:Cursor 会根据任务调整智能体的可见性。不足之处:对于复杂的重构,计划界面更接近聊天记录,而非可编辑的任务列表。

Devin,智能体 UI 作为工作空间展示平台

Devin 展示了智能体的完整工作空间,包括实时浏览器、终端和编辑器。其理念是透明性比抽象化更能快速建立信任。结构化的可编辑计划从一开始就可见。整个工作空间就是进度流。用户可以在任何层级接管。其优势在于完全可见性。不足之处:对于简单的任务,工作空间略显臃肿。

Linear AI,代理 UI 作为内联助手

Linear 的 AI 功能集成在现有的 Linear 界面中,这对于嵌入式代理来说是理想的模式,它们应该像队友一样,而不是一个独立的应用程序。AI 返回结构化的工件(问题、评论、状态更新),这些工件存在于现有的流程中。其优势在于嵌入式设计。不足之处在于:多步骤自主任务需要一个计划界面和一个进度流,Linear 尚未发布。

ChatGPT Operator,代理 UI 作为受监管的浏览器

Operator 运行在一个沙盒浏览器中,用户可以观看、暂停和接管操作,这对于需要访问开放网络的代理来说是理想的模式。实时浏览器就是进度流。支付和账户操作是其关键节点。其优势在于受监管的浏览器模式本身,它以速度换取了信任。它们的不足之处在于:计划界面位于聊天窗口中,与进度流脱钩,这使得运行过程中进行调整比预期更加困难。

Replit Agent、Bolt 和 v0,代理 UI 作为构建画布

Replit Agent、Bolt 和 v0 都采用了相同的模式:左侧显示提示信息,右侧显示实时预览,代理的工作在两者之间进行。用户描述要构建的内容,代理运行直到显示预览为止。它们的优势在于构建画布,它将“为我构建一个应用”这一抽象任务具象化。它们的不足之处在于:Replit Agent 在其代理线程中隐藏了过多的状态。Bolt 为复杂应用提供的计划界面过于单薄。v0 在多组件编辑时的迭代循环更接近聊天而非结构化的计划。Lovable 与之类似,提供了更强大的计划界面,但进度流却略显薄弱。

想要一个在第一次运行就赢得用户信任的代理 UI,而不是需要运行十次才能赢得信任?聘请 Brainy AppBrainy 为构建自主工具的团队提供代理产品 UI,而 ClaudeBrainy 则提供 Claude 技能 和提示库,确保在 UI 需要进行任何调整之前,代理层就能正常运行。

三个常见的代理 UI 问题及其修复方法

大多数代理 UI 都存在三个相同的问题,而且修复方法并不简单。

首先,代理会隐藏计划。产品会接收一个目标,在后台运行并报告结果。用户无法查看计划,无法查看进度,也无法停止运行。修复方法:在执行之前显示一个结构化的可编辑计划,即使只有两行。代价是占用 20 个像素的 UI 空间。好处是用户可以在代理发出错误结果之前进行纠正。

其次,代理会确认所有操作。产品会用模态框来限制每个操作,这会让用户养成不阅读就点击的习惯。等到出现需要执行的破坏性操作时,用户可能也会点击跳过。修复方案:将操作分为可逆操作、破坏性操作和灾难性操作。仅对后两种操作进行限制,并允许可逆操作运行,同时提供 30 秒的撤销提示。

第三点:隐藏故障的代理。产品会默默重试、吞噬错误,或者报告“出了点问题”,但并不说明具体原因。修复方案:公开每个错误,包括故障点、系统状态和具体的恢复选项。信任源于坦诚的失败,而非隐藏的失败。

每次修复并非重新设计。它只是对单个界面进行添加或移除,直到现有模式能够正常工作。大多数代理 UI 缺陷都是伪装成设计问题的模式问题。

十五分钟发布前检查清单

在任何代理 UI 接触真实用户之前运行此清单,即可发现生产环境中容易失效的模式。

  1. 任务框架。输入一个典型的目标。输入是否提供了足够的结构,以便代理能够执行相应的操作?

  2. 自主性可见性。你能在一秒钟内无需询问就判断出智能体将要执行的操作吗?

  3. 计划界面。运行一个非简单的任务。智能体是否会在执行操作前显示一个结构化的可编辑计划?

  4. 进度透明度。工具调用和文件编辑是否可见,还是信息流以聊天式摘要的形式呈现?

  5. 暂停功能。尝试暂停正在运行的智能体。暂停按钮是否可见且易于操作?

  6. 确认机制。可逆操作是否可自由执行,破坏性操作是否通过模态窗口进行限制,灾难性操作是否需要输入确认信息?

  7. 错误可见性。强制执行失败。用户界面是否会显示错误状态和恢复选项?

  8. 撤销功能。在可逆操作执行后 30 秒内,是否有清晰的撤销路径?

  9. 状态保存。如果某个步骤失败,是否需要重试。之前的工作是否被保留?

  10. 交接机制。在任务运行过程中停止任务。是否有状态转储文件供后续人员接手?

  11. 工具使用日志。日志结构是否清晰且机器可读?还是将推理过程和操作混杂在一起?

  12. 终止开关。它是否始终可见?还是隐藏在设置菜单中?

通过以上十二项测试的产品拥有功能完善的代理用户界面。用户将了解代理正在执行的操作以及如何停止它。

常见问题解答

什么是 AI 代理用户界面设计?

AI 代理用户界面设计是一门为自主 AI 工作者构建界面的学科。这些工作者能够获取目标、规划步骤并运行工具,而无需逐步审批。与聊天用户界面不同,代理用户界面是具有七个核心模式的控制界面:任务框架、自主控制、规划界面、进度流、确认门、错误恢复和代理交接。

AI 代理用户界面与聊天机器人用户界面有何不同?

聊天机器人用户界面假定用户进行逐回合对话。而代理用户界面假定代理在后台运行,执行多个工具调用、修改状态,并在需要人工干预时向用户报告。智能体用户界面需要聊天用户界面所不具备的规划界面、实时进度流、确认门和终止开关。

设计人工智能智能体界面的关键模式是什么?

七种模式:任务框架、自主控制、规划界面、进度流、确认门、错误恢复和智能体交接。这些模式根据任务进行调整,根据信任度进行校准,并由模型层上的 上下文效率 紧密支持。

哪些人工智能智能体产品拥有最佳的用户界面设计?

Claude Code 在透明度方面胜出。Cursor 在存在感校准方面胜出。Devin 在工作区可见性方面胜出。Linear AI 在嵌入方面胜出。ChatGPT Operator 在监督执行方面胜出。Replit Agent、Bolt 和 v0 在构建画布模式方面胜出。没有哪款产品能够完全发挥所有七种模式的优势,因此该类别目前仍处于竞争激烈的阶段。

如何在代理用户界面中平衡自主性和控制力?

将自主性设置为每个会话、每个任务、每个工具中可见且可调整的设置。将操作分为可逆操作(可撤销,可自由运行)、破坏性操作(通过模态框进行限制)和灾难性操作(通过文本确认进行限制)。在执行前显示计划,并在执行过程中显示进度。允许用户随时暂停、接管或终止运行。信任度取决于控制权限,而不是隐藏的复杂性。

代理用户界面真正带来的变革

代理用户界面并非在聊天产品上附加自主性功能,而是一种全新的交互模型,而那些以这种方式对待代理用户界面的产品才能最终胜出。

大多数团队将代理用户界面视为聊天功能之上的一个附加功能。他们获取一个聊天线程,添加一个“思考”指示器,随意添加几个工具使用气泡,然后就称之为代理。结果就是一个延迟更高的聊天机器人。聊天中的任何故障模式都会加剧,因为代理现在运行时间更长,故障造成的损害也更大。

这种转变是将智能体视为自主工作者,并将用户界面视为工作者的控制界面。聊天线程成为一个更大界面中的一个元素,该界面包含计划看板、进度流、自主开关、确认模态框、错误控制台和交接组件。用户不再是智能体的对话伙伴,而是智能体的管理者。

如果你的团队交付的智能体要么需要用户过度监管,要么用户盲目信任,那么问题几乎总是出在模式上。解决方案是将上述七种模式根据任务进行调整,并针对信任度进行校准,然后嵌入到真正的 AI设计工作流程 中,而不是简单地附加上去。

如果你想要一个在第一次运行而不是第十次运行就能赢得用户信任的智能体用户界面,请使用 聘请 Brainy。AppBrainy 为构建自主工具的团队提供完整的智能体产品用户界面。ClaudeBrainy 提供 ⟦品牌0⟧ 工作流、技能包和提示库,这些库能够正确处理智能体层,从而使用户界面无需进行任何调整。

Want an agent UI that earns trust on the first run, not the tenth? Brainy ships ClaudeBrainy as a Skill pack and prompt library, and AppBrainy ships full agent product UI for teams building autonomous tools they want their users to actually use.

Get Started

More from Brainy Papers

Keep reading