为被 Agent 注视而设计

屏幕背后的用户不再只有一个人。当人类在读标题时,AI agent 正在解析 DOM、给按钮命名、评判选择器,并决定你的产品是不是它可以替别人操作的东西。只为一个用户做设计,是 2024 年的奢侈。

这个转变是结构性的,不是表面功夫。Cursor 在调用你的按钮。Claude 在读你的截图。Anthropic Computer Use 在点击你的表单。OpenAI Operator 在你的结账页上下单。人类触碰的每一个界面,agent 现在也在触碰,而且它对“好”的判断标准完全不同。

两类受众,一块屏幕

2026 年的每个产品界面,都有一个人类平面和一个机器平面,叠在同一个 DOM 里。

人类平面是设计师一直在交付的东西:流程、品味、层级,以及按钮名副其实时用户感受到的信任。机器平面是同一个界面,被另一类用户阅读:稳定的选择器、有名字的 affordance、语义化 HTML、机器可读的状态,以及 agent 能无歧义解析的结构。

大多数团队的错误,是以为这两个平面只是同一个平面的不同优先级。不是的。一个按钮在人眼里可能完美无缺,但如果它的可访问名称是“click here”,或者它的 DOM 节点只是一个带点击处理器的 div,那它对 agent 来说就是隐形的。

agent 注视显现的五个层级

Agent 注视是一个技术栈。五个层级,每一层都是人类平面与机器平面要么对齐、要么打架的地方:工具界面、选择器稳定性、机器可读结构、状态可读性、信任信号。每个为双用户设计的产品,都在这五层上做决定,哪怕它们并不这么称呼。

第 1 层:工具界面是 agent 调用的有名按钮

工具界面,是 agent 可以按名称调用的任何产品能力。Cursor 的工具调用、Claude 的工具使用、Anthropic Computer Use 的屏幕操作、Vercel Sandbox 的运行命令。agent 不以像素思考,它以有名字的动词思考。

你产品里的每个主要操作,都是候选的工具界面。Stripe 是黄金标准,比 agent 时代早了几十年:每个操作都有命名清晰、文档完备、行为可预测的 affordance。customers.create 就是名字所说的那件事。一个主要操作都埋在无标签按钮里的产品,agent 不靠猜就没法驱动。

设计动作是把每个重要操作都当作一个有名字的工具。标签、ARIA 描述、路由、API 端点,以及 Model Context Protocol 处理器,都应该使用同一个动词。这样 agent 和人类就能从不同的门走向同一个 affordance。

第 2 层:选择器稳定性是设计师与 agent 的契约

2024 年,设计师可以交付 <div onClick={handle}> 然后收工。2026 年,同一个 div 会在有人重构外层容器的那天,打破所有 agent 集成。

选择器稳定性,就是确保 agent 昨天学会的 affordance 明天依然有效。三个决定:有语义化 HTML 的地方就用它,用 <button> 而不是 <div>。给 agent 或测试运行器需要找到的一切东西加上 data-testid。在各个版本之间保持可访问名称稳定,就像你保持 API 字段名稳定一样。

Linear 在这方面出奇地好,因为 Linear 从一开始就是 API 优先,UI 只是众多界面之一。每个主要操作都有稳定的选择器和稳定的名称。大多数企业 SaaS 在一次重构里换个类名,就悄悄打破了所有碰过它的集成。agent 不会收到弃用通知,它只是不再工作了。

第 3 层:机器可读结构是你过去跳过的设计产物

阅读你产品的 agent,同时也在读你的 Open Graph 标签、JSON-LD、站点地图,以及越来越多的 llms.txt 和 AGENTS.md 文件。这些在 2026 年都是设计产物,而不是开发的杂活。

AGENTS.md 是新的 README,只不过读者是模型。它告诉 agent 你的产品做什么、哪些界面是安全的、哪些约定重要。JSON-LD 告诉 agent 每个页面是什么。Model Context Protocol 端点告诉 agent 你的产品暴露了哪些工具,以及如何调用。

认为这是工程领地的设计师,错过了杠杆。agent 先看到什么的层级、你给工具起的名字、你为每个界面写的描述,所有这些都在塑造 agent 对你产品的心智模型,就像标题和微文案塑造人类的心智模型一样。

第 4 层:状态可读性意味着机器能分辨刚刚发生了什么

加载转圈对人类没问题,但对看不到屏幕的 agent 是隐形的。只靠绿色闪烁传达的成功状态,对看不见绿色的人来说无法读取。一个悄无声息关闭的弹窗,在 agent 看来就是一次没有发生的状态变化。

状态可读性,让每个状态都能被机器检测到。Linear 的 API 对每个操作都返回稳定的响应对象。Vercel 的部署状态机有命名状态,READY、BUILDING、ERROR,每次转换都带结构化载荷。Claude Code 把每次工具调用和结果都以 agent 可解析的结构化文本流式输出。

设计动作是在视觉层之外,再加一个 agent 能读的状态层。一个播报新状态的 ARIA live region。一个带结构化 role="status" 的 toast。agent 调用工具后拿回的响应对象。人类保留转圈,agent 得到结构化事件。这与为 AI 延迟而设计是同样的姿态,它必须同时在两个平面上都读得通。

第 5 层:信任信号在 agent 行动后闭环

当 agent 代表用户做了某件事,用户必须能快速看到它做了什么。大多数产品跳过了这一层,而它恰恰决定了是否有人信任这个集成到愿意用第二次。

Cursor 的 diff 审批是教科书式的例子。agent 编辑文件,diff 内联出现,用户逐块接受或拒绝。Claude artifacts 以不同的形态交付了同样的模式。GitHub Copilot Workspace 是双窗格的先计划后执行界面,每一步都有接受或拒绝。

信任信号不是装饰。它是让 agent 自主性可以承受的承重界面。一个 agent 行动、人类只能看到结果状态的产品,第一次出问题时就会失去信任。

做得好的产品到底交付了什么

双用户框架在已上线产品里更容易看清。下面是简短的拆解,每个都很具体。

Cursor。agent 的 diff 审批就是整个信任闭环。逐块内联接受和拒绝,完整文件 diff 可见,没有同意 agent 绝不提交。

Claude artifacts。artifact 预览面板是 agent 与人类之间的契约。agent 产出,人类审阅,artifact 有稳定的 URL 和结构化输出,下一个 agent 可以接着用。

Anthropic Computer Use。截图是 agent 与产品之间的契约。每一个视觉层级和标签决定,现在都是 agent 可读性决定。一个没有可访问名称的图标按钮,是 agent 只能去猜的按钮。

Vercel v0。人类提示词与 agent 渲染之间的契约就是整个界面。用户描述,agent 渲染,每次渲染都是可审阅的产物。

Linear 和 Stripe。两者的姿态都是 AI 原生,架构上都是 API 优先。每个主要操作都有名字、稳定、可调用。两者都在 agent 时代到来之前就交付了这套纪律,这就是为什么每个 agent 产品都能与它们干净地集成。

Replit Agent、Raycast 和 GitHub Copilot Workspace 补全了阵容。Replit 把 agent 的工作呈现为一个可实时编辑的工作区。Raycast 的命令面板是人类与 agent 天然共享的界面。Copilot Workspace 的双窗格先计划后执行模式,在行动前把计划落成文字,使运行中途纠正成为可能。

这些产品共享的完整模式库,请看 AI agent UI 设计模式的拆解,底层架构则见 AI 原生产品设计一文。

破坏 agent 集成的反模式

五种失败模式反复出现。每一种都是设计决策,而不是工程疏忽。

Div 大杂烩。所有可点击的东西都包在 <div> 里,因为样式更好写。每次重构都会打破所有选择器。解决办法:默认使用语义化 HTML,并给任何需要扛过类名变更的东西加上 data-testid。

需要悬停才出现的隐藏 affordance。只在鼠标悬停时出现的“编辑”按钮。agent 不会悬停。解决办法:无论指针状态如何,都让键盘可达的 affordance 出现在 DOM 中。

“Click here”链接。同一页面上的五个“click here”链接,对任何读 DOM 的东西来说就是五个一模一样的 affordance。解决办法:链接文字要写出目的地。

只靠颜色传达的成功状态。绿色边框、绿色闪烁、绿色图标。没有视觉模型,这些都检测不到。解决办法:在视觉信号之外,加一个结构化事件、ARIA live region 或响应对象。

找不到关闭按钮的模态弹窗。那个没有标签的 <svg> 做成的“X”。解决办法:每个模态框都有可访问命名的关闭按钮,并有文档化的退出行为。

这五条的共同规律:任何依赖人眼或指针的东西,对一半用户来说都是隐形的。

双用户审计

在任何界面上线前跑一遍。七个问题,三分钟。

1. 命名操作。每个主要操作都有稳定的可访问名称和稳定的选择器。
2. 机器状态。每次状态变化都会发出结构化事件。
3. 可见 diff。每个由 agent 驱动的变更,在提交前都以可审阅的产物呈现。
4. 键盘路径。每个仅悬停可用的 affordance,没有指针也能触达。
5. 稳定选择器。每个交互元素都有 data-testid 或扛得住重构的语义化等价物。
6. 人在回路。破坏性操作设一道关卡,灾难性操作设两道,可逆操作带撤销运行。
7. 文档化界面。产品附带 AGENTS.md 或等价物,告诉 agent 这里有什么、什么是安全的、哪些约定重要。

七项全过的界面,才算双用户完整。三项或以上不过的界面,无论人类平面看起来多好,都是把 agent 锁在门外交付的。

审计是一种习惯,不是一次性练习。每个新界面、每次重构、每次品牌重设计,在上线前都要过这七个问题,就像每次重设计都要过无障碍检查一样。agent 可读性是新的无障碍,而且同样会复利增长。

关于这套纪律在输入层的版本,见提示词界面。关于空状态的推论,见空状态就是产品。关于底层基础,网页设计原则讲了为什么结构现在也是美学。

FAQ

2026 年为 AI agent 设计到底是什么意思?

把 agent 当作产品的一等用户,而不是需要防御的机器人。agent 读你的 DOM,调用你的按钮,并以人类永远看不到的标准评判你的界面。每个界面都需要一个人类平面和一个机器平面,共享同样的 affordance、状态和词汇。

这和无障碍设计有什么不同?

大部分是重叠的。稳定的可访问名称、语义化 HTML、键盘可达、结构化状态,这些都是把无障碍纪律应用到一类新用户身上。新的层面是工具界面和机器可读结构,包括 MCP 端点、AGENTS.md 文件和 JSON-LD。把无障碍当作地基,把 agent 可读性当作再往上的一层楼。

我需要 MCP 服务器才算 agent 就绪吗?

第一天不需要。一个拥有干净 DOM、命名操作、稳定选择器、结构化状态和可审阅产物的产品,已经有 80% 的 agent 就绪度。MCP 服务器能让 agent 的工作更快更可靠,但先交付结构,再交付协议。

两个用户,一块屏幕,一份工作

agent 不是设计的威胁。它是有着不同需求的第二个用户,而这样对待它的产品,已经在甩开那些没这么做的产品。

大多数团队仍在为一个用户设计。品牌简报谈的是人类,情绪板画的是人类,用户研究访谈的是人类。agent 在上线后才出现,当集成请求进来时,团队不得不事后补救选择器、名称、结构和信任。事后补救的成本,永远高于从第一天起为两个平面一起设计。

这个转变不是技术性的,而是一种姿态。把每个界面都当作双用户,在上线前跑审计,给 agent 与给人类同样的用心。如果拒绝,别人的产品就会拿走 agent 的流量、合作和收入。

如果你想要一支同时设计两个平面、而不是事后再缝合的团队来交付品牌和产品 UI,雇用 Brainy。我们照常设计人类平面,也把机器平面当作它本来的样子:第二个用户。