每天打开浏览器，我们刷到的购物页面、登录界面、炫酷动画，看似简单的视觉呈现，背后都是成千上万行代码在“默默打工”。这两年，AI大模型扎堆宣称自己能“写网页代码”，吹得天花乱坠，仿佛程序员要被取代。但很少有人追问一句：这些AI写的代码，真的能用吗？
这就像雇装修工人，你不能只看他能把墙刷上颜色，更要关注墙面平不平、门窗顺不顺、整体美观不美观。网页开发也是一个道理——能“跑起来”只是底线，好看、好点、能适配手机和电脑，才是合格的标准。但现在的AI评测，大多只盯着“代码能不能运行”，至于视觉好不好看、交互顺不顺畅，根本不管不顾。
好在，南京大学和快手的研究团队，看穿了这个行业盲区，打造了一套堪称“终极考场”的WebCompass评测体系。这套体系一出手，就把当下AI写网页代码的“遮羞布”扯得一干二净，很多我们以为的“AI神技”，其实都是“半吊子水平”。
先吐槽：现有AI评测，简直是“自欺欺人”
要明白WebCompass的厉害，得先说说现在的AI评测有多“敷衍”。我们常见的评测基准，比如HumanEval、SWE-Bench，本质上就是考AI做“算法题”、修“小bug”，就像用数学成绩衡量建筑师，根本看不出他能不能设计出实用又好看的房子。
就算是专门针对网页的评测，也离谱得很——给AI一段文字描述，让它生成一个静态页面，然后截个图对比一下，就完事了。既不测试按钮能不能点，也不看动画流不流畅，更不考验AI能不能修改已有代码、修复隐藏缺陷。这种评测，说白了就是“自欺欺人”，根本反映不出AI在真实工作中的表现。
总结下来，现有评测有三大致命死角，也是我一直以来吐槽的点：
第一，任务太单一，只考“从零写代码”，却忽略了真实工作中“修改已有代码”“修复缺陷”这两个高频场景——毕竟程序员日常大多是改代码，不是从零新建；第二，输入太局限，只认文字描述，可实际开发中，我们经常对着参考截图、演示视频写代码，AI连这个都适应不了，谈何实用？第三，评判太粗糙，只要代码不报错就给过，不管页面丑得离谱、交互卡得要死，这种“合格”，在实际工作中根本没人要。
而WebCompass的核心价值，就是把这三个死角全部补上，用最贴近真实开发的场景，给AI来一场“真刀真枪”的考试。
终极考场有多严？7张考卷，覆盖网页开发全流程
研究团队特别懂行，他们把真实的网页开发，拆成了三个核心环节——生成（从零写网页）、编辑（改已有代码）、修复（找bug打补丁），这就像厨师的三项基本功：做菜、改菜、救菜。
在此基础上，又加入了三种输入方式：纯文字、参考截图、演示视频，两两组合，最终形成了7类任务，相当于7张不同的考卷，每一张都直击痛点：
文字生成=给菜谱做菜；图片生成=看成品照片复刻；视频生成=看别人做菜录像再动手；文字编辑=告诉厨师“少放盐、加香菜”；图片编辑=给厨师看改良后的照片，让他自己调整；文字修复=告诉厨师“火候过了”，让他找问题；图片修复=给厨师看“失败菜”和“理想菜”的对比，让他修正。
整个数据集一共有1526道题，还分了简单、中等、困难三个难度，难度高低，全看功能复杂程度、交互多少、视觉设计精不精细。更良心的是，这些题目不是随便编的，每一道都经过了严格筛选，确保贴合真实开发场景——这也是我觉得这套评测最有价值的地方，不玩虚的，只测实用的。
考题怎么来的？比我们上班还严谨的“出卷流程”
一套好考试，题目质量是关键。WebCompass的出卷流程，比很多公司的开发流程还严谨，全程人工介入，层层筛选，杜绝“垃圾题目”。
生成类题目的素材，来自四个靠谱渠道：专门收集网页需求的WebGen-Bench、筛选严格的ArtifactsBench、真实用户的需求记录，还有AI网页设计平台V0的优质案例。先去重，再按类别和难度打标签，最后抽样，才得到123道文字生成题。
这里有个细节特别戳我：原始用户需求往往很模糊，比如“做一个购物网站”，这种需求太开放，AI做出来千差万别，根本没法对比。研究团队的解决办法很聪明——让大模型扮演“产品经理”，把模糊需求扩充成结构化文档，明确写清页面内容、交互行为、视觉风格，这样评测才有统一标准，也更贴近真实工作中“产品提需求、开发做实现”的流程。
图片引导的题目，来自包含大量复杂网页的WebRenderBench，用工具截图，还标注出跳转链接，测试AI能不能理解多页面结构；动态交互的题目，从V0和Figma上挑优质动效网页，提取关键帧制作；视频引导的题目，更是人工录制，确保覆盖所有交互功能——每一道题，都透着“严谨”二字。
编辑和修复类题目，共用50个优质代码原型，这些原型经过三道筛选：控制代码量、GPT-4o打分（9分以上）、人工审核，相当于“百里挑一”。编辑题会加入16种高难度需求，比如可拖拽界面、实时仪表盘、视差滚动，而且只说“要做什么”，不说“怎么做”，避免作弊；修复题更有意思，先做一个“完美版本”，再人工注入11种常见缺陷——这些缺陷不是瞎编的，是从200多个真实项目中提炼的，比如元素遮挡、文字溢出、点击事件失效，全是程序员日常踩坑的点。
怎么判卷？AI当评委，比人工还靠谱
出好题，还要有好的判卷方式。WebCompass针对不同任务，设计了两套判卷机制，实测下来，和人类判断的相似度高达93%以上，比很多公司的QA审核还严格。
编辑和修复任务，用“LLM-as-a-Judge”（大模型当评委），把AI生成的代码补丁用上，运行后截图，再把所有证据交给Claude模型，从三个维度打分：补丁位置对不对、功能正常不、视觉风格符不符合，最后取调和平均——这种算法对“短板”特别敏感，只要一个维度拉胯，总分就上不去，避免了“某一项优秀就掩盖短板”的情况。
生成任务，用的是更高级的“Agent-as-a-Judge”（智能体当评委）。这个智能体能控制Chrome浏览器，像真实用户一样点击、滚动、填表单，还能录屏、写测试脚本，核验页面的DOM状态和CSS属性——再也不是简单对比截图，而是真正“用起来”测试，连动态交互的流畅度都能测出来。
更关键的是，评分必须有证据支撑，没有截图、测试日志的打分，直接作废。这种严谨性，确保了评测结果的可信度，也让我们能真正看清AI的真实水平。
实测结果曝光：差距悬殊，这些真相太扎心
研究团队用WebCompass测试了10款主流模型，有闭源的也有开源的，结果出来后，很多人都被惊到了——差距之大，远超预期。
首先，闭源模型碾压开源模型，鸿沟明显。Claude Opus 4.5以67.40分排名第一，Gemini 3 Pro Preview紧随其后（66.68分），GPT-5.2排第三（61.90分）。而表现最好的开源模型Qwen3-VL-235B，综合得分只有41.14分，和第一名差了26分还多；30B规模的开源模型，得分只有28分左右，连顶级闭源模型的一半都不到。
这一点我并不意外，毕竟闭源模型有更多数据和算力支撑，但差距这么大，还是超出了我的预期——这也说明，现在说“开源AI能取代前端程序员”，还为时过早。
其次，所有模型都有一个共同软肋：视觉质量。不管是生成任务的设计质量，还是编辑任务的样式合规性，所有模型都拿了最低分。哪怕是表现最好的Gemini 3 Pro Preview，生成任务的设计质量也只有64.07分，远低于功能得分。这也解释了为什么很多AI生成的网页，能跑但不好看——AI能搞定“能用”，却搞不定“好看”，审美和细节把控，依然是AI的硬伤。
还有一个特别有意思的发现：Vue框架，让所有模型都头疼。测试了React、Vue、原生HTML三种框架，结果显示，所有模型用原生HTML时得分最高，用Vue时得分最低。
其实道理很简单：原生HTML就像手工做菜，步骤简单，出错概率低；Vue就像全自动料理机，功能多但规则复杂，稍有不慎就出错——它的单文件组件把HTML、JS、CSS塞在一个文件里，任何一处写错，都可能引发连锁反应。而React的JSX语法，本质还是JavaScript，相对更容易处理。
另外，难度越高，AI越拉胯。尤其是生成任务的功能实现，简单题得分能到89分，困难题直接跌到37分，缩水一半还多。这说明，AI写简单网页还行，一旦遇到复杂的多步骤流程、动态交互，就彻底“露馅”了——能跑起来，但实现不了全部功能，这在真实开发中，等于“无用功”。
这些冷知识，程序员必看
除了核心结果，研究中还有几个特别有实践意义的发现，不管是用AI写代码的程序员，还是关注AI发展的人，都值得一看：
1. 过度编辑=画蛇添足。AI修复代码时，补丁越大，越容易引入新bug。闭源模型的修复错误中，8%-12%都是“新引入的缺陷”，那些生成大补丁的模型，反而更容易搞砸原本没问题的代码——就像厨师改菜，手太重，把原来的优点也弄坏了。
2. 思维链不是万能的，甚至会帮倒忙。很多人觉得，让AI“先想再说”（思维链）能提升效果，但实测发现，在生成复杂网页时，思维链会让AI忘记部分需求，导致功能实现得分下滑。尤其是大模型，思维链越长，注意力越分散，反而不如直接生成代码。
3. AI写网页，最常犯这两个错。生成任务中，“功能缺失”和“资源加载失败”占了错误的40%-55%；编辑任务中，70%以上的错误是“功能缺失”或“功能不完整”；修复任务中，最大的问题是“找不到缺陷位置”——哪怕是顶级模型，也有近一半的修复补丁没修到点子上。
最后想说：AI写代码，离“好用”还有很长的路
WebCompass这套评测，最有价值的地方，不是“排名”，而是让我们看清了AI写网页代码的真实水平——它远没有宣传的那么神，能“跑起来”只是第一步，要做到“好用、好看、好维护”，还有很长的路要走。
现在的AI，更像是一个“辅助工具”，能帮程序员省点重复劳动，但没法替代程序员的核心能力——审美、逻辑、对需求的精准理解，还有解决复杂问题的能力。尤其是视觉设计和缺陷定位，AI目前的表现，还差得很远。
对于程序员来说，不用过分焦虑被AI取代，反而可以利用AI提高效率；对于企业来说，也别盲目迷信“AI能省人力”，现阶段用AI写代码，还需要人工严格审核，否则很容易出现“看似能用，实则全是bug”的情况。
未来，随着评测体系的完善和模型的迭代，AI写网页代码的能力一定会提升，但至少现在，它还只是一个“半吊子”——好看的网页，终究还是要靠人来打造。
