《Web 页面 AI 说明书：重塑 AI 与 Web 交互的标准化协议》白皮书

小气小憩
150 阅读12分钟

前言

在人工智能技术迅猛发展的当下，AI 与 Web 页面的交互已成为信息获取与处理的核心场景。然而，当前 AI 在理解和处理 Web 页面时，面临着结构复杂、信息噪声多、动态内容难处理、多模态理解不足等诸多挑战。这些挑战不仅制约了 AI 获取信息的效率和准确性，也限制了基于 AI 的 Web 应用体验的进一步提升。

为解决这些问题，本白皮书提出了 “Web 页面 AI 说明书” 这一创新性方案。该方案旨在通过页面主动向 AI 提供结构化元数据的方式，实现 AI 与 Web 页面的高效、精准交互，重塑 AI 与 Web 交互的标准化协议。

一、背景与趋势

1.1 AI 与 Web 交互的重要性

随着 AI 技术的飞速发展，越来越多的用户通过 AI 获取信息，这种方式正逐渐取代部分传统的搜索引擎。AI 在理解和处理人类编写的 Web 页面内容时，极大地提升了用户的信息获取效率，也带来了全新的交互体验。从智能问答、信息抽取到自动化操作，AI 与 Web 页面的交互已渗透到人们生活和工作的方方面面。

1.2 Web 页面的复杂性挑战

Web 页面的多样性和复杂性给 AI 的理解带来了巨大困难。其结构多样、标签嵌套复杂，大量无关元素（如广告、导航、样式代码等）干扰核心内容识别，部分信息通过 JS 动态渲染导致静态 HTML 难以获取完整内容，且仅凭 HTML 或视觉信息难以准确还原用户关注的页面要素及上下文。这些问题使得 AI 在处理 Web 页面时效率低下、准确性不高。

二、现有 AI 读取 Web 页面方案的局限

当前主流的 AI 读取 Web 页面方式存在各自的局限性，难以满足日益增长的 AI 与 Web 交互需求。

2.1 AI 视觉识别（截图模式）

该方式通过对 Web 页面截图，将图片输入具备视觉理解能力的 AI 模型进行识别。其优点是无需依赖页面源码，适用于复杂排版或仅限视觉可见内容的场景。但缺点明显，对分辨率、截图区域敏感，易受遮挡和样式影响，结构化信息抽取能力有限。

2.2 HTML 源码提取

直接将页面的 HTML 源码或关键 DOM 片段作为 AI 输入。优点是结构信息完整，方便 AI 进行语义分析和标签定位，适用于内容较为规整的页面。但需处理大量无关标签、样式和脚本，动态内容可能缺失，对 AI 模型语义理解能力要求高。

2.3 HTML 标注 + AI 视觉结合

在页面源码中对关键节点进行标注，再将页面截图与标注信息一同输入 AI 模型。优点是提升 AI 对核心内容的识别率，结合结构与视觉多模态优势，适合复杂页面和高准确率场景。但实现成本较高，需要前置开发适配和标注规范，流程繁琐。

三、Web 页面 AI 说明书方案设计

3.1 核心概念

Web 页面 AI 说明书（Web Page AI Manual）是由页面开发者或浏览器自动生成的、面向 AI 模型的结构化元数据，以 JSON/JSON-LD 等机器可直接读取的格式挂载在页面全局对象（如window.AIManual）中，或通过浏览器 API（如window.getAIManual()）供 AI 调用。其核心是用机器可理解的语言，主动描述页面的核心内容、结构逻辑、交互规则、动态特征以及页面能力，替代 AI 对 HTML 源码或视觉信息的 “逆向解析”，同时支持类似大模型 function call 的实现，让 AI 能够便捷地调用页面能力。

3.2 核心要素（说明书内容规范）

AI 说明书需包含以下关键信息，覆盖页面的 “内容 - 结构 - 交互 - 动态 - 能力” 全维度：

  • 页面元信息：页面类型（如 “商品详情页”“新闻文章页”）、版本号、更新时间、核心功能描述。
  • 核心内容结构：按用户关注的逻辑层级描述核心内容，包含文本、图片、视频等多模态信息，明确每个内容块的语义标签。
  • 交互规则说明：描述页面可交互元素的功能、触发方式、输入输出格式，以及交互后的页面变化。
  • 动态内容说明：明确动态加载内容的触发条件、数据来源、更新时机。
  • 噪声标记：主动标注页面中的无关元素，避免 AI 误识别。
  • 视觉 - 结构关联：可选，关联核心元素的视觉特征与结构标签，辅助 AI 在需要视觉验证时快速匹配。
  • 页面能力说明：类似大模型的 function call，详细列出页面所具备的能力，包括能力名称、功能描述、参数说明、返回值说明、调用方式等，使 AI 能够知晓并调用页面的各项能力。

3.3 实现方式

  1. 页面主动挂载：开发者在页面脚本中直接定义window.AIManual对象，按上述规范填充内容，包括页面能力说明相关信息，AI 模型可直接读取获取结构化信息及能力描述。
  2. 浏览器辅助生成：浏览器提供自动化工具，对无主动挂载说明书的页面，自动提取核心内容、交互规则及页面能力等并生成基础版window.AIManual（需页面允许）。
  3. 动态更新机制：当页面内容、能力等发生变化时，通过MutationObserver监听 DOM 及相关配置变化，自动同步更新window.AIManual的对应字段，确保 AI 获取最新信息。

3.4 “Web 页面 AI 说明书” 方案的具体描述

3.4.1 技术架构

“Web 页面 AI 说明书” 方案的技术架构主要由数据层、接口层和应用层构成。数据层负责存储按照规范生成的结构化元数据，不仅包含页面的各类关键信息，还涵盖页面能力说明相关内容，这些数据以 JSON/JSON-LD 格式存在。接口层提供了 AI 模型与说明书数据交互的通道，既可以是页面全局对象window.AIManual，也可以是浏览器提供的window.getAIManual()API，同时支持 AI 通过特定接口调用页面能力，类似大模型的 function call。应用层则是 AI 模型，通过接口层获取数据层的信息，实现对 Web 页面的理解、交互以及页面能力的调用。

在这个架构中，数据层与接口层紧密相连，接口层作为桥梁，确保 AI 模型能够高效、准确地获取数据层的信息并调用页面能力。同时，动态更新机制贯穿于数据层，当页面内容、能力等发生变化时，及时更新数据层的内容，并通过接口层同步给 AI 模型。

3.4.2 数据格式规范示例

以下是一个电商商品页的window.AIManual数据格式示例，其中包含了页面能力说明：

举个例子 -> window.AIManual数据 

window.AIManual = {
  meta: {
    type: 'productDetail',
    version: '1.0',
    updatedAt: '2025-07-08T10:00:00Z',
    purpose: '展示商品信息及购买入口',
  },
  content: [
    {
      semanticTag: 'productTitle',
      value: '2025款智能手表',
      type: 'text',
    },
    {
      semanticTag: 'price',
      value: '1299',
      unit: '元',
      type: 'number',
    },
    {
      semanticTag: 'specTable',
      value: [
        {
          属性: '屏幕尺寸',
          值: '1.78英寸',
        },
        {
          属性: '电池容量',
          值: '300mAh',
        },
      ],
      type: 'table',
    },
  ],
  interactions: [
    {
      element: 'addCartBtn',
      function: '加入购物车',
      trigger: 'click',
      input: {
        quantity: '整数，默认1',
      },
      output: '购物车数量+1，弹窗提示',
    },
  ],
  dynamicContent: [
    {
      name: 'comments',
      trigger: 'scrollToBottom',
      dataSource: 'window.commentsData',
      updateFrequency: '实时',
    },
  ],
  noise: [
    {
      element: 'sidebarAd',
      type: '广告',
      description: '右侧悬浮推广栏，与商品无关',
    },
  ],
  visualMapping: [
    {
      semanticTag: 'addCartBtn',
      visual: {
        color: '#ff4400',
        position: '商品价格下方',
      },
    },
  ],
  pageCapabilities: [
    {
      capabilityName: 'checkStock',
      description: '查询商品库存数量',
      parameters: [
        {
          name: 'productId',
          type: 'string',
          required: true,
          description: '商品唯一标识ID',
        },
      ],
      returnValue: {
        type: 'number',
        description: '商品当前库存数量',
      },
      callMethod: window.capabilities.checkStock,
      example: "window.capabilities.checkStock('watch2025001') 返回 50",
    },
    {
      capabilityName: 'submitOrder',
      description: '提交商品订单',
      parameters: [
        {
          name: 'productId',
          type: 'string',
          required: true,
          description: '商品唯一标识ID',
        },
        {
          name: 'quantity',
          type: 'number',
          required: true,
          description: '购买数量，需小于等于库存',
        },
        {
          name: 'addressId',
          type: 'string',
          required: true,
          description: '收货地址ID',
        },
      ],
      returnValue: {
        type: 'object',
        properties: {
          orderId: 'string',
          status: "string（'success'或'fail'）",
          message: 'string',
        },
        description: '订单提交结果信息',
      },
      callMethod: window.capabilities.submitOrder,
      example:
        "window.capabilities.submitOrder('watch2025001', 2, 'addr123') 返回 {orderId: 'ord789', status: 'success', message: '订单提交成功'}",
    },
  ],
};

通过这样的页面能力说明，AI 模型能够清晰了解页面具备的能力，并像调用大模型的 function 一样调用页面功能。

3.4.3 开发适配流程

  1. 需求分析：开发者首先明确页面的类型、核心内容、交互功能、页面能力等，确定 AI 说明书需要包含的信息。
  2. 数据填充：根据需求分析的结果，按照数据格式规范，在页面脚本中填充window.AIManual对象的各个字段，特别是详细填写页面能力说明部分。
  3. 测试验证：开发完成后，进行测试，检查说明书中的信息是否准确、完整，页面能力调用是否正常，能否被 AI 模型正确读取、理解和调用。可以通过模拟 AI 模型读取和调用的方式，验证数据的有效性和能力调用的可行性。
  4. 动态更新适配：针对页面中可能发生变化的内容、能力等，设置MutationObserver监听 DOM 及相关配置变化，并编写相应的脚本，确保当内容或能力变化时，window.AIManual能够及时更新。
  5. 浏览器兼容处理：考虑不同浏览器对window.AIManual对象、相关 API 以及页面能力调用方式的支持情况，进行必要的兼容处理，确保在主流浏览器中都能正常运行。

四、方案优势与挑战

4.1 优势

  • 解决痛点：直接提供逻辑结构，无需 AI 解析嵌套标签；主动标记无关元素，减少干扰；明确动态内容触发方式和数据来源；整合多模态信息，补充单一模态不足；提供页面能力说明，方便 AI 调用页面功能。
  • 效率高：AI 无需解析 HTML / 视觉信息，直接读取结构化数据，处理速度大幅提升；且能快速调用页面能力，提高交互效率。
  • 适用场景广：适用于需 AI 深度交互、动态页面、高准确性要求、需要调用页面能力等场景。
  • 类似 function call 的便捷性：页面能力说明清晰，AI 可像调用大模型 function 一样调用页面能力，简化交互流程。

4.2 挑战

  • 开发成本：需开发者额外编写说明书，尤其是详细的页面能力说明（可通过工具自动化缓解）。
  • 规范统一：不同网站的说明书格式，包括页面能力说明的格式需统一，否则 AI 处理和调用成本高。
  • 安全性：恶意网站可能篡改说明书，包括页面能力说明，误导 AI 调用错误能力或获取错误信息（需配合验证机制）。
  • 动态更新维护：页面内容、能力等变化时，说明书同步更新的维护成本较高。
  • 能力兼容性：不同页面的能力实现方式可能不同，AI 调用时可能存在兼容性问题。

五、方案对比分析

方式核心逻辑效率准确性开发成本适用场景
AI 视觉识别（截图）视觉解析→信息提取中低低仅需视觉内容、无结构化需求（如随机排版的海报）
HTML 源码提取源码解析→语义理解中中中内容规整、静态页面（如博客文章）
HTML 标注 + AI 视觉结合标注引导→多模态解析中高高关键内容高敏场景（如医疗报告）
Web 页面 AI 说明书主动提供结构化元数据及页面能力说明，支持类似 function call 调用高高中（工具辅助可降）需 AI 深度交互、动态页面、高准确性要求、需要调用页面能力场景（如电商、自动化操作、智能办公）

六、标准化路径

6.1 制定 JSON Schema 标准

定义AIManual的必填字段、数据类型和校验规则，包括页面能力说明部分的字段规范（如capabilityName、parameters等），确保跨网站兼容性。

6.2 开发自动化生成工具

浏览器或第三方提供 SDK，自动根据页面结构生成基础说明书，包括自动识别和提取页面能力并生成相应说明（如基于页面 JS 函数和接口映射），降低开发者负担。

6.3 建立验证机制

通过数字签名确保说明书真实性，包括页面能力说明的真实性，避免恶意篡改（如电商页面伪造库存查询能力返回错误数据）。

6.4 扩展交互协议

进一步完善 AI 与页面的交互协议，支持更复杂的页面能力调用，如异步调用、批量调用等，实现 “AI - 页面” 更高效的直接交互。

七、未来展望

“Web 页面 AI 说明书” 方案通过 “页面主动向 AI 自我介绍” 及提供页面能力说明的思路，从根源上解决了 AI 解析 Web 页面的诸多问题，且支持类似大模型 function call 的页面能力调用，是对现有方式的颠覆性补充。随着规范普及和工具成熟，该方案有望成为 AI 与 Web 页面交互的主流协议，推动 “AI 理解 Web” 从 “猜” 走向 “明确沟通”，并实现 “AI 调用 Web 能力” 的便捷化。

这将极大地促进 AI 在 Web 领域的应用，如更智能的搜索引擎能直接调用页面能力获取精准数据，更高效的自动化办公可通过 AI 调用各类办公页面功能完成复杂任务，更优质的智能助手服务能借助页面能力为用户提供更全面的帮助等，为用户带来全新的 Web 体验，推动整个互联网生态向更智能、更高效的方向发展。

avatar
文章
阅读
粉丝