project
WebCraftBench - 腾讯联合清华推出的AI网页生成评测基准
WebCraftBench 是腾讯混元联合清华、北大推出的 AI 网页生成评测基准。WebCraftBench先给生成应用自动插桩，让智能体通过 Playwright 实际操作网页探索功能，...
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 | WebArena |
|---|---|---|
| 评测对象 | AI 生成的网页应用质量 | 智能体在现成真实网站上的任务完成能力 |
| 核心问题 | “AI 写的网页好不好？” | “智能体会不会用网页？” |
| 被测主体 | 生成模型（Claude、GPT、Qwen 等） | 智能体（Agent）本身 |
| 评测方式 | 插桩 + 覆盖率引导探索 + 三维评分（美观/易用/需求符合） | 在 812 个任务上执行操作，按任务成功率判定 |
| 打分依据 | 运行证据 + 5,088 条验收标准 + LLM 评议 | 最终状态与正确答案比对（偏功能对错） |
| 覆盖维度 | 功能、易用性、视觉美观三个维度 | 主要功能成功率，不评估美观与视觉质量 |
| 需求来源 | 369 条真实用户平台流量，含口语模糊需求 | 人工设计的确定性任务（GitLab、Reddit、电商等 5 类站点） |
WebCraftBench的应用场景
-
AI 编程工具的模型选型：团队选择用哪个大模型生成网页应用时，用 WebCraftBench 的三维分数做客观对比，避免只看 demo 颜值做决策。
-
AI 网页生成产品的验收测试：把 WebCraftBench 的”实测流程”接入产品交付环节，替代人工逐页点验，自动发现入口失效、功能不可达等问题。
-
代码生成模型的迭代回归测试：模型每次升级后跑一遍基准，对比美观度、易用性、需求符合度的变化，量化新版本是进步还是退步。
-
生成质量的分层诊断：利用维度拆分和低覆盖率线索定位问题，是设计不行、交互有 bug，还是需求理解跑偏，指导定向优化。