WebCraftBench – 騰訊聯合清華推出的AI網頁生成評測基準

WebCraftBench是什麼

WebCraftBench 是騰訊混元聯合清華、北大推出的 AI 網頁生成評測基準。WebCraftBench先給生成應用自動插樁，讓智能體通過 Playwright 實際操作網頁探索功能，用代碼覆蓋率引導查漏；再將交互記錄抽象成狀態圖，從美觀度、易用性、需求符合度三個維度分別打分。基準含 369 條真實需求、5,088 條人工覈驗的驗收標準，覆蓋 17 個前沿模型的 6,273 個應用，與人類偏好一致率達 85.3%。

WebCraftBench的主要功能

• 真實需求評測集：包含 369 條來自真實使用流量的用戶需求，配 5,088 條經人工覈驗的驗收標準，覆蓋功能、內容、視覺三類要求。
• 交互式自動探索：智能體通過 Playwright MCP 像測試人員一樣點擊、輸入、切換頁面，主動發現功能並測試邊界情況。
• 代碼覆蓋率引導：基於 Istanbul 自動插樁，實時監測覆蓋率，發現探索不足時由輔助模型提示未觸達的代碼方向。
• 狀態抽象與整理：將冗長的操作記錄去重、規範化，合併爲狀態轉移圖，提煉關鍵運行證據供評分使用。
• 三維獨立評分：分別評估美觀度、易用性、需求符合度，合成標準化綜合分。
• 人類偏好驗證：在獨立驗證集上與經複覈的人工投票對比，成對判斷一致率達 85.3%，驗證評測可靠性。

WebCraftBench的技術原理

• 自動插樁收集運行證據：系統在應用代碼中注入計數器，支持靜態 HTML、Vite、Next、CRA、Astro 等框架。應用啓動後，每次交互都會回傳代碼覆蓋率及增量，讓”哪些代碼被執行過”變得可觀測。
• 覆蓋率引導的智能體探索：探索智能體不看不源碼、不看驗收清單，按 GUI 測試流程操作網頁。當連續三次交互沒有帶來新增覆蓋時，系統請另一個模型分析尚未執行的代碼，將建議轉成自然語言交給探索智能體繼續嘗試。
• 狀態抽象壓縮交互軌跡 對頁面結構做規範化處理，相同頁面合併爲同一狀態，操作連接爲狀態轉移圖。避免重複截圖擠佔評分模型的上下文，讓故障路徑一目瞭然。
• 探索與評分分離的多維打分：探索階段收集證據時不看驗收清單，評分階段才逐條對照標準檢索證據。美觀度和易用性採用”找優點—挑缺陷—裁判定分”的三輪評議（；需求符合度每條判斷必須引用運行證據，按滿足比例計分。三個維度各佔綜合分三分之一。

如何使用WebCraftBench

• 準備生成應用：讓被評測的模型根據需求生成網頁應用，部署爲可運行狀態。
• 自動插樁：運行 WebCraftBench 的插樁工具，在應用代碼中注入覆蓋率計數器，使每次交互都能回傳代碼執行信息。
• 交互探索：啓動探索智能體，通過 Playwright MCP 操作網頁，執行點擊、輸入、切換頁面等動作，主動發現功能並測試邊界情況。
• 覆蓋率引導查漏：當連續三次交互無新增覆蓋時，系統由輔助模型分析未執行代碼，生成自然語言建議交給探索智能體繼續探索（最多 100 步）。
• 整理運行證據：系統自動對頁面結構做狀態抽象，將操作記錄去重合併爲狀態轉移圖，保留截圖與交互軌跡。
• 三維評分：評分智能體分別評估美觀度、易用性，逐條對照驗收標準檢查需求符合度，每條判斷須引用運行證據。
• 輸出結果：獲得三個維度的標準化分數及綜合總分，可與模型池排名對比，分差越大結果越可信。

WebCraftBench的核心優勢

• 實測導向：讓智能體真實操作網頁打分，而非只看代碼或截圖，能發現”入口按鈕壞了、首頁打不開”這類靜態評測漏掉的問題。
• 覆蓋率引導探索：用代碼覆蓋率做”查漏線索”，測試智能體找不到功能時由後台模型提示方向，減少把探索失敗誤判爲產品缺陷。
• 探索與評分分離：驗收清單隻在評分階段使用，既保留需求約束，又不限制清單之外的交互被觀察，擴大評測覆蓋範圍。
• 多維獨立評分：美觀度、易用性、需求符合度分開打分，避免”顏值高但一用就崩”的模型被單一總分掩蓋短板。
• 人類偏好高度一致：在 197 組經複覈的人工對比中判斷一致率達 85.3%，分差大時（≥0.75）一致率升至 98%，結果可信度高。
• 評測穩定性強：更換評分裁判模型後排名相關係數仍達 0.980，前四名順序不變，結論不依賴單一裁判。

WebCraftBench的項目地址

• arXiv技術論文：https://arxiv.org/pdf/2609.15387

WebCraftBench的同類競品對比

WebCraftBench的應用場景

• AI 編程工具的模型選型：團隊選擇用哪個大模型生成網頁應用時，用 WebCraftBench 的三維分數做客觀對比，避免只看 demo 顏值做決策。
• AI 網頁生成產品的驗收測試：把 WebCraftBench 的”實測流程”接入產品交付環節，替代人工逐頁點驗，自動發現入口失效、功能不可達等問題。
• 代碼生成模型的迭代迴歸測試：模型每次升級後跑一遍基準，對比美觀度、易用性、需求符合度的變化，量化新版本是進步還是退步。
• 生成質量的分層診斷：利用維度拆分和低覆蓋率線索定位問題，是設計不行、交互有 bug，還是需求理解跑偏，指導定向優化。