港中文团队发布WebGen-Bench：让AI从零写网站，但最强模型正确率仅27.8%

这项由香港中文大学多媒体实验室（MMLab）的卢子木、杨云桥、任厚兴等研究团队完成的开创性研究发表于2025年5月。研究团队构建了业界首个专门评估大语言模型从零生成网站能力的基准测试WebGen-Bench，并开源了相关代码和数据。有兴趣深入了解的读者可以通过GitHub链接（https://github.com/mnluzimu/WebGen-Bench）访问完整的研究资料和开源代码。

随着人工智能技术的飞速发展，我们经常听说AI能写代码、能聊天、能画画，但如果让AI从零开始建一个完整的网站，它能做到什么程度呢？这个问题听起来简单，但实际上比我们想象的要复杂得多。就像让一个人不仅要会做菜，还要能开餐厅、管理后厨、设计菜单、装修门面一样，建网站需要AI同时掌握多种技能：规划网站结构、编写代码文件、实现各种功能、还要让页面看起来美观实用。

港中文的研究团队意识到，虽然市面上有很多评估AI编程能力的测试，但这些测试大多像是"修补工作"——给AI一个已经存在的代码库，让它修复bug或者添加小功能。但真正从零开始建一个网站，就像是让AI当一回"建筑师兼施工队长"，需要从地基开始，一砖一瓦地盖起整栋房子。为了填补这个空白，他们创建了WebGen-Bench这个专门的测试平台。

这个研究的重要性在于，它第一次系统性地回答了一个关键问题：当我们把建网站这个任务完全交给AI时，它能做得有多好？这不仅关系到程序员的工作会如何变化，更关系到普通人是否有一天能够通过简单的自然语言描述，就让AI帮自己建一个功能完整的网站。研究结果显示，即使是目前最强的AI模型，在这个任务上的表现也只有27.8%的正确率，这意味着AI建网站的路还很长，但同时也展现了巨大的发展空间。

一、WebGen-Bench：为AI建网站能力量身定制的"考试系统"

要评估AI建网站的能力，首先需要一套公平、全面的"考试题目"。港中文团队设计的WebGen-Bench就像是为AI量身定制的网站建设能力测试中心。这个测试系统的设计思路很像我们熟悉的驾照考试——不仅要考理论知识，更要看实际操作能力。

研究团队首先面临一个挑战：如何创造出既多样又实用的网站建设任务？他们采用了一种很聪明的方法，就像美食节目中厨师们会根据不同菜系和口味偏好设计挑战一样。团队先是仔细研究了Upwork、Freelancer、Proginn等真实的网站开发接单平台，从中总结出20种最常见的网站类型，包括个人作品集网站、企业宣传网站、电商平台、社交媒体、论坛系统等等。

接下来，他们召集了40名计算机科学博士生进行"头脑风暴"，就像编剧团队一起构思剧本一样。这些博士生根据这20种网站类型，设想出各种具体的应用场景和功能需求，最终创造出了10,152个项目描述。这些描述就像是"甲方"给开发者的需求文档，详细说明了网站需要实现什么功能、长什么样子。

为了确保指令的质量和多样性，研究团队使用GPT-4o将这些项目描述转换成了自然语言指令。这个过程就像是把技术规格书翻译成普通人能理解的话。比如，一个技术规格可能写着"实现用户认证系统和CRUD操作"，翻译后的指令就会说"请建一个网站，用户可以注册登录，还能添加、查看、修改和删除自己的信息"。

最终，研究团队精心挑选出101个最具代表性的指令作为正式测试集，这些指令涵盖了几乎所有重要的网站应用类型。每个指令的平均长度约为497个字符，包含的功能需求平均有6.4个，确保了测试的充分性。同时，为了避免训练数据污染问题，团队还构建了一个包含6,667个指令的训练集WebGen-Instruct，并通过严格的去重处理确保训练集和测试集之间没有重叠。

这种设计确保了WebGen-Bench能够全面考察AI在网站建设各个环节的能力，从高层规划到具体实现，从功能开发到界面设计，形成了一个完整的评估体系。

二、647个"实际操作题"：如何验证AI建的网站真正能用

光有建网站的指令还不够，就像考驾照不能只看你会不会背交通规则，还得看你能不能真正把车开好一样。港中文团队面临的下一个挑战是：如何客观地评判AI建出来的网站质量如何？

为了解决这个问题，研究团队为每个网站建设指令都设计了详细的"功能测试题"。这个过程就像为每道菜谱都准备相应的品尝标准一样。他们首先使用GPT-4o为每个指令生成初步的测试用例，然后安排两名计算机科学博士生独立审查和完善这些测试用例。如果两人的意见不一致，就通过讨论达成共识，确保每个测试用例都准确对应指令中的某个具体要求。

最终，101个建网站指令共产生了647个测试用例，平均每个指令有6.4个测试用例。每个测试用例都设计得很具体，包含两个核心部分：要执行的操作和期望的结果。比如，对于一个在线商店网站，一个测试用例可能是"在购物车中添加商品，然后进入结账页面"，期望的结果是"商品正确显示在购物车中，结账页面能正常加载并显示商品信息和价格"。

传统的做法是请人工测试员逐一测试这些网站，但这样做成本高昂且耗时巨大。研究团队估算，如果用人工测试，完成所有647个测试用例需要大约10.8小时，成本约377.8美元。更重要的是，人工测试的速度太慢，无法支持快速迭代和大规模实验。

因此，团队引入了一个"自动化测试助手"——基于WebVoyager的UI代理。这就像是雇佣了一个永不疲倦的测试员，它能够像真实用户一样浏览网站、点击按钮、填写表单、查看页面内容。这个AI测试助手使用Qwen2.5-VL-32B-Instruct作为"大脑"，能够理解测试指令，执行相应操作，并判断结果是否符合期望。

AI测试助手的工作流程很有趣：它会根据测试用例的描述在网站上执行相应操作，比如搜索特定内容、提交表单、导航到不同页面等。然后，它会仔细"观察"网站的反应，分析页面变化、内容显示等，最后给出YES（完全达到期望）、PARTIAL（部分达到期望）或NO（未达到期望）的评判。

为了验证这个自动化测试系统的准确性，研究团队还进行了人工验证。他们选择了三个代表性模型的测试结果，安排人工测试员进行同样的测试，然后比较AI测试助手和人工测试员的结果。令人欣慰的是，AI测试助手的判断与人工测试员的一致性达到了86.1%到94.4%，证明了自动化测试的可靠性。

除了功能测试，研究团队还设计了外观评估系统。毕竟，一个网站不仅要功能正常，还要看起来美观大方。他们使用GPT-4o对每个生成的网站进行外观评分，评估标准包括页面渲染是否正确、内容是否相关、布局是否和谐、设计是否现代美观等，最终给出1到5分的评分。

三、三大代理框架同台竞技：谁是最佳"AI建站助手"

有了完善的测试系统，接下来就要看不同的AI代理框架在建网站任务上的实际表现了。港中文团队选择了三个目前最受欢迎的代码生成代理框架进行对比测试，就像是让三位不同风格的建筑师用同样的材料建房子，看看谁的作品更优秀。

第一位"选手"是Bolt.diy，它是知名网站建设工具Bolt.new的开源版本。Bolt.diy就像是一位专门的网站建筑师，它专门为网站开发而设计。当接到建站任务时，Bolt.diy会首先决定使用哪些技术框架（比如React、Vite、Remix等），然后导入基础模板，在此基础上逐步构建完整的网站。它提供了一个类似浏览器的操作环境，可以实时预览网站效果，就像建筑师可以在绘图板上随时查看设计效果一样。

第二位"选手"是OpenHands，这是一个通用的AI软件开发平台。OpenHands就像是一个多才多艺的全能工程师，不仅能建网站，还能处理各种其他的编程任务。在这次测试中，研究团队让OpenHands搭配CodeActAgent来执行网站建设任务。

第三位"选手"是Aider，这是一个基于终端的AI编程框架。Aider就像是一位经验丰富的命令行专家，它原生支持多种编程语言，包括Python、JavaScript、PHP、HTML、CSS等。Aider的特长是构建整个代码库的"地图"，这使得它在处理大型项目时表现出色。

为了公平比较，研究团队首先让这三个框架都使用DeepSeek-V3作为"大脑"进行初步测试。结果显示，Bolt.diy明显领先，准确率达到20.8%，而OpenHands只有9.0%，Aider为14.1%。这个结果其实并不意外，因为Bolt.diy是专门为网站开发设计的，就像专业厨师在烹饪比赛中通常会比业余爱好者表现更好一样。

既然Bolt.diy表现最佳，研究团队就以它为平台，测试了多种不同的大语言模型作为"大脑"的效果。他们测试了Claude-3.5-Sonnet、DeepSeek-R1、GPT-4o、o3-mini、Qwen2.5-Coder-32B、Qwen2.5-72B-Instruct等多个模型。

测试结果颇有意思：DeepSeek-R1取得了最高的功能准确率27.8%，紧随其后的是Claude-3.5-Sonnet的26.4%。但在外观设计方面，Claude-3.5-Sonnet获得了3.0分的最高评分，而DeepSeek-R1只有2.5分。这就像是一个工程师功能实现能力很强，但审美水平一般，而另一个工程师虽然功能稍逊，但设计品味更好。

值得注意的是，即使是表现最好的组合（Bolt.diy + DeepSeek-R1），在647个测试用例中也只有27.8%的准确率。这个结果看似不高，但要知道，建网站是一个极其复杂的任务，需要AI同时掌握规划、编程、设计、测试等多种技能。就像让一个人同时扮演建筑师、工程师、装修工和质检员的角色一样，出错的环节太多了。

从错误分析来看，超过一半的失败案例都是因为网站启动失败或模板修改不当造成的。这说明当前AI在网站项目的基础设施搭建和环境配置方面还存在明显不足，就像盖房子时地基没打好，后面的工程自然无法顺利进行。

四、分类表现分析：AI在不同类型网站建设中的"偏科"现象

深入分析测试结果，研究团队发现了一个有趣的现象：AI在不同类型的网站建设任务中表现差异很大，就像学生在不同科目上会有明显的强弱项一样。

从网站功能类型来看，研究团队将101个测试指令分为三大类：内容展示类、用户交互类和数据管理类。内容展示类网站主要负责信息呈现，比如企业官网、个人作品集、新闻网站等，这类网站相对简单，主要是静态页面展示。用户交互类网站需要处理用户操作，比如表单提交、用户登录、实时聊天、电商交易等，复杂度中等。数据管理类网站则要处理复杂的数据操作，比如增删改查、API集成、大数据处理等，是最复杂的类型。

测试结果显示，AI在内容展示类网站上表现最好，平均准确率能达到35%以上。这就像让一个新手厨师做简单的凉菜拌盘，虽然不够精致，但基本能做到色香味俱全。相比之下，AI在数据管理类网站上的表现最差，准确率普遍在10-20%之间，就像让新手厨师做复杂的法式大餐，往往顾此失彼，难以兼顾。

从测试用例类型来看，研究团队将647个测试用例分为功能测试、数据展示测试和设计验证测试三类。功能测试占比最大（52.4%），主要验证网站的各种功能是否正常工作，比如表单提交、用户认证、搜索功能等。数据展示测试（28.7%）主要检查网站是否能正确显示和更新数据，比如用户信息、产品列表、统计图表等。设计验证测试（18.9%）则关注网站的外观和用户体验，比如颜色搭配、布局合理性、响应式设计等。

令人意外的是，AI在设计验证测试中的表现最好，平均准确率能达到40-50%。这说明当前AI在实现指定的颜色、字体、布局等设计要求方面相对可靠，就像一个装修工人能够按照设计图纸准确地刷墙贴瓷砖一样。而在功能测试中，AI的表现相对较差，平均准确率只有20-30%，说明在实现复杂交互逻辑方面还有很大提升空间。

另一个有趣的发现是，AI生成的网站在文件数量和代码行数上呈现出明显的模式。表现好的模型（如WebGen-LM系列）倾向于生成更多代码行数而不过度增加文件数量，平均每个项目约8个文件、315行代码。而表现较差的模型（如GPT-4o、o3-mini）则容易生成过多的小文件，每个文件代码很少，导致项目结构混乱，就像把一本书撕成很多碎片分别装订，反而不如保持相对完整的章节结构。

这些分析结果为改进AI建网站能力指明了方向：当前最需要提升的是复杂功能的实现能力和项目结构的组织能力，而在基础的页面展示和设计实现方面，AI已经有了不错的基础。

五、训练专门的"网站建设AI"：WebGen-LM系列模型的诞生

看到现有AI模型在网站建设任务上的表现还有很大提升空间，港中文团队决定"因材施教"，专门训练一系列针对网站建设优化的AI模型，这就是WebGen-LM系列。

这个过程就像是从通用工程师中培养专业的网站建设专家。研究团队首先从他们构建的WebGen-Instruct训练集中精选出2000个高质量的网站建设指令，然后使用表现最好的DeepSeek-V3模型来生成相应的建站过程轨迹。这就像是让一位经验丰富的老师傅手把手地演示如何建网站，记录下每一个步骤和决策过程。

为了确保训练质量，团队采用了"拒绝采样"的方法，只保留那些生成网站外观评分达到3分以上的轨迹。这个过程就像是筛选优秀作品用作教学案例，只有那些既功能完善又外观合格的网站建设过程才被保留下来。经过筛选，最终得到了600个高质量的训练轨迹。

基于这些珍贵的训练数据，研究团队对Qwen2.5-Coder-Instruct系列的三个不同规模模型（7B、14B、32B参数）进行了专门的微调训练。训练过程很像教授专业课程：使用4e-5的学习率，批次大小为32，训练2个epoch。不同规模的模型使用不同数量的GPU进行训练，32B模型使用32块A800 GPU，训练资源最为密集。

训练完成后，WebGen-LM系列模型在网站建设任务上的表现令人印象深刻。最大的WebGen-LM-32B模型达到了38.2%的准确率，不仅比原始的Qwen2.5-Coder-32B-Instruct（9.5%）提升了4倍，甚至超过了表现最好的通用模型DeepSeek-R1（27.8%）。这个结果充分证明了专门训练的价值，就像专业培训确实能让普通工程师成为网站建设专家。

更有趣的是，随着模型规模的增大，性能提升也很明显：WebGen-LM-7B达到28.4%，WebGen-LM-14B达到29.4%，WebGen-LM-32B达到38.2%。这种规律性的提升说明，对于复杂的网站建设任务，更大的模型确实能够学习到更丰富的知识和更细致的技能。

从生成的代码质量来看，WebGen-LM系列模型也展现出了更好的工程实践。它们生成的网站平均包含更多的代码行数，但文件组织更加合理，不会像一些通用模型那样生成过多的小文件导致项目结构混乱。这说明专门训练让AI学会了更好的软件工程实践，就像专业培训让程序员学会了如何组织大型项目的代码结构。

值得注意的是，所有WebGen-LM模型生成的代码行数都超过了它们的"老师"DeepSeek-V3，这在一定程度上归因于拒绝采样过程的作用。通过只学习高质量的网站建设案例，模型学会了生成更完整、更详细的实现，而不是简单地抄袭模板或生成功能不完整的代码。

这一系列实验结果表明，针对特定任务进行专门训练确实是提升AI能力的有效途径。虽然WebGen-LM模型仍然没有达到完美的水平，但38.2%的准确率已经代表了当前技术条件下的一个重要突破，为未来进一步改进指明了方向。

六、自动化测试验证：AI测试员的可靠性如何？

既然使用了AI测试助手来评估网站质量，一个自然的问题是：这个AI测试员本身靠谱吗？港中文团队对此进行了专门的验证研究，就像我们需要验证新的考试评分系统是否公正准确一样。

研究团队选择了三个代表性的模型组合（Bolt.diy配合Claude-3.5-Sonnet、DeepSeek-R1和DeepSeek-V3）的测试结果，安排人工测试员进行同样的测试任务。人工测试过程要求很高的精确性，因此团队安排了三名测试员独立完成每个测试用例，如果出现意见分歧，就由第四位测试员重新检查并做出最终判断。

对比结果显示，AI测试助手的判断与人工测试员的一致性相当高。对于Claude-3.5-Sonnet的测试结果，一致性达到90.3%；对于DeepSeek-R1为86.1%；对于DeepSeek-V3为94.4%。这个一致性水平说明AI测试助手在大多数情况下能够准确判断网站功能是否正常工作，就像一个训练有素的质检员能够准确识别产品缺陷一样。

更详细的分析显示，AI测试助手在不同类型的测试用例上表现也有差异。在简单的页面展示和基础交互测试中，AI测试助手的判断准确性更高，与人工测试员的一致性经常超过95%。而在涉及复杂业务逻辑或细微用户体验的测试中，一致性会稍微降低，但仍然保持在85%以上的水平。

有趣的是，当AI测试助手和人工测试员出现分歧时，主要分歧集中在PARTIAL（部分满足要求）的判断上。人工测试员倾向于更严格的标准，而AI测试助手有时会对边界情况给出更宽松的评判。这就像是严格的老师和相对宽松的老师在评分时可能有不同的标准，但都是合理的。

为了进一步验证自动化测试的可靠性，研究团队还分析了测试失败的原因分布。结果显示，超过一半的测试失败是由于明显的技术问题，比如网站无法启动、页面加载错误、关键功能完全缺失等。这些问题是AI测试助手和人工测试员都能轻易识别的，因此一致性很高。

另外大约30%的失败是由于功能实现不完整或不正确，比如搜索功能返回错误结果、表单提交后没有反馈等。在这类问题的判断上，AI测试助手也表现出了良好的识别能力，虽然偶尔会在细节判断上与人工测试员有所差异。

剩下的失败主要涉及用户体验和界面细节问题，这是AI测试助手相对较难准确判断的领域。不过，由于这类问题在整体测试中占比较小，对总体评估结果的影响有限。

总的来说，自动化测试验证结果表明，使用AI测试助手进行网站功能评估是一个可行且相对可靠的方案。虽然它还不能完全替代人工测试，但在大规模、标准化的基准测试中，它提供了一个高效、一致且成本低廉的评估方法。这种自动化测试方法的成功，也为未来构建更大规模的AI能力评估基准铺平了道路。

七、未来展望：AI建网站的路还有多远？

通过WebGen-Bench这项开创性研究，我们首次有了量化评估AI建网站能力的标准工具，也清楚地看到了当前技术水平和实用化之间的差距。就像早期的汽车虽然能跑，但还远远达不到替代马车的程度一样，现在的AI建网站技术还处在"能用但不够好"的阶段。

27.8%的最高准确率意味着什么？简单来说，如果你给AI 100个建网站的任务，它大概能完全做对28个，部分做对一些，剩下的可能完全搞砸。这个水平显然还不足以让普通人放心地把重要项目交给AI来完成，但已经足以在一些简单场景下提供有价值的辅助。

从错误分析中可以看出，当前AI在网站建设中最大的短板是基础环境配置和项目结构组织。超过一半的失败都是因为网站启动不了或者文件组织混乱，这就像厨师做菜时连火都点不着，或者把调料撒得到处都是。相比之下，AI在理解需求和实现简单功能方面已经有了不错的基础。

这个现状其实反映了AI技术发展的一个典型特点：在模式识别和内容生成方面表现出色，但在系统性的工程实践和复杂项目管理方面还有很大提升空间。就像AI可以写出不错的诗歌和文章，但让它管理一个完整的出版流程就困难重重。

WebGen-LM系列模型的成功训练为未来指明了一个可行的发展方向：专门化训练确实能够显著提升AI在特定任务上的表现。38.2%的准确率虽然仍然不够理想，但相比通用模型的表现已经有了质的飞跃。这说明，未来我们可能会看到更多针对特定领域深度优化的AI模型，而不是一味追求"万能"的通用模型。

从实际应用角度来看，当前的AI建网站技术已经可以在一些特定场景下发挥价值。比如，对于简单的展示型网站、原型开发、或者为专业开发者提供初始代码框架，现有技术已经具备了一定的实用性。但对于复杂的商业网站、安全性要求高的应用、或者需要与多个外部系统集成的项目，人工开发仍然是更可靠的选择。

研究团队也指出了当前工作的一些限制。WebGen-Bench主要聚焦于TypeScript、JavaScript、CSS和HTML等前端技术，对于后端服务、数据库设计、微服务架构等更复杂的技术栈覆盖有限。此外，当前的训练方法主要使用监督学习，未来可能需要引入强化学习、直接偏好优化等更先进的训练策略来进一步提升性能。

从技术发展趋势来看，AI建网站能力的提升可能需要在几个方向同时发力：首先是改进AI对复杂项目结构的理解和组织能力；其次是增强AI在调试和问题解决方面的能力；再次是提升AI对用户体验和设计美学的理解；最后是加强AI与各种开发工具和部署平台的集成能力。

值得注意的是，AI建网站技术的发展不仅仅是一个技术问题，也涉及到开发流程、质量保证、维护管理等多个方面。即使AI能够生成完美的初始网站，如何确保后续的维护、更新、安全patch等工作仍然是需要解决的问题。

总的来说，WebGen-Bench为我们提供了一个清晰的起点，让我们知道当前AI建网站技术处在什么水平，距离实用化还有多远。虽然这个距离还不短，但WebGen-LM系列模型的成功表明，通过有针对性的研究和训练，这个距离正在逐步缩短。未来几年，我们很可能会看到AI在网站建设领域发挥越来越重要的作用，从最初的代码辅助工具逐步发展为更加智能和可靠的开发伙伴。

Q&A

Q1：WebGen-Bench是什么？它主要用来做什么？ A：WebGen-Bench是港中文团队开发的全球首个专门评估AI从零生成网站能力的基准测试平台。它包含101个网站建设指令和647个功能测试用例，用来客观评估不同AI模型在网站建设任务上的表现，就像给AI安排的"建网站能力考试"。

Q2：目前最强的AI建网站准确率只有27.8%，这意味着什么？ A：这意味着AI建网站技术还处在早期阶段，距离实用化还有较大差距。AI可能在100个建网站任务中只能完全做对28个，其余的要么部分正确要么完全失败。不过，对于简单的展示型网站或代码框架生成，已经具备了一定实用价值。

Q3：WebGen-LM模型有什么特别之处？普通人能用到吗？ A：WebGen-LM是专门针对网站建设任务训练的AI模型，准确率达到38.2%，超过了通用模型。目前这些模型主要供研究使用，普通用户可以通过GitHub获取开源代码和数据，但还没有成熟的商业化产品可供直接使用。