腾讯突破：让代码自己"看"自己写出来的网页，再改进到完美

这项由腾讯大语言模型部门的李宇航、张辰辰等研究者领导的研究发表于2025年10月，论文编号为arXiv:2510.11498v1。有兴趣深入了解的读者可以通过该编号查询完整论文。这项研究首次解决了一个困扰程序员多年的问题：如何让计算机像人类一样"看见"自己写出来的网页效果，并不断改进到完美。

想象这样一个场景：你请一个从来没有见过颜色的人帮你画画，他只能通过文字描述来作画。即使他的绘画技巧再精湛，最终的作品也很难符合你的期望。这正是当前大语言模型在编写前端代码时面临的困境。

传统的大语言模型在编写前端网页代码时就像这位色盲画家。它们虽然能够生成语法正确的HTML、CSS和JavaScript代码，但完全无法"看到"这些代码在浏览器中的实际渲染效果。一个按钮可能位置偏了几个像素，一个颜色可能完全不协调，一个交互功能可能根本不工作，但模型对此一无所知。就像让一个从未见过汽车的人仅凭文字描述制造汽车一样，结果往往差强人意。

腾讯团队意识到，前端开发的核心在于视觉效果和用户交互，单纯的文字反馈根本无法涵盖这些关键要素。传统的编程任务可以用单元测试来验证正确性，但前端开发的正确性存在于像素级别的视觉呈现中。一个网页看起来是否美观、布局是否合理、交互是否流畅，这些都无法通过简单的对错来判断，而是需要真正的视觉评估。

为了解决这个根本性问题，研究团队开发了名为ReLook的创新框架。这个名字很形象地表达了系统的核心理念：让AI"重新审视"自己的作品。ReLook的工作原理就像给那位色盲画家配备了一副能够看见颜色的眼镜，让他能够实时观察自己的画作效果，并不断调整改进。

具体来说，ReLook建立了一个完整的"生成-诊断-改进"循环系统。当AI生成一段前端代码后，系统会立即在一个安全的沙盒环境中运行这段代码，就像在一个虚拟的浏览器中打开网页。接着，系统会在不同时间点拍摄网页的截图，捕捉动态效果和交互过程。然后，一个专门的多模态大语言模型会像一个专业的UI设计师一样审视这些截图，评估页面的视觉效果、布局合理性和功能完整性，并给出具体的改进建议。

这个过程就像一个学生写作文，写完后自己朗读一遍，发现不通顺的地方立即修改，然后再读再改，直到满意为止。不同的是，ReLook中的AI不仅能"听到"代码的语法，还能"看到"代码的视觉效果。

然而，研究团队在实验过程中发现了一个意想不到的问题：行为崩溃现象。即使AI收到了高质量的视觉反馈和改进建议，有时候修改后的代码反而比原来更糟糕。这就像一个学生越改作文越乱，最终偏离了主题。这种现象严重影响了系统的稳定性和可靠性。

为了解决这个问题，研究团队创新性地提出了"强制优化"策略。这个策略的核心思想是只接受确实有改进的修改，如果修改后的效果不如之前，就拒绝这次修改并重新尝试。这就像给学生立下规矩：每次修改都必须让作文变得更好，否则就撤销修改重新来。这种严格的质量控制确保了每一步都朝着正确的方向前进，避免了退化和混乱。

在训练过程中，ReLook使用了一套复合奖励系统。视觉质量评分是核心，就像艺术作品的美感评价。同时，系统还设置了严格的"零容忍"规则：如果生成的代码无法正常渲染出网页截图，奖励直接设为零。这就像考试中，如果答案格式不对就直接不给分，迫使AI学会写出真正可执行的代码。

更巧妙的是，ReLook在实际应用时可以"轻装上阵"。在训练阶段，AI学会了如何自我评估和改进，就像学会了自我审查的技能。在实际使用时，可以选择不调用外部的视觉评估模型，而是让AI基于内化的经验进行自我改进。这大大降低了计算成本和响应时间，同时保持了大部分改进效果。

研究团队在三个广泛使用的基准数据集上进行了全面测试。结果显示，ReLook在所有测试中都显著超越了传统方法。更重要的是，实验结果呈现出严格的性能层次：ReLook（完整版）> Web-RL（仅视觉奖励）> 基础模型。这种一致的性能排序证明了每个组件的价值和整个框架的有效性。

在ArtifactsBench基准测试中，ReLook将Qwen2.5-7B模型的视觉评分从21.59分提升到27.88分，将Llama-3.1-8B模型从21.04分提升到23.08分。虽然这些绝对分数看起来不算太高，但要知道这个基准测试包含的都是复杂的动态交互和像素级完美布局任务，即使是GPT-4o这样的顶级模型也只能达到33.25分左右。相对改进幅度的一致性更说明了ReLook方法的可靠性。

研究团队还进行了消融实验，分别测试了视觉奖励、格式约束和强制优化三个核心组件的作用。结果显示，视觉奖励提供了3.3分的核心提升，格式约束贡献了1.0分的稳定性保障，而强制优化带来了最大的2.0分提升，直接解决了行为崩溃问题。每个组件都是不可或缺的。

为了验证自动评估的可靠性，研究团队还进行了人工评估。他们随机选择了100个任务，让五位独立评估者在不知道哪个是ReLook结果的情况下进行盲评。结果显示50%的情况下ReLook更好，30%相当，20%较差，明确证实了ReLook的优势确实被人类专家认可。

从技术实现角度来看，ReLook的创新不仅在于引入视觉反馈，更在于构建了一个完整的智能体框架。传统方法要么是一次性生成（像闭眼射箭），要么是纯文本反馈的迭代改进（像盲人摸象）。ReLook则真正实现了像人类开发者一样的工作流程：写代码、预览效果、发现问题、针对性修改、再次预览，直到满意为止。

特别值得一提的是，ReLook使用的沙盒渲染环境经过了精心设计。这个环境不仅要保证安全性，防止恶意代码的执行，还要保证确定性，确保每次渲染的结果都是一致的。系统会阻止危险的API调用，替换外部资源为本地版本，使用固定的随机种子，并在多个时间点捕获截图来评估动态效果。这就像为AI提供了一个标准化的实验室环境，确保所有测试都在相同条件下进行。

ReLook的影响远不止于技术层面的突破。它开启了AI代码生成的新范式：从单纯的语言理解转向多模态感知。这种方法不仅适用于前端开发，未来还可能扩展到UI设计、游戏开发、数据可视化等所有涉及视觉输出的编程任务。

从实用角度来看，ReLook解决了困扰开发者的实际问题。传统的AI编程助手虽然能生成代码，但经常出现布局错乱、样式不统一、交互失效等问题，开发者还需要大量时间进行调试和修正。ReLook生成的代码在视觉效果和功能完整性方面都有显著提升，真正减少了开发者的工作负担。

然而，研究团队也诚实地指出了当前方法的局限性。首先，训练过程中需要调用大型多模态模型进行视觉评估，增加了计算成本。其次，沙盒环境虽然保证了安全性和确定性，但可能无法完全反映真实世界中不同设备、浏览器、网络条件下的表现。第三，对于需要多个文件协同的复杂项目，单一文件的优化可能还不够，需要更高层次的架构理解。

尽管存在这些局限，ReLook已经为AI辅助编程开辟了一个全新的方向。它证明了在AI代码生成中融入感知能力的可行性和价值，为未来更智能、更可靠的编程助手奠定了基础。随着多模态模型的不断改进和计算成本的降低，这种"看得见效果"的AI编程将变得越来越实用。

说到底，ReLook的最大价值在于它让AI真正理解了"代码不仅是文字，更是创造视觉体验的工具"这一前端开发的本质。当AI能够像人类一样用眼睛检视自己的作品时，它就获得了持续改进的能力。这种能力的意义远超前端开发本身，它预示着AI将在更多需要感知和创造的领域发挥更大的作用。对于普通人来说，这意味着未来我们可能只需要用自然语言描述想要的网页效果，AI就能自动生成出既美观又实用的完整网站。这不仅会降低网页开发的门槛，还可能催生出全新的创意表达方式。

Q&A

Q1：ReLook是什么？它解决了AI编程中的什么问题？

A：ReLook是腾讯团队开发的视觉增强编程框架，专门解决AI在编写网页代码时"看不见"实际效果的问题。传统AI只能基于文字反馈改进代码，但网页开发需要考虑视觉效果和用户交互，ReLook让AI能够"看到"自己写的代码在浏览器中的实际显示效果，然后基于视觉反馈不断改进，直到达到理想的视觉效果。

Q2：ReLook的强制优化策略是如何工作的？

A：强制优化策略是ReLook解决"行为崩溃"问题的核心机制。当AI收到改进建议后生成新代码时，系统会严格比较新版本和旧版本的视觉质量评分，只有确实更好的修改才会被接受，否则就拒绝修改并重新尝试，最多尝试10次。这确保了每次修改都是向好的方向发展，避免了越改越糟的情况。

Q3：普通人能使用ReLook技术吗？它会如何改变网页开发？

A：目前ReLook还是研究阶段的技术，普通用户暂时无法直接使用。但这项技术预示着未来的变化：普通人可能只需要用自然语言描述想要的网页效果，AI就能自动生成出既美观又实用的完整网站，大大降低网页开发门槛，让更多人能够创建专业水准的网页。