HTML 是智能体最好的工作界面

AI模型价格对比 | AI工具导航 | ONNX模型库 | Vibe Coding教程 | PLC在线仿真器 | Tripo 3D | Meshy AI | ElevenLabs | KlingAI | ArtSpace | Phot.AI | InVideo

与我合作的大多数团队向代理请求一个制品，然后将反馈循环困在聊天中。"让它更紧凑一点。""色调再暖一点。""边距用得少一点。"制品是HTML，关于制品的对话是文本。这种不对称就是问题所在。

这也是一种思维框架的缺失。当人们第一次听到"让代理输出HTML"时，他们以为自己是在选择一个发布格式。PDF或HTML。Markdown或HTML。邮件或HTML。这个感觉就像是在选择文件扩展名。虽然正如你在我之前的文章中所读到的，我非常支持HTML作为输出格式。

这种框架低估了HTML。HTML是代理可以按需生产的最廉价的界面媒介，这里的"廉价"有特定的含义。代理原生地生成它，不需要额外的工具链。浏览器已经在读者拥有的每台设备上执行它。人类通过查看来检查它。表单将用户输入转换为代理可以回读的结构化数据。一个微小的localhost服务器在不到一百行标准库代码中闭环。与构建真正的产品UI、CLI提示符或带有自定义工具的MCP服务器相比，HTML是设置成本最低、视觉带宽最高的通道。这就是为什么它是界面媒介，而不仅仅是输出格式。

过去几个月我与代理做的最有意义的工作是在超越"读者滚动的静态文档"的HTML层级上。

有四个这样的层级，越往上越有用。第一层已经确立但被低估了。第四层才是真正的论点所在，也是我合作的几乎没有人尝试过的层级。

三个要点：

• HTML不仅仅是一种输出格式。它是代理已经知道如何流利编写的UI媒介。将它用于文档，然后用于可导航的报告站点，然后用于调整面板，然后用于视觉询问——代理字面上递给你一个表单并等待你的选择。
• 双向层级是大多数团队还没有尝试过的。一个真正的HTML表单、一个微小的localhost服务器、和一个JSON响应返回给代理大约是一百行Python代码。这给你提供了一个干净的方式来通过视觉而不是文字描述来做品味决策。
• 这种做法奖励的自律是弄清楚哪些决策通过点击而不是通过打字来做得更好。颜色、密度、布局、排序、"这三个哪个感觉对"都是视觉决策。把它们当作文本问题来处理是大多数代理对话变得比需要的慢的原因。

第一层：HTML作为人们阅读内容的正确格式

这是已确立的层级，我会简短地过一遍。简报、报告、回顾、比较、执行摘要、计划、状态更新。任何读者会看一次制品并判断是否转发的内容。

HTML在这些方面胜过markdown的原因不是"更丰富的格式"。而是制品是完成的。Markdown文件是某个东西的草稿。HTML文件就是那个东西。代理和读者之间没有渲染步骤。你选择的字体就是他们看到的字体。你设置的空白就是他们得到的空白。他们看到的东西就是你交给他们的东西。

这对任何Claude Code工作流程的机械版本是：pandoc，浅色模式默认，语义HTML，内联CSS以实现可移植性，打印友好的样式表，最大宽度约760px以便段落可以在手机上阅读。如果你还没有将此作为代理为人类消费生产的所有内容的默认设置，请先这样做。

本文的其余部分是关于一旦你停止将HTML视为终点线之后，你可以做什么。

第二层：HTML作为可导航的站点，而不是单个页面

下一步是停止为每个制品写一个HTML文档，开始写一个小型站点。一份季度报告有执行摘要、每个渠道的部分、队列分析、管道视图和附录。作为一篇9000字的文档，读者会滚过他们不需要的部分。作为带侧边栏的小型站点，读者可以导航。

这个层级主要是信息架构，代理已经知道怎么做。它属于这个分类的原因是它对下一次会话的作用。导航就是结构，以HTML形式写下来。当你下周回来并说"用3月份的数据重新做这个，保持上季度的结构"时，结构就记录在导航中。站点是自身的文档，这使得代理能够扩展它而不是从头重写。

这就是通向第三层的桥梁。一旦制品是一个拥有自己结构的小型站点，它就可以携带自己的控件。

第三层：HTML作为设计决策的调整面板

这是大多数团队跳过的层级，也是回报最快的层级。

模式：代理交付报告（或幻灯片，或封面，或图表）。与报告一起，它交付了一个小的参数面板，包含几个滑块、一个颜色选择器、一个分段控制器和一个按钮。面板暴露了你可能想要调整的设计决策：密度、标题比例、强调色、图表风格。

诀窍是那个按钮。当你点击Apply时，表单post回一个小的本地服务器，服务器记录你的选择，代理用你的输入重新渲染制品。你看到新版本。如果你喜欢，就保留。如果不喜欢，你调整滑块再点击一次。

很多设计对话都应该在这里进行。试着用文字描述"强调色太橙色了，也许偏红一点色调，少一点饱和度"。然后试着点击一个你喜欢的颜色。第二个才是人类真正想做的。文本是品味的错误媒介，对话放慢到文字的速度，而它本应以点击的速度移动。

构建这个的成本是一个带有表单控件的HTML文件，加上一个将表单post回去的微小脚本。代理写两个。脚本是通用的，你可以在各个制品中重复使用。

这在实践中改变的东西：

• 过去需要三轮"让它更X"的设计反馈变成了一轮点击。
• 制品自带旋钮，所以非技术评审人员可以在不回到代理寻求帮助的情况下进行调整。
• 代理不必猜测"更精致"在你的品味中意味着什么。你指向看起来精致的版本，它就有了记录。 这也是制品开始感觉不再像一次性输出，而更像一个工作界面的地方。一旦你到了这里，你就距离下一个层级一半了。

第四层：HTML作为对你的视觉询问

这是我一直很兴奋的层级，也是我认为更多人需要看到的层级。

故事是这样的。你正在Claude Code的会话中。代理即将做出一个并非真正文本化的决策。这个部分应该使用三种卡片布局中的哪一种。这章封面什么颜色是"对的"。这四种hero构图中哪一个阅读效果更好。代理可以用文本提问并尝试描述选项。那很慢，而且描述通常比直接看到东西更糟糕。

替代方案，我通过一个叫做ask-visual的小插件一直在使用的，是让代理写一个真正的HTML表单，启动一个微小的localhost服务器，在浏览器中打开表单，等待你点击，并将你的选择作为JSON读回来。

你点击。表单post回去。代理收到{"card": "lifted", "accent": "#2c5aa0", "density": "comfortable"}并带着你的选择继续任务。

机制简单得不能再简单了。代理将表单的body写入一个临时文件。一个小的Python脚本（大约一百行标准库）在127.0.0.1上绑定一个随机端口，在你的默认浏览器中打开URL，阻塞在/sbumit的POST上，将表单数据作为JSON打印出来，然后退出。没有守护进程，没有后台进程，没有清理。代理从stdout读取JSON并回去工作。

为什么这比看起来更重要。聊天界面是任何本质上视觉化决策的瓶颈。试图用文字描述布局、颜色、排序和密度是一个翻译步骤，代价是你的准确性和时间。视觉询问消除了翻译：你看到选项，你点击，代理收到结构化数据而不是一段近似文字。

这就是关键。视觉判断应该返回结构化数据，而不是文字。一旦数据是结构化的，代理就可以直接应用它，而无需猜测你的意思。更少的失误。更少的重写。更少的"不，更像第二个但暖一点"的轮次。

我开始使用这个的一些场景：

• 从代理刚生成的三张hero图片中选择。
• 在新报告开始时设置强调色和密度。
• 为有多个合理选项的部分选择图表样式。
• 通过拖拽重新排序一组项目符号（表单将顺序作为数组post回去）。
• 在发送前审批生成的邮件模板，每个变体一个按钮。

在每种情况下，代理都可以用文本提问。视觉询问更快，答案更好。

为什么这很有力

论点是代理的界面不是固定的。聊天框不是整个UI。代理能写的任何东西都是UI的一部分，因为代理能写HTML，而HTML是一种UI媒介。

这将问题从"如何使聊天交互更好"转变为"这个特定决策的正确界面是什么"。一份长篇政策文档：HTML页面。一份多部分报告：可导航站点。一个设计选择：调整面板。一个品味决策：视觉询问。

你最终得到的工作模式是：聊天框中的文本用于启动工作和讨论策略，HTML制品用于你要阅读的输出，HTML面板用于调整输出，HTML表单用于那些你应该点击而不是打字的特定决策。每个界面都获得它最擅长的那种问题。聊天对话变得更短更清晰，因为它不再承载每一个小选择的重担。

我最近在代理工作流程中看到的大多数速度提升都来自这种重新定位，而不是任何模型改进。更快的模型有帮助。更好的目标界面帮助更大。

如果你想试试这个，从哪里开始

免费的周二下午版本是具体的。

选择你即将要求代理生产的下一个报告或制品。告诉代理把它作为一个小型可导航站点而不是一个文档来交付，即使它很短。注意结构如何变得明显，因为导航迫使你命名各个部分。

为任何设计可能需要调整的制品添加一个调整面板。三个滑块和一个颜色选择器就够了。代理可以写表单和重新生成调用。下次你会说"更紧凑"或"不同颜色"时，改为点击。

对于视觉询问，你需要一个小脚本。ask-visual插件是一个实现，大约一百行标准库Python。代理写表单body，脚本将其包裹在HTML中，打开浏览器，等待点击，返回JSON。安装一次，然后任何想问你视觉问题的代理都可以这样做。

当你的会话开始感觉更短，尽管产出更多时，你就知道这个模式在起作用了。过去需要三轮文本对话的决策现在只需一次点击。过去需要返工的制品现在第一次就交付了。聊天框变得更安静，工作移动得更快，因为聊天框从来不是其中发生的一半事情的正确场所。

我用来判断是否正确设置了工作流程的最干净的指标是，我发现自己用文字描述视觉内容的频率有多高。如果我还在这样做，就说明我缺少一个表单。表单几乎总是比下一轮"实际上，更像X"更便宜。

HTML是媒介。代理已经在说它。唯一的问题是你要让多少交互由它来承载。

原文链接: HTML Is the Only Right Interface for Working Together With Agents

汇智网翻译整理，转载请标明出处