谷歌工程師用1個(gè)JSON文件，讓AI終于看懂網(wǎng)頁了

去年，一個(gè)AI助手試圖幫用戶修改電商網(wǎng)站，結(jié)果把支付按鈕的顏色從品牌藍(lán)改成了默認(rèn)紅。用戶損失了12%的轉(zhuǎn)化率，工程師排查了3小時(shí)才發(fā)現(xiàn)問題：AI根本沒理解那個(gè)按鈕是"結(jié)賬"不是"裝飾"。

這種荒誕場景每天都在發(fā)生。AI代理（AI Agent，自主執(zhí)行任務(wù)的智能程序）瀏覽網(wǎng)頁時(shí)，本質(zhì)上是在做一道逆向工程題——盯著壓縮后的HTML和JavaScript，猜測開發(fā)者原本想干什么。它們看不見組件之間的關(guān)系，讀不懂品牌色值，更摸不清API的數(shù)據(jù)結(jié)構(gòu)。

谷歌工程師Om Raj決定掀桌。他做了一個(gè)叫WebDNA的開源工具，用1個(gè)自動生成的JSON文件，把"人類寫代碼的方式"和"機(jī)器消費(fèi)信息的方式"橋接起來。

AI看網(wǎng)頁，像考生做沒選項(xiàng)的閱讀理解

現(xiàn)在的AI代理是怎么工作的？打個(gè)比方：你讓實(shí)習(xí)生整理一份檔案，但只給他看碎紙機(jī)吐出來的紙條，讓他還原原件的排版和重點(diǎn)。AI面對的就是這種局面。

它們解析的是瀏覽器最終渲染的DOM（文檔對象模型，網(wǎng)頁的結(jié)構(gòu)化表示），但DOM已經(jīng)丟失了太多信息。Tailwind的配置文件里明明寫著品牌主色是#0A2540，AI看到的只是內(nèi)聯(lián)樣式里的十六進(jìn)制字符串。Next.js的路由結(jié)構(gòu)在代碼里清晰分層，AI卻只能摸索URL規(guī)律去猜。

更麻煩的是動態(tài)路由。一個(gè)電商網(wǎng)站的商品頁可能是/products/[id]，AI知道這里有個(gè)變量，但不知道id是SKU還是數(shù)據(jù)庫主鍵，不知道哪些字段必須傳給API，更不知道某些區(qū)域是用戶專屬、需要登錄態(tài)才能渲染。

Om Raj在GitHub文檔里寫得很直接：「現(xiàn)有方案像站點(diǎn)地圖（sitemap）或robots.txt，只給AI一張目錄清單，卻不解釋設(shè)計(jì)系統(tǒng)或數(shù)據(jù)需求?！?/p>

WebDNA的解法是把"隱式知識"變成"顯式說明書"。

Next.js構(gòu)建時(shí)，自動吐出一張"建筑藍(lán)圖"

安裝WebDNA只需要改一行配置文件。下次構(gòu)建Next.js項(xiàng)目時(shí)，它會掃描三件事：

路由樹結(jié)構(gòu)——哪些頁面是靜態(tài)的，哪些是動態(tài)的，動態(tài)路由的參數(shù)約束是什么；設(shè)計(jì)令牌（Design Tokens）——從Tailwind配置提取的顏色、間距、字體系統(tǒng)，讓AI知道"品牌藍(lán)"不是隨便一個(gè)藍(lán)色；組件層級——頁面由哪些可復(fù)用組件構(gòu)成，每個(gè)組件的輸入輸出接口。

最終生成一個(gè)靜態(tài)JSON文件，放在網(wǎng)站的固定路徑（/.well-known/webdna.json）。這個(gè)文件只讀、不執(zhí)行代碼，AI代理訪問網(wǎng)站時(shí)先讀它，相當(dāng)于拿到一張帶注釋的建筑藍(lán)圖。

Om Raj舉了個(gè)具體例子：開發(fā)者可以給某個(gè)div加上data-webdna-exclude屬性，這個(gè)區(qū)域就不會出現(xiàn)在AI可見的清單里。支付表單的敏感字段、內(nèi)部管理后臺的調(diào)試信息，都能被精準(zhǔn)隱藏。

「這是基于同意的結(jié)構(gòu)化訪問，而不是讓AI工具能爬到什么算什么?！?/p>

1個(gè)屬性解決的安全焦慮

隱私設(shè)計(jì)是WebDNA的底層邏輯，不是事后補(bǔ)丁。

那個(gè)JSON文件本身是靜態(tài)的，意味著它不能被注入惡意腳本，也不會因?yàn)榉?wù)器漏洞而泄露動態(tài)數(shù)據(jù)。元素級排除（element-level exclusion）讓控制權(quán)完全回到開發(fā)者手里——不是全站開放或全封閉的二選一，而是精確到DOM節(jié)點(diǎn)的粒度。

這對企業(yè)場景很關(guān)鍵。一個(gè)SaaS平臺可能愿意讓AI代理讀取公開的產(chǎn)品介紹頁，但絕對不想暴露管理后臺的API端點(diǎn)結(jié)構(gòu)。WebDNA允許這種分層披露：公開路由完整描述，私有路由直接標(biāo)記為excluded。

技術(shù)社區(qū)的反應(yīng)比預(yù)期快。項(xiàng)目上線兩周，GitHub倉庫收到47個(gè)issue，其中三分之一是請求支持Vue和Svelte構(gòu)建工具——目前WebDNA只深度集成Next.js，但架構(gòu)設(shè)計(jì)是通用的。

Om Raj的回應(yīng)很產(chǎn)品經(jīng)理：「先在一個(gè)生態(tài)跑通，再橫向擴(kuò)展?！?/p>

從"能爬"到"能懂"，網(wǎng)頁正在進(jìn)化

WebDNA的野心不止于讓AI少犯錯(cuò)。它試圖定義一種新標(biāo)準(zhǔn)：機(jī)器可讀的網(wǎng)站架構(gòu)描述。

類比的話，這有點(diǎn)像Schema.org（結(jié)構(gòu)化數(shù)據(jù)標(biāo)記標(biāo)準(zhǔn)）的反向操作。Schema.org是讓網(wǎng)站告訴搜索引擎"這個(gè)頁面是食譜，評分4.5星"，WebDNA是讓網(wǎng)站告訴AI代理"這個(gè)組件是按鈕，點(diǎn)擊觸發(fā)結(jié)賬流程，需要以下參數(shù)"。

如果更多框架跟進(jìn)，未來的AI代理可能不再需要"猜"網(wǎng)頁結(jié)構(gòu)。它們會像人類開發(fā)者一樣，先看README再看代碼——只不過這個(gè)README是機(jī)器自動寫的，且實(shí)時(shí)同步。

Om Raj在文檔結(jié)尾留了句話：「讓下一代軟件工具更容易訪問網(wǎng)頁，只需要在配置文件中加一個(gè)簡單選項(xiàng)。」

這個(gè)選項(xiàng)現(xiàn)在已經(jīng)在npm上可用。但更值得問的是：當(dāng)你的競爭對手的網(wǎng)站能被AI精準(zhǔn)理解和自動化改造，而你的網(wǎng)站還在讓AI"猜"，這種信息差會累積成多大的效率鴻溝？