年代理应用深度评测与权威对比排行榜：为何必须告别代理技能

2026-06-11阅读 0热度 0

skill

简介

为 AI Agent 时代重新思考 UI

几十年来，用户界面一直是为人类量身定做的——图形化、可交互，GUI 服务于人类的视觉和双手。然而，当大语言模型（LLM）作为一种全新类型的“用户”登场时，一个根本性的问题出现了：

当用户不是人类时，用户界面应该是什么样子？

这正是 面向 Agent 的 TUI（AOTUI） 要回答的核心命题。

是什么：一种新的界面范式

面向 Agent 的文本用户界面（AOTUI），本质上是一种将 LLM Agent 视为一等公民 的界面范式。

它不再为人类的视觉像素服务，而是为 LLM 的上下文窗口渲染语义化的 Markdown 文本。这里没有鼠标点击，只有 Agent 对 Tool/Function 的调用；没有颜色、布局或头像这类视觉提示，数据通过文本引用来传递。

简而言之：AOTUI 就是你为模型而非人类设计界面时，所得到的答案。

为什么：根本性的不匹配

传统 GUI 的每一个设计决策，都是为人类的三种核心能力服务的：

人类能力	在 GUI 中的作用
视觉	感知颜色、布局、空间关系、图标
双手	通过鼠标和键盘进行点击、拖拽和输入
持续感知	体验持续流动的 UI——悬停状态、动画、实时反馈

CSS 之所以存在，是因为人类能看见。鼠标事件之所以存在，是因为人类有双手。动画之所以存在，是因为人类能持续地感知变化。

而 LLM 不具备这些能力。

LLM 缺少什么	影响
没有视觉	CSS、颜色和布局不可见——对模型而言，这完全是无效的 token
没有双手	无法悬停、点击或拖拽
没有持续感知	无法体验流动的 UI 流——只能在每个时刻读取一个静态快照

核心洞察：人类和 LLM 感知现实的模态存在根本性差异。这种差异，呼唤一种全新的界面范式。

怎么做：从约束到设计

逐一审视每个约束，你会发现，其中大多数其实是好消息。

没有视觉 → 不需要渲染复杂性

既然不需要为人类眼睛生成像素，那么完整的渲染引擎、像素级精确的布局或 CSS 就都成了多余。语义化的文本格式不仅足够，而且效果更好。与其抵抗这个约束，不如拥抱它：渲染 Markdown，而非像素。

没有持续感知 → 更简单的状态模型

LLM 不会观看 UI 随时间变化。它做的是读取当前状态的完整快照，进行推理，然后行动。这实际上大大简化了状态模型——没有动画、没有部分状态、没有过渡。每一次交互，都是一个干净的读取 → 推理 → 行动循环。这无疑是好事。

没有双手 → 真正的问题

真正的难点在这里。

没有键盘？ 这其实不是问题。键盘是人类输入文本的工具，而 LLM 原生输出文本。它们不需要键盘——它们本身就是键盘。

没有鼠标？ 这才是真正的难题。 没有鼠标，LLM 就无法在任何传统 UI 中进行指向、选择或触发操作。这正是 AOTUI 需要弥合的能力差距。

要理解其中的缘由，我们需要先弄明白鼠标到底做了什么。

鼠标实际上做了什么

每一次鼠标交互，本质上都是两种操作之一：

选择 —— 决定要操作的是哪些数据
触发 —— 调用一个命令

用一个具体的例子来追踪这个过程。

你想在微信上给 JY Chen 发消息。

识别：微信渲染了 JY Chen 的头像和名字。你通过应用提供的视觉表现（而不是任何内部 ID）认出了 JY Chen。
选择：你点击了联系人卡片。从视觉上看，你只是点击了一个 UI 元素。但幕后真正发生的是：应用将底层数据对象绑定到了你当前的上下文——包括 JY Chen 的内部用户 ID、服务器地址，以及其他你从未见过也不需要关心的元数据。
触发：你输入"你好！"然后点击发送。应用利用第 2 步中捕获的数据作为参数，来构造函数调用——你提供了消息文本，应用则提供了其他所有信息。

在底层，你的交互被转化为类似这样的操作：

// 第 2 步：点击卡片默默绑定了这些数据
selectedContact = { id: "jy_chen_id_392", serverId: "sz-01", encryptKey: "..." }

// 第 3 步：点击发送调用了这个函数——使用绑定的数据
sendMessage(recipient: selectedContact, message: "你好！")

你看到的只是一个名字和一个头像，从未接触过用户 ID 或服务器地址。视觉界面捕获了复杂性并将其隐藏——只呈现你做决策所需的信息，而默默绑定其余的部分。

LLM 没有这样的桥梁。 它看不到头像，也无法点击。AOTUI 的任务，就是在文本中重建这座桥梁。

AOTUI 如何重建桥梁

AOTUI 为没有鼠标的 Agent 解决了问题的三个部分——识别、选择和触发。

1. 识别：在文本中标注数据

不渲染头像，而是将数据以标注文本的形式暴露在结构化的 View 中：


  ## 联系人

  - [Wills Guo](Contact:contacts[0]) — 在线
  - [Emma Chen](Contact:contacts[1]) — 离开
  - [JY Chen](Contact:contacts[2]) — 在线

View 是一个边界清晰、自包含的上下文单元——相当于屏幕或面板的文本等价物。LLM 通过阅读标签来"识别"JY Chen，就像人类通过看到头像来识别他一样。

2. 选择：类型化引用

光有标签还不够。LLM 还需要一种方式，在调用操作时引用所选的数据。AOTUI 将类型化引用直接嵌入到每个标签旁边：

[JY Chen](Contact:contacts[2])

格式是 [人类可读标签](类型:引用路径)。当 LLM 想要"选择"JY Chen 时，它使用引用 contacts[2] 作为参数。在执行时，运行时根据其索引解析这个路径——检索完整的底层数据对象（user_id、serverId、encryptKey 以及其他应用需要的信息）——并传递给函数。

LLM 永远看不到这些。就像你永远看不到 jy_chen_id_392 一样。AOTUI 将 LLM 无需关心的实现细节屏蔽在外，同时仍然赋予它精确、无歧义的引用来执行操作。

3. 触发：Tools 作为类型化函数调用

LLM 原生产生结构化函数调用——这正是 tool-calling 的设计初衷。AOTUI 将每一个交互元素映射为一个类型化的 Tool，供 LLM 调用：

### 可用工具
- `open_chat(contact: Contact)` — 打开对话
- `send_message(recipient: Contact, message: string)` — 发送消息

不需要鼠标。LLM 调用函数即可。

设计原则：Tool 只负责触发状态转换，它们不返回大量数据。数据始终通过下一个 Snapshot 中的 View 更新来流动——而非通过 Tool 调用结果。

完整示例：给 JY Chen 发消息

让我们在 AOTUI 中重放微信场景。

第 1 步 — 应用发送 Snapshot


  ## 联系人

  - [Wills Guo](Contact:contacts[0]) — 在线
  - [Emma Chen](Contact:contacts[1]) — 离开
  - [JY Chen](Contact:contacts[2]) — 在线

  ### 可用工具
  - `open_chat(contact: Contact)` — 打开对话
  - `send_message(recipient: Contact, message: string)` — 发送消息

第 2 步 — LLM 接收指令："给 JY Chen 发送'你好！'"

LLM 阅读快照，识别 contacts[2] 是 JY Chen，构造调用：

{
  "tool": "send_message",
  "arguments": { "recipient": "contacts[2]", "message": "你好！" }
}

第 3 步 — 应用解析并执行

contacts[2] → { id: "jy_chen_id_392", name: "JY Chen" } → 消息发送。

第 4 步 — 更新后的 Snapshot 到达


  ## 与 [JY Chen](Contact:contacts[2]) 的对话

  - [你](User:currentUser): 你好！ — 刚刚

  ### 可用工具
  - `send_message(message: string)` — 发送另一条消息
  - `close_view()` — 关闭此对话

LLM 现在在一个全新的上下文中操作。没有渲染像素，没有鼠标，没有CSS。只有干净的结构化文本和类型化函数调用——通过读取 → 推理 → 行动的循环流转。

实现架构

你可能会问："如果我们是为纯文本的 LLM 构建的，为什么还要用 HTML 和 Ja vaScript？"

答案很简单：因为 Web 生态系统已经足够成熟。AOTUI 使用 HTML 作为中间表示——开发者可以编写熟悉的 JSX/Preact 组件，在轻量级虚拟 DOM 中渲染为 HTML，然后转换为 LLM 可读的 Markdown：

开发者编写：              运行时渲染：              LLM 接收：
Preact JSX 组件      →   Worker DOM 中的 HTML  →   Markdown Snapshot
          
  {useViewTypeTool(...)}      ## 联系人

这种架构让开发者能够使用自己熟悉的工具，同时由框架来处理语义文本生成的复杂性。

总结

GUI 概念	AOTUI 对应物
可视页面	View（语义容器）
CSS / HTML 渲染	Markdown 文本
头像 / 颜色 / 位置	文本引用（`Type:reference`）
鼠标点击	Tool（函数调用）
持续的 UI 流	离散的 Snapshot
屏幕空间	上下文窗口 token

AOTUI 并不是要缩小 GUI 或移除 CSS。它构建的是一种不同类型的界面——一种 LLM 能够像人类操作图形应用一样，自然地操作的界面。

下一步：认识 Agentina → — 基于 AOTUI 构建的 Agent 应用宿主。