港中大WebGen-Agent：AI网站生成准确率提升一倍

这项由香港中文大学多媒体实验室的陆梓慕、任厚星、杨云乔等研究人员组成的团队完成的研究，发表于2025年1月的arXiv预印本，论文编号为arXiv:2509.22644v1。有兴趣深入了解的读者可以通过该编号查询完整论文。

以前，我们想要AI帮忙做网站，就像让一个从未见过世界的人闭着眼睛画画一样。AI只能根据代码是否出错来判断网站好不好，完全看不到最终的网站长什么样，更不知道用户点击按钮时会发生什么。这就导致生成的网站经常出现各种问题：按钮摆得乱七八糟、颜色搭配得像彩虹一样刺眼、点击链接却跳不到该去的地方。

如今，香港中文大学的研究团队为这个问题找到了一个巧妙的解决方案。他们开发的WebGen-Agent系统，就像给AI装上了一双眼睛和一个专业的网站测试员。这个系统不仅能"看到"网站的样子，还能像真实用户一样在网站上点来点去，测试每个功能是否正常工作。

整个过程就像是一个不断改进的循环。AI先写代码生成网站，然后截图看看效果如何，就像画家画完画后退后几步欣赏作品。如果发现颜色不协调或者布局有问题，AI会根据视觉反馈进行调整。接着，系统会启动一个虚拟用户来测试网站功能，这个虚拟用户会点击每个按钮、填写表单、浏览各个页面，就像真正的访客一样。如果发现某个功能不工作，系统会记录下来并告诉AI该如何修复。

这种方法的效果令人惊喜。在测试中，原本只有26.4%准确率的Claude-3.5-Sonnet模型，使用WebGen-Agent后准确率跃升至51.9%，几乎翻了一倍。不仅如此，生成网站的美观程度也从3.0分提升到3.9分（满分5分），这意味着网站不仅功能更完善，看起来也更加赏心悦目。

研究团队还开发了一套专门的训练方法，叫做Step-GRPO。这就像是给AI学生配备了一个严格的老师，在AI生成网站的每一个步骤都给出评分和建议。传统的训练方法只在最后告诉AI结果好不好，而这套新方法会在整个过程中持续指导，告诉AI每一步做得如何，应该往哪个方向改进。

通过这种训练方法，即使是相对较小的AI模型也能显著提升性能。比如Qwen2.5-Coder-7B模型，经过训练后准确率从38.9%提升到45.4%，美观度评分也从3.4分升至3.7分。这证明了不需要更大更昂贵的AI模型，通过更好的训练方法同样可以获得出色的效果。

**一、传统网站生成AI的盲点问题**

以往的AI网站生成系统就像是一个优秀的程序员，但却患有严重的"色盲"和"触觉失调"。这些系统能够熟练地编写HTML、CSS和JavaScript代码，逻辑清晰，语法正确，但它们最大的问题是无法真正"看到"自己创造的作品，也无法像普通用户那样与网站互动。

当AI完成代码编写后，它唯一的反馈来源就是代码是否能够成功运行。这就好比一个厨师做菜，只知道食材有没有煮熟，却永远尝不到味道，也看不到菜品的卖相。即使代码运行正常，网站可能依然存在各种用户体验问题：重要按钮被挤到了页面边角、文字颜色和背景颜色太接近导致看不清楚、表单提交按钮点击后毫无反应、导航菜单在手机上显示混乱。

更糟糕的是，这些AI系统无法理解网站的整体视觉效果。它们可能会创建一个功能完备的在线商店，但这个商店的页面布局混乱不堪，产品图片大小不一，购买按钮藏在页面底部不显眼的位置。对于注重用户体验的现代网站来说，这样的问题往往比功能性错误更致命，因为用户在糟糕的视觉体验面前会立即失去耐心。

研究团队意识到，要让AI真正擅长网站开发，必须让它具备两种人类开发者天然具有的能力：审美判断和用户测试。前者需要AI能够"看见"网站的视觉效果，就像设计师审视自己的作品一样；后者需要AI能够模拟真实用户的行为，像质量测试员一样仔细检查每个功能。

**二、WebGen-Agent的双眼视觉系统**

WebGen-Agent的核心创新在于为AI配备了两套"感官系统"：视觉系统和交互测试系统。这两套系统相互配合，让AI能够从用户的角度全面评估网站质量。

视觉系统的工作原理类似于专业的网页设计评审。当AI生成网站代码并成功运行后，系统会自动对网站首页进行截图，然后将这张截图交给一个专门训练过的视觉语言模型进行分析。这个模型就像一位资深的UI设计师，它会仔细观察网站的各个方面：整体布局是否协调、色彩搭配是否和谐、重要元素是否突出、是否存在明显的设计缺陷。

分析完成后，视觉模型会生成详细的评价报告，包括对网站外观的文字描述、美观度评分（1-5分），以及具体的改进建议。比如，它可能会指出"导航栏和主要内容区域的颜色对比度不够，建议加深导航栏背景色"，或者"页面左侧有大片空白区域，建议添加侧边栏或调整内容布局"。

交互测试系统则扮演着虚拟用户的角色。当视觉评估通过后，系统会启动一个GUI代理，这个代理会像真实用户一样浏览网站。它会点击每个按钮、填写表单、测试搜索功能、尝试不同的导航路径。整个过程完全模拟真实用户的行为模式，甚至包括用户可能犯的一些小错误，比如在必填字段中留空或者输入错误格式的邮箱地址。

在测试过程中，GUI代理会详细记录每次交互的结果。如果发现某个按钮点击后没有反应，或者表单提交后出现错误信息，或者某个页面无法正常加载，代理都会将这些问题记录下来，并生成相应的功能性评分。最终，这个评分会反映网站功能的完整程度和用户体验的流畅程度。

这两套系统的结合使用，让WebGen-Agent能够从多个维度全面评估网站质量。视觉系统确保网站"好看"，交互系统确保网站"好用"。更重要的是，当发现问题时，系统不仅会指出问题所在，还会提供具体的修改建议，指导AI在下一轮改进中朝着正确的方向努力。

**三、智能回溯和最优选择机制**

WebGen-Agent还具备了一套智能的"后悔机制"，这就像给AI装上了撤销键和智能存档系统。在网站开发过程中，AI有时会陷入越改越糟的困境，这时候智能回溯功能就派上了用场。

系统会在每一个成功运行的步骤处自动创建"存档点"，记录当时的代码状态、视觉评分和功能评分。当AI连续5次修改都出现代码错误时，系统会判断当前的修改方向可能有问题，立即触发回溯机制，将整个项目恢复到之前最好的状态，然后重新开始改进。

这种机制特别有用，因为AI在修复一个问题时，有时会无意中破坏其他已经工作正常的功能。比如，AI为了修复按钮颜色问题而修改CSS样式，结果却意外改变了整个页面的布局。传统系统会继续在这个错误的基础上进行修改，越改越乱，而WebGen-Agent会及时发现问题并回到正确的轨道上。

除了错误回溯，系统还有一套最优选择机制。即使整个开发过程顺利完成，系统也会回顾整个过程中的所有版本，选择综合评分最高的版本作为最终结果。选择标准很有讲究：首先比较功能评分，选择功能最完善的版本，如果功能评分相同，再比较视觉评分，选择最美观的版本，如果两项评分都相同，则选择最新的版本。

这种设计理念体现了"功能优先，美观其次"的务实原则。毕竟，一个功能残缺但外观精美的网站，远不如一个功能完整但外观普通的网站有价值。但在功能相当的情况下，更美观的设计当然更受欢迎。

**四、Step-GRPO训练方法的突破**

传统的AI训练就像期末考试，只在最后告诉学生总成绩是多少，却不说具体哪道题做错了，为什么错，应该怎么改进。而WebGen-Agent开发的Step-GRPO训练方法，则像是配备了一位全程跟踪指导的私人教师。

这套训练方法充分利用了WebGen-Agent工作流程中产生的丰富反馈信息。在AI生成网站的每一个步骤，系统都会获得视觉评分和功能评分，这些评分加起来就构成了该步骤的综合奖励值。与传统方法只在整个任务完成后给出一个总体评价不同，Step-GRPO会对每一步的表现进行实时评价和奖励。

具体来说，当AI在某一步成功改善了网站的视觉效果，比如将原本拥挤的页面布局调整得更加清爽，视觉评分就会上升，AI会立即获得正面奖励，知道这个修改方向是正确的。同样，如果AI修复了一个功能性问题，比如让原本无法提交的表单能够正常工作，功能评分的提升也会给AI带来正面反馈。

这种步骤级的奖励机制有几个显著优势。首先，它能够提供更密集的学习信号，让AI能够快速识别哪些行为是有益的，哪些是有害的。其次，它能够帮助AI理解复杂任务中的因果关系，比如理解某个CSS属性的修改如何影响页面的整体视觉效果。最后，它能够防止AI在长期任务中迷失方向，即使最终结果不够理想，AI也能从过程中的部分成功中学到有价值的经验。

实验结果证明了这种训练方法的有效性。经过Step-GRPO训练的7B参数模型，在网站生成任务上的表现显著超越了同规模的其他模型，甚至在某些指标上接近了更大规模模型的性能。这意味着通过更好的训练方法，我们可以用更少的计算资源获得更好的效果，这对于普及AI网站生成技术具有重要意义。

**五、实验验证和性能提升**

研究团队在WebGen-Bench这个专门的网站生成测试平台上进行了全面的实验验证。这个测试平台包含101个不同难度和类型的网站生成任务，涵盖了从简单的个人博客到复杂的电商网站的各种场景，以及647个GUI测试用例，确保能够全面评估AI的网站生成能力。

实验结果让人印象深刻。以Claude-3.5-Sonnet这个目前表现优秀的AI模型为例，使用传统方法时，它在网站生成任务上的准确率只有26.4%，也就是说10个网站任务中只能成功完成不到3个。而使用WebGen-Agent后，准确率跃升至51.9%，成功率提高了近一倍。更令人惊喜的是，生成网站的美观度评分也从3.0分提升到3.9分，这意味着不仅功能更完善，视觉效果也明显改善。

这种提升不仅限于大型模型。对于计算资源相对有限的用户来说，更令人鼓舞的是小型模型的表现改善。Qwen2.5-Coder-7B这个只有70亿参数的模型，原本准确率只有12.4%，几乎无法胜任实际的网站生成工作。但经过Step-GRPO训练后，准确率大幅提升至45.4%，美观度评分也从1.6分跃升至3.7分。

这些数字背后反映的是WebGen-Agent在实际应用中的价值。在传统方法下，用户可能需要尝试多次才能得到一个勉强可用的网站，而且还需要大量的手动修改。而使用WebGen-Agent后，用户更有可能在第一次尝试就得到一个既美观又实用的网站，大大提高了工作效率。

研究团队还对不同类型的网站生成任务进行了分类分析。结果显示，WebGen-Agent在各种类型的任务上都取得了显著改善，无论是注重内容展示的信息网站，还是强调用户交互的应用程序，或者是需要复杂数据管理的后台系统，都能从这套新方法中受益。

**六、技术实现的精妙细节**

WebGen-Agent的技术实现充满了巧思，整个系统的架构设计体现了研究团队对AI网站生成任务的深刻理解。

系统采用了模块化的设计理念，将代码生成引擎和视觉反馈系统分离开来。这种设计的好处是可以根据需要选择不同性能和成本的模型组合。代码生成部分使用强大的大语言模型，确保生成的代码质量和逻辑正确性；而视觉反馈部分使用相对轻量级的视觉语言模型，在保证评估准确性的同时控制计算成本。

实验发现，使用开源的Qwen2.5-VL-32B模型作为视觉反馈引擎，其效果与昂贵的商业模型GPT-4o相当，但成本却低得多。这种发现对于实际应用具有重要意义，因为它证明了高质量的AI网站生成服务可以以相对较低的成本提供给普通用户。

在GUI测试方面，系统会根据原始的网站需求自动生成测试指令，指导虚拟用户如何测试网站功能。这些指令会覆盖网站的各个功能点，确保测试的全面性。研究团队对生成的测试指令进行了人工评估，发现98.3%的指令都能有效覆盖原始需求的关键功能点，证明了自动化测试生成的可靠性。

系统还实现了智能的迭代控制机制。通过分析不同迭代次数对最终结果的影响，研究团队发现大多数任务在14-20次迭代后就能达到最佳效果，继续增加迭代次数的收益会显著递减。这个发现帮助系统在效果和效率之间找到了最佳平衡点。

在错误处理方面，系统设计了多层次的容错机制。除了前面提到的5步错误回溯机制，系统还会对不同类型的错误采用不同的处理策略。比如，对于简单的语法错误，系统会尝试自动修复；对于逻辑错误，系统会回溯到更早的稳定状态；对于环境相关的错误，系统会重新初始化运行环境。

说到底，WebGen-Agent的成功不仅仅在于技术上的创新，更在于它真正解决了AI网站生成领域的核心痛点。传统AI生成的网站就像是闭门造车的产物，虽然在技术层面可能没有问题，但缺乏对用户体验的考虑。而WebGen-Agent通过引入视觉反馈和用户测试，让AI能够站在用户的角度思考问题，生成真正实用和美观的网站。

这项研究的意义远不止于技术层面的改进。它为AI在创意和设计领域的应用提供了新的思路，证明了通过合适的反馈机制，AI可以在需要审美判断和用户体验考量的任务中取得突破性进展。随着技术的进一步发展和普及，我们可以期待看到更多普通用户能够轻松创建专业水准的网站，让网页设计不再是专业人士的专利。

对于想要深入了解这项技术的读者，可以通过arXiv:2509.22644v1查询完整的研究论文，获取更多技术细节和实验数据。研究团队还承诺会开源相关代码和模型，这将进一步推动整个领域的发展，让更多开发者和研究者能够在此基础上继续创新。

**Q&A**

Q1：WebGen-Agent和传统的网站生成AI有什么区别？

A：最大的区别是WebGen-Agent能"看见"网站的样子并能测试功能。传统AI只能根据代码是否出错来判断，就像闭着眼睛做设计，而WebGen-Agent会截图分析网站外观，还会像真实用户一样点击测试每个功能，发现问题后会自动修改改进。

Q2：普通用户可以使用WebGen-Agent来制作网站吗？

A：目前WebGen-Agent还是一个研究项目，主要在学术环境中测试。不过研究团队承诺会开源相关代码，未来可能会有基于这项技术的商业产品出现。现在普通用户还需要等待更成熟的产品化版本。

Q3：WebGen-Agent生成的网站质量到底有多好？

A：在测试中，WebGen-Agent让AI的网站生成成功率从26%提升到52%，美观度评分从3.0提升到3.9分（满分5分）。这意味着生成的网站不仅功能更完善，看起来也更加专业美观，基本达到了可以实际使用的水平。