网站正在重新被设计——为AI，而不是为你

三十年来，网页设计始终是为“人类”而建的。我们优化视觉层级，精心设计留白，打磨能刺激多巴胺的交互按钮与引人入胜的营销文案。我们的指标是“页面停留时间”和“点击率”。然而，数据无情地揭示了一个正在发生的转折：互联网的“头号访客”，已经不再是人类。

根据Imperva发布的《2025年恶意机器人报告》（2025 Imperva Bad Bot Report），自动化流量在十年来首次超越了人类活动，占据了全网总流量的51%，其中由大模型驱动的复杂爬虫和自主代理贡献了惊人的增量。在商业与消费领域，这种倾斜更加剧烈。Adobe Analytics对超过一万亿次美国零售网站访问的追踪显示，在2024年底的假日购物季，来自生成式AI来源的流量同比激增了1300%；而仅仅半年后的2025年7月，这一数字飙升至惊人的4700%。与此同时，Cloudflare雷达数据指出，代表用户执行操作的AI爬虫流量在同一年内增长了15倍以上。更具颠覆性的是Gartner的预测：到2028年，高达90%的B2B采购将由AI Agent直接发起、评估并完成，驱动超过15万亿美元的经济流转。

在这个背景下，网页如何“取悦”agent、能更有效率地给agent提供信息，变成了值得研究的问题。agent上网有两种模式：

• API 浏览（结构化接口交互）：指智能体通过标准化接口（如RESTful API、GraphQL或MCP 协议）与外部系统进行数据交换。这种方式直接请求并返回高度结构化的纯净数据，天然契合大语言模型的处理逻辑，具有极高的 Token 效率。

• Web 浏览（基于浏览器的界面解析与交互）：指智能体通过驱动真实或无头浏览器，直接解析专为人类视觉渲染设计的网页文档（DOM/HTML）。由于它们充斥着海量的嵌套标签、CSS类名以及大量不可见的布局元素，如果不对这些冗余数据进行处理，一个典型的电商页面在转化为原始HTML文本后，往往需要消耗数万乃至十万级别的Token。尽管API调用远比浏览器交互节省Token，但由于现实互联网中大量服务缺乏可用的API、被严格限制访问，或是充斥着复杂的动态渲染与多步验证流程，浏览器成为了智能体触达这些全网信息的唯一“通用API”和最后手段。

我们来看看为了解决这个问题，各大公司针进行了什么创新。

用Markdown提取内容，而非让大模型直接吃进原始HTML。原始HTML中有大量信息用于网页渲染，对提取信息无用，而这种方法能使token使用量降低80%左右。

Cloudflare这周刚发布了一个新功能：当AI系统从任何使用Cloudflare并启用了Markdown for Agents（面向代理的 Markdown）的网站请求页面时，它们可以在请求中表达对“text/markdown”的偏好，在可能的情况下，网络将会将 HTML 转换为 Markdown，如：

curl https://developers.cloudflare.com/fundamentals/reference/markdown-for-agents/ \  -H "Accept: text/markdown"

现在最流行的编程代理——例如Claude Code和OpenCode——在请求内容时，已经发送了这些Accept标头。

业界领先的数据抓取平台Firecrawl在github上有8万多个stars，也是做这个事情。它的About page上写着：The Web Data API for AI - Turn entire websites into LLM-ready markdown or structured data。当你的agent发请求给firecrawl时，firecrawl会做抓取网页、清洗html并转markdown的工作，最后返回agent的形式是更加精简的markdown。

上文提到的Markdown虽然最省 Token，但它会抹除所有的按钮属性、输入框标识和动态状态，导致智能体“能看懂文章，但不知道怎么点按钮”。而可访问性树（AXTree）则过滤掉了所有与视觉排版相关的噪音，只保留了“人类用户可以与之交互的元素及其语义状态”。

可访问性树最初是操作系统和浏览器为了辅助技术（如为视障人士设计的屏幕阅读器）而建立的一套并行数据结构。浏览器在解析DOM时，会同步计算并生成AXTree，剥离所有与用户操作无关的纯视觉和样式节点（如起装饰作用的背景图片、排版用的空白div），仅将那些具备实际语义和交互意义的节点保留下来。将当前页面表示为AXTree，通常可以将Token消耗量相较于原始DOM缩减约90%之多。举个例子：

// 原始 HTML（噪音极大，浪费 Token，容易让 AI 迷失）<div class="checkout-wrapper flex-col mt-4" data-tracking-id="checkout-section">  <div class="decoration-line"></div>  <button id="submit-btn-hash883" class="btn-primary hover:bg-blue-600 focus:ring-2" aria-expanded="false" aria-disabled="false">    <span class="icon-cart"><svg width="16" height="16" viewBox="0 0 16 16">...</svg></span>    <span class="text-xl font-bold">确认并支付 $99</span>  </button></div>
// Markdown 转换（过度清洗，丢失交互能力）确认并支付 $99
// 可访问性树 AXTree- button "确认并支付 $99" [disabled=false]

可以看到，原始 HTML太费token，markdown转换让大模型不知道怎么与网页交互，而AXTree则保留了网页信息中的角色（button）、名称（name）、状态（disabled=false），使模型能经济地理解这个元素是什么、当前状态如何，并生成精确的点击指令。

与上文提到的markdown相比，它的主要优点是在省token的同时，保留了交互的信息。Agent在执行复杂的多步任务时，可以根据当前阶段的性质切换观察格式。例如，在进行“全网竞品分析”时，Agent首先读取AXTree来操作网站导航栏、关闭Cookie弹窗、在搜索框输入关键词并点击跳转；一旦进入了目标数据页面或文章详情页，系统可以切换策略，将页面转化为纯Markdown格式交给模型进行阅读和提取。这样既保证了物理交互的精确，又最大化节省了阅读长文时的 Token。

典型的例子有微软的Playwright MCP。在近期发布的针对大模型（LLM）优化的Playwright MCP中，微软明确跳过了视觉模型对像素数据的处理，而是默认向模型提供基于可访问性树的快照。当智能体需要观察当前网页状态时，Playwright MCP默认运行在“快照模式（Snapshot Mode）”下，它不会向大模型发送庞大的HTML源码，而是调用浏览器底层的无障碍API，将整个页面的交互结构提取出来，并格式化为极其精简的YAML文本 。在这个YAML快照中，每一个对用户可见且可交互的节点都被规范化为一行代码，语法格式为：role "name" [attribute=value]。

• Role（角色）：表明这是一个什么组件（如button、link、heading、textbox）。

• Name（名称）：提取元素内部的有效文本（如“提交订单”或“开始使用”）。

• Attribute（属性/状态）：提取它当前的交互状态（如[disabled=false]、[expanded=true]）。

大模型（如Claude）阅读这份结构化的纯文本后，因为它清楚地知道每个元素的明确角色和名称，它可以直接生成如“点击名称为Submit Order的button”这样的高级逻辑指令交给MCP服务器。Playwright MCP服务器接收到指令后，会在浏览器底层将这个语义指令映射回真实网页中的对应物理元素并执行动作。这种完全基于结构化数据的纯文本交互，不仅消除了基于截图坐标点击时常产生的歧义和不确定性，还实现了快（无需图像编码时间）且省 Token 的浏览器自动化控制 。

你可以看到，在agent时代，CSS选择器正在被语义选择器所替代。agent能够理解购物车页面底部一个标有“完成购买”的绿色按钮很可能就是结账操作，而不管它的id、class或data-testid是什么。

从可访问性树再进一步，Vercel Labs近期开发了专门面向 AI 的浏览器自动化工具：Agent-Browser。其核心创新就是抛弃庞大的 DOM 树，改用提取可访问性树节点并附加简短引用（如@e1、@e2）的快照机制。这种方法在保持完全交互能力的同时，将上下文Token消耗惊人地降低了93%。

在传统的基于Selenium或原生Playwright编写的浏览器自动化脚本中，为了精确制导并点击一个元素，控制程序往往需要输出冗长的CSS选择器或复杂的XPath路径（例如："action": "click", "selector": "div.main-content > form#login-form > ul:nth-child(2) > li.active > a.btn-submit"）。如果强行要求大语言模型去理解DOM嵌套树并准确拼写出这样一条冗长的字符串，不仅增加了生成的Token数量，还会导致更高的语法解析错误率。

为了解决这一痛点，由Vercel Labs主导开发的Agent-Browser引入了一项被称为“快照与引用（Snapshot + Refs）”的机制。在环境感知阶段，系统在提取页面元素后，不再向大模型暴露完整的结构化路径，而是直接在每一个被提取出来的交互节点旁，附加一个极短的、唯一的字符串引用标识符，例如@e1、@e2、@e3。当大模型经过逻辑推理决定点击“立即结账”按钮时，它再也不需要生成冗长的CSS定位器，而只需输出一行极简的指令：click @e3即可。  例如：

// 原始的 HTML<form id="login" class="flex flex-col space-y-4">  <div class="input-wrapper">     <label aria-hidden="true">Email</label>     <input type="text" id="email-554" class="tailwind-classes-here" placeholder="Enter Email">  </div>  <div class="input-wrapper mt-2">     <label aria-hidden="true">Password</label>     <input type="password" id="pass-992" class="tailwind-classes-here" placeholder="Enter Password">  </div>  <div class="submit-container pt-4">     <button type="submit" id="btn-login-main" class="btn-primary hover:bg-blue-600 focus:ring-2" aria-disabled="false">        <span class="text-white font-bold">Sign In</span>     </button>  </div></form>
// Vercel Agent-Browser 的 Snapshot + Refs 格式- textbox "Email" [ref=e1]- textbox "Password" [ref=e2]- button "Sign In" [ref=e3]
// 大模型交互fill @e1 "user@example.com"click @e3

这种采用Ref引用的方式统一了Text和Vision的空间鸿沟，它将定位职责下放到底层的映射引擎，Agent只做高级逻辑决策。

面对结构无限庞大、拥有成百上千个功能端点的复杂Web服务时，即使有可访问树等方案，一次性将所有可能交互的节点推入大模型依然是低效且昂贵的。为解决这一难题，许多公司开始从GraphQL等仅返回所需字段的API查询语言中汲取灵感，将冗长的上下文转变为基于“渐进式披露（Progressive Disclosure）”来按需提取。这种机制使得系统能够将原本高达数万Token的API操作说明，精简为数百Token的层级索引。当agent的工作流从“意图评估”推进到“领域定位”，再下钻到具体的“操作执行”时，相关内容才会被如同剥洋葱一般层层加载，实现了上下文的精细管理。

Google最新推出的WebMCP（目前在Chrome 中提供早期预览）正是“渐进式披露”理念的实践，将浏览器从一个“需要AI逆向工程的视觉布局”变成了一个“具有明确功能契约（Schema）的API接口”。若没有类似接口，即使用AXTree的方法，依然需要解析页面的全量结构、遍历海量节点。而WebMCP则允许网站通过“声明式API”直接把底层功能打包成工具暴露出来，这样一来，agent不再需要扫描整个页面的布局，而是直接“发现”一套极其精简的JSON Schema工具列表。例如，agent只会看到该页面支持bookFlight（预订航班）或searchProducts（搜索商品），并且清晰地知道需要传入哪些参数（如出发地、日期、价格、数量等）。

它对于多步的长线交互任务特别重要，在一项针对复杂电商预订流程（包含搜索、过滤、选择和预订等 5 个连续步骤）的实测中，使用WebMCP协议的agent完成整个交易总共仅消耗了约15000个Token 。如果换作传统的DOM抓取方式，由于每一步都需要重新解析复杂的页面组件树，通常需要消耗5到10倍以上的Token才能完成同样的任务 。

很多数据都宣告了一个事实：以前，网站是给人看的，现在，网站也是给agent看的。以后，可能主要是给agent看的。

ChatpGPT刚出现时，有句话说的好：所有互联网时代的产品，值得用AI再做一遍。现在随着agent的盛行，我想说：所有给人做的产品， 值得给agent再做一遍。我甚至想，有没有可能出现一种语言替代html？因为html毕竟是为了给人看的美观舒服而设计的，不适合agent。你别说，在这方面还真有很多公司投入和早期研究成果：

微软在 2025 年的 Build 大会上推出了开源项目 NLWeb（Natural Language Web）。微软官方表示，NLWeb 将扮演“Agentic Web时代的HTML”的角色。但是——我们不要被这个宣传口径误导了，其实NLWeb不是要取代HTML的语言，它本质上是一套Python框架和网络通信协议，帮你把网站的Schema.org、RSS等结构化数据摄取并放入向量数据库中，然后结合大语言模型驱动的工具，直接为网站创建自然语言接口。有了它以后，人类用户可以直接用自然语言向你的网站提问，而AI agents可以通过标准的MCP协议，以结构化的数据格式读取你的网站内容并调用功能。

在界面交互层面，谷歌推出了A2UI。传统的界面是用HTML/CSS写死的，而A2UI是一种轻量级的跨平台声明式UI协议。当你用自然语言向集成了A2UI的智能体提出要求（比如“给我去餐馆订餐”）时，AI不会生成可以直接运行的代码，而是会输出一段声明式的JSON数据。你的网站接收到这段JSON后，会用自己本地预先写好的、绝对安全的组件（原生输入框、按钮等）把它拼装渲染出来。比如，当你想在网上订餐时，比起对话式的询问时间、地点、人数等，agent可以即时生成符合你网站UI的视觉元素：

如果你有兴趣看看paper，这两篇研究会释放你的想象力：CI4A协议（https://arxiv.org/html/2601.14790v1）放弃了传统的DOM树解析，将UI组件的复杂逻辑抽象为一个“语义三元组”（包括语义状态视图、可执行工具集和交互元数据），使Agent可以绕过前端渲染层，直接从内存中访问纯业务数据（如Vue的响应式对象或React的State）。ANP（https://arxiv.org/pdf/2508.00007）协议放弃了用于网页渲染的标记语言，转而采用 JSON-LD（一种基于 JSON 的关联数据格式）作为基础数据格式，专注于机器到机器（M2M）的跨域去中心化互操作性，让不同厂商的Agent能够用这种纯净的语言直接交换信息。