## 在 AI Agent 时代重新思考 UI
几十年来，用户界面一直专为人类设计——图形化、可交互，GUI 服务于人类视觉和双手。但随着大语言模型（LLM）作为新型用户出现，我们面临一个根本性问题：
> **当用户不是人类时，用户界面应该是什么样的？**
这正是 **面向 Agent 的 TUI（AOTUI）** 要回答的问题。
---
## 是什么：一种新的界面范式
**面向 Agent 的文本用户界面（AOTUI）** 是一种以 **LLM Agent 为一等公民** 的界面范式。
它不为人类眼睛去渲染像素，而是为 LLM 上下文窗口渲染**语义化 Markdown 文本**。没有鼠标点击，Agent 调用**Tool/Funtion**。没有视觉提示（颜色、布局、头像），数据通过**文本引用**来引用。
简言之：AOTUI 就是当你为模型而非人类设计时，用户界面的样子。
---
## 为什么：根本性的不匹配
传统 GUI 中的每个设计决策都是为人类的三种特有能力服务的：
| 人类能力 | 在 GUI 中的作用 |
|---|---|
| **视觉** | 感知颜色、布局、空间关系、图标 |
| **双手** | 通过鼠标和键盘进行点击、拖拽和输入 |
| **持续感知** | 体验持续流动的 UI——悬停状态、动画、实时反馈 |
CSS 的存在是因为人类能看到。鼠标事件存在是因为人类有双手。动画的存在是因为人类持续地感知变化。
**LLM 不具备这些能力。**
| LLM 缺少什么 | 影响 |
|---|---|
| **没有视觉** | CSS、颜色和布局不可见——完全是无意义的 token |
| **没有双手** | 无法悬停、点击或拖拽 |
| **没有持续感知** | 不会体验流动的 UI 流——只能在每个时刻读取一个静态快照 |
**核心洞察**：人类和 LLM 通过根本不同的模态感知现实。这种差异要求一种全新的界面范式。
---
## 怎么做：从约束到设计
让我们逐一审视每个约束——你会发现大多数其实是*好消息*。
### 没有视觉 → 不需要渲染复杂性
不需要为人类眼睛生成像素，就不需要完整的渲染引擎、像素级精确的布局或 CSS。语义化文本格式既足够又更好。我们不抵抗这个约束，而是拥抱它：**渲染 Markdown，而非像素**。
### 没有持续感知 → 更简单的状态模型
LLM 不会观看 UI 随时间变化。它读取当前状态的完整快照，推理，然后行动。这实际上*大大简化*了状态模型——没有动画、没有部分状态、没有过渡。每次交互都是一个干净的**读取 → 推理 → 行动**循环。同样是好消息。
### 没有双手 → 真正的问题
这里变得困难了。
没有键盘？ 实际上不是问题。键盘给人类提供了输入文本的方式。LLM 原生*输出*文本。它们不需要键盘——它们就是键盘。
*没有鼠标？* **这才是真正的问题。** 没有鼠标，LLM 无法在任何传统 UI 中指向、选择或触发操作。这就是 AOTUI 要弥合的能力差距。
要理解原因，我们需要看看鼠标实际上*做了什么*。
---
### 鼠标实际上做了什么
每次鼠标交互本质上都是两种操作之一：
1. **选择** —— 选择要操作的*哪些数据*
2. **触发** —— 调用一个命令
让我们追踪一个具体例子。
**你想在微信上给 JY Chen 发消息。**
1. **识别**：微信渲染了 JY Chen 的头像和名字。你通过应用提供的视觉表现识别出那是 JY Chen——不是通过任何内部 ID，而是通过视觉表现。
2. **选择**：你点击了联系人卡片。视觉上是点击了一个 UI 元素。但幕后实际发生的是：应用将底层数据对象绑定到你当前的上下文——JY Chen 的内部用户 ID、服务器地址和其他你从未见过也不需要关心的元数据。
3. **触发**：你输入"你好！"然后点击发送。应用使用第 2 步捕获的数据作为参数构造函数调用——你提供了消息文本，应用提供了其他所有信息。
在底层，你的交互转化为类似这样的操作：
```
// 第 2 步：点击卡片默默绑定了这些数据
selectedContact = { id: "jy_chen_id_392", serverId: "sz-01", encryptKey: "..." }
// 第 3 步：点击发送调用了这个函数——使用绑定的数据
sendMessage(recipient: selectedContact, message: "你好！")
```
你只看到了一个名字和一个头像。你从未接触过用户 ID 或服务器地址。视觉界面**捕获了复杂性并将其隐藏**——只呈现你做决定所需的信息，默默绑定其余部分。
**LLM 没有这样的桥梁。** 它看不到头像，也无法点击。AOTUI 的工作就是在文本中重建这座桥梁。
---
### AOTUI 如何重建桥梁
AOTUI 为没有鼠标的 Agent 解决了问题的三个部分——识别、选择和触发。
**1. 识别：在文本中标注数据**
AOTUI 不渲染头像，而是将数据以标注文本的形式暴露在结构化的 **View** 中：
```xml
<view id="contacts" type="ContactList" name="联系人列表" app_id="wechat">
  ## 联系人
  - [Wills Guo](Contact:contacts[0]) — 在线
  - [Emma Chen](Contact:contacts[1]) — 离开
  - [JY Chen](Contact:contacts[2]) — 在线
</view>
```
View 是一个边界清晰、自包含的上下文单元——屏幕或面板的文本等价物。LLM 通过阅读标签"识别"JY Chen，就像人类通过看到头像识别他一样。
**2. 选择：类型化引用**
光有标签还不够。LLM 还需要一种方式在调用操作时*引用*所选数据。AOTUI 将类型化引用直接嵌入每个标签旁边：
```markdown
[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 可以调用：
```markdown
### 可用工具
- `open_chat(contact: Contact)` — 打开对话
- `send_message(recipient: Contact, message: string)` — 发送消息
```
不需要鼠标。LLM 调用函数即可。
<Callout type="default">
**设计原则**：Tool 触发*状态转换*；它们不返回大量数据。数据始终通过下一个 Snapshot 中的 View 更新流动——而非通过 Tool 调用结果。
</Callout>
---
### 完整示例：给 JY Chen 发消息
让我们在 AOTUI 中重放微信场景。
**第 1 步 — 应用发送 Snapshot**
```xml
<view id="contacts" type="ContactList" name="联系人列表" app_id="wechat">
  ## 联系人
  - [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)` — 发送消息
</view>
```
**第 2 步 — LLM 接收指令**：*"给 JY Chen 发送'你好！'"*
LLM 阅读快照，识别 `contacts[2]` 是 JY Chen，构造调用：
```json
{
  "tool": "send_message",
  "arguments": { "recipient": "contacts[2]", "message": "你好！" }
}
```
**第 3 步 — 应用解析并执行**
`contacts[2]` → `{ id: "jy_chen_id_392", name: "JY Chen" }` → 消息发送。
**第 4 步 — 更新后的 Snapshot 到达**
```xml
<view id="chat_jy" type="ChatDetail" name="与 JY Chen 的对话">
  ## 与 [JY Chen](Contact:contacts[2]) 的对话
  - [你](User:currentUser): 你好！ — 刚刚
  ### 可用工具
  - `send_message(message: string)` — 发送另一条消息
  - `close_view()` — 关闭此对话
</view>
```
LLM 现在在全新的上下文中操作。没有渲染像素。没有鼠标。没有 CSS。只有干净的结构化文本和类型化函数调用——通过**读取 → 推理 → 行动**的循环流转。
---
## 实现架构
你可能会问：*"如果我们是为纯文本的 LLM 构建，为什么还要用 HTML 和 JavaScript？"*
因为 Web 生态系统是成熟的。AOTUI 使用 HTML 作为**中间表示**——开发者编写熟悉的 JSX/Preact 组件，在轻量级虚拟 DOM 中渲染为 HTML，然后**转换**为 LLM 可读的 Markdown：
```
开发者编写：              运行时渲染：              LLM 接收：
Preact JSX 组件      →   Worker DOM 中的 HTML  →   Markdown Snapshot
<View id="contacts">      <div data-view="...">    <view id="contacts">
  {useViewTypeTool(...)}    <span data-tool="...">  ## 联系人
</View>                   </div>                    </view>
```
这个架构让开发者使用熟悉的工具，而框架处理语义文本生成的复杂性。
---
## 总结
| GUI 概念 | AOTUI 对应物 |
|---|---|
| 可视页面 | View（语义容器） |
| CSS / HTML 渲染 | Markdown 文本 |
| 头像 / 颜色 / 位置 | 文本引用（`Type:reference`） |
| 鼠标点击 | Tool（函数调用） |
| 持续的 UI 流 | 离散的 Snapshot |
| 屏幕空间 | 上下文窗口 token |
AOTUI 不会缩小 GUI 或移除 CSS。它构建了一种**不同类型的界面**——一种 LLM 可以像人类操作图形应用一样自然地操作的界面。
下一步：
- [认识 Agentina →](https://agentina-agent-apps.vercel.app/en ) — 基于 AOTUI 构建的 Agent 应用宿主。
- [仓库](https://github.com/AOTUI/AgentOrientedTUI )

几十年来，用户界面一直专为人类设计——图形化、可交互，GUI 服务于人类视觉和双手。但随着大语言模型（LLM）作为新型用户出现，我们面临一个根本性问题：

告别Agent Skills, 拥抱 Agent Apps

在AI Agent时代，传统GUI为人类设计，而LLM缺乏视觉、双手与持续感知能力。AOTUI（面向Agent的文本界面）应运而生：以语义化Markdown替代像素渲染，用类型化引用（如`Contact:contacts[2]`）实现“选择”，以Tool函数调用替代鼠标操作，构建专为LLM优化的离散快照式交互范式。

人工智能

前端

客户端

AOTUI是一种面向AI Agent的文本用户界面范式，专为LLM设计而非人类。它摒弃传统GUI的视觉元素，采用语义化Markdown文本和类型化函数调用，让AI通过文本引用和工具调用来完成交互。这种设计解决了LLM缺乏视觉感知和鼠标操作能力的限制，实现了更高效的AI与系统交互方式。

服务器

容器

Agent

4核4G3M云服务器 新用户低至38元/年！

2026新春采购季

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云AI代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

功能1上新10个字符

功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符。

功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符。

功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符

功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符

功能4上新

文章&问答评论现已支持表情

全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验

社区富文本编辑器全新改版！诚邀体验～ 

精选全网热门MCP server，让你的AI更好用 🚀

💥开发者 MCP广场重磅上线！

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

告别Agent Skills, 拥抱 Agent Apps-腾讯云开发者社区-腾讯云

告别Agent Skills, 拥抱 Agent Apps

告别Agent Skills, 拥抱 Agent Apps

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐