谷歌工程师用1个JSON文件，让AI终于看懂网页了

去年，一个AI助手试图帮用户修改电商网站，结果把支付按钮的颜色从品牌蓝改成了默认红。用户损失了12%的转化率，工程师排查了3小时才发现问题：AI根本没理解那个按钮是"结账"不是"装饰"。

这种荒诞场景每天都在发生。AI代理（AI Agent，自主执行任务的智能程序）浏览网页时，本质上是在做一道逆向工程题——盯着压缩后的HTML和JavaScript，猜测开发者原本想干什么。它们看不见组件之间的关系，读不懂品牌色值，更摸不清API的数据结构。

谷歌工程师Om Raj决定掀桌。他做了一个叫WebDNA的开源工具，用1个自动生成的JSON文件，把"人类写代码的方式"和"机器消费信息的方式"桥接起来。

AI看网页，像考生做没选项的阅读理解

现在的AI代理是怎么工作的？打个比方：你让实习生整理一份档案，但只给他看碎纸机吐出来的纸条，让他还原原件的排版和重点。AI面对的就是这种局面。

它们解析的是浏览器最终渲染的DOM（文档对象模型，网页的结构化表示），但DOM已经丢失了太多信息。Tailwind的配置文件里明明写着品牌主色是#0A2540，AI看到的只是内联样式里的十六进制字符串。Next.js的路由结构在代码里清晰分层，AI却只能摸索URL规律去猜。

更麻烦的是动态路由。一个电商网站的商品页可能是/products/[id]，AI知道这里有个变量，但不知道id是SKU还是数据库主键，不知道哪些字段必须传给API，更不知道某些区域是用户专属、需要登录态才能渲染。

Om Raj在GitHub文档里写得很直接：「现有方案像站点地图（sitemap）或robots.txt，只给AI一张目录清单，却不解释设计系统或数据需求。」

WebDNA的解法是把"隐式知识"变成"显式说明书"。

Next.js构建时，自动吐出一张"建筑蓝图"

安装WebDNA只需要改一行配置文件。下次构建Next.js项目时，它会扫描三件事：

路由树结构——哪些页面是静态的，哪些是动态的，动态路由的参数约束是什么；设计令牌（Design Tokens）——从Tailwind配置提取的颜色、间距、字体系统，让AI知道"品牌蓝"不是随便一个蓝色；组件层级——页面由哪些可复用组件构成，每个组件的输入输出接口。

最终生成一个静态JSON文件，放在网站的固定路径（/.well-known/webdna.json）。这个文件只读、不执行代码，AI代理访问网站时先读它，相当于拿到一张带注释的建筑蓝图。

Om Raj举了个具体例子：开发者可以给某个div加上data-webdna-exclude属性，这个区域就不会出现在AI可见的清单里。支付表单的敏感字段、内部管理后台的调试信息，都能被精准隐藏。

「这是基于同意的结构化访问，而不是让AI工具能爬到什么算什么。」

1个属性解决的安全焦虑

隐私设计是WebDNA的底层逻辑，不是事后补丁。

那个JSON文件本身是静态的，意味着它不能被注入恶意脚本，也不会因为服务器漏洞而泄露动态数据。元素级排除（element-level exclusion）让控制权完全回到开发者手里——不是全站开放或全封闭的二选一，而是精确到DOM节点的粒度。

这对企业场景很关键。一个SaaS平台可能愿意让AI代理读取公开的产品介绍页，但绝对不想暴露管理后台的API端点结构。WebDNA允许这种分层披露：公开路由完整描述，私有路由直接标记为excluded。

技术社区的反应比预期快。项目上线两周，GitHub仓库收到47个issue，其中三分之一是请求支持Vue和Svelte构建工具——目前WebDNA只深度集成Next.js，但架构设计是通用的。

Om Raj的回应很产品经理：「先在一个生态跑通，再横向扩展。」

从"能爬"到"能懂"，网页正在进化

WebDNA的野心不止于让AI少犯错。它试图定义一种新标准：机器可读的网站架构描述。

类比的话，这有点像Schema.org（结构化数据标记标准）的反向操作。Schema.org是让网站告诉搜索引擎"这个页面是食谱，评分4.5星"，WebDNA是让网站告诉AI代理"这个组件是按钮，点击触发结账流程，需要以下参数"。

如果更多框架跟进，未来的AI代理可能不再需要"猜"网页结构。它们会像人类开发者一样，先看README再看代码——只不过这个README是机器自动写的，且实时同步。

Om Raj在文档结尾留了句话：「让下一代软件工具更容易访问网页，只需要在配置文件中加一个简单选项。」

这个选项现在已经在npm上可用。但更值得问的是：当你的竞争对手的网站能被AI精准理解和自动化改造，而你的网站还在让AI"猜"，这种信息差会累积成多大的效率鸿沟？