这项由上海交通大学、西安交通大学、同济大学与微软公司联合开展的研究，以预印本形式发布于2026年4月，论文编号为arXiv:2604.15309，感兴趣的读者可通过该编号查阅完整原文。
当你浏览一个设计精美的网站时，你可能从没想过那些图片、视频和数据图表是怎么凑到一起的。它们不仅要在视觉上相互协调，还得和整个页面的风格、排版、颜色"说一种语言"。对人类设计师来说，这需要经验、审美和大量反复调整；而对人工智能来说，这一直是个棘手的难题。现有的AI工具要么只会生成代码骨架，用空白占位符代替图片，要么各个模块各自为政——图片是图片，视频是视频，最后拼在一起时往往显得格格不入。
这项研究提出了一个叫做MM-WebAgent的系统，核心思路是：让AI像一位有条不紊的总设计师一样工作，先做全局规划，再指导每个细节的生成，最后一轮一轮地检查和打磨，直到整个页面看起来浑然一体。
一、为什么现有工具总让网页"东拼西凑"
以一位室内设计师的工作方式来理解这个问题。一个好的室内设计师不会先买一张粉色沙发，然后再去找墙纸，最后发现颜色完全不搭。他会先确定整体风格——是北欧简约还是工业复古——然后在这个大框架下挑选每一件家具和摆件，确保整体和谐。
现有的AI网页生成工具大多缺乏这种整体意识。它们通常直接生成HTML和CSS代码，遇到需要图片的地方就留一个占位符，或者随便塞一张从网上检索来的图片。这样做的结果是三个常见问题：首先是风格不统一，不同模块的图片风格各异，一个清新写实，另一个却是卡通插画；其次是尺寸错配，生成的图片比例和留给它的位置对不上，要么被拉伸变形，要么留下大片空白；第三是整体失调，各个元素单独看还不错，组合在一起却像是来自不同世界的拼贴画。
研究团队通过大量观察发现，这三个问题的根源是一样的：元素是孤立生成的，没有一个统一的"指挥官"告诉每个部分"你在整个设计里扮演什么角色，应该长什么样"。
二、MM-WebAgent如何像总设计师一样工作
MM-WebAgent的工作方式可以用建造一栋房子的过程来理解。建房子不是从某面墙开始砌，而是先有建筑师的整体设计图，然后施工队根据图纸逐段施工，最后质检团队验收，发现问题就局部修整，确认没问题后再做整体验收。
整个系统分四个阶段推进：任务规划、分层生成、多层次评估和迭代反思。
在任务规划阶段，系统扮演的是建筑师角色。它接收到用户的描述——比如"设计一个活泼而精致的仪表盘风格主页"——之后不是立刻开始写代码，而是先生成一份结构化的设计方案。这份方案里包含全局布局计划，明确整个页面分哪几个区块、排列顺序如何、整体色调和视觉风格是什么；同时还包含每个多媒体元素的局部计划，比如"这张图片出现在英雄区（页面最顶部的醒目区域），扮演背景的角色，风格要写实，颜色偏暖调，构图是宽幅横向，光线柔和自然"。
这种双层规划的巧妙之处在于：全局计划保证了整体的一致性，而局部计划则为每个具体元素的生成提供了足够详细的"施工指令"，让负责生成图片、视频和图表的工具知道自己该做什么、做成什么样。
三、每种媒体元素如何根据"施工指令"生成
有了这份详细的局部计划，系统就像把任务分配给不同专业的施工队一样，调用不同的生成工具。
图片由GPT-Image-1负责，局部计划会告诉它图片所在的页面区块、在布局中的功能角色、整体页面风格、应有的视觉风格、色调、构图方式和光线处理。视频由Sora-2负责，局部计划除了告知基本背景信息外，还会指定视觉风格、运动幅度、镜头行为以及视频是否需要能无缝循环播放。图表则由GPT-5.1负责生成基于ECharts的HTML代码，局部计划会告知图表类型、配色方案、数据内容和视觉重点。
所有这些生成工作在局部计划完成后可以并行进行，效率大幅提升。生成完毕后，各个资产被嵌入到按照全局计划生成的HTML框架中，拼成初稿。
四、像老师改卷一样的三层反思机制
初稿完成后并不意味着大功告成。MM-WebAgent会对这份初稿进行三个层次的检查和修改，就像一位严格的老师先批改每道题的解题过程，再检查卷面整洁度，最后对整份试卷做总评。
第一层叫"局部精炼"，聚焦在每个单独的媒体元素上。系统会检查每张图片或每个图表本身有没有问题：图片里是否出现了不该有的水印或杂乱内容，颜色是否和局部计划的要求一致，图表的数据是否准确，标签和图例是否清晰可读。发现问题后，图片会通过图像编辑工具修改，图表则通过修改HTML代码来修复。
第二层叫"上下文精炼"，关注元素嵌入页面后产生的问题。即使一张图片本身很漂亮，嵌进页面后可能因为容器尺寸不匹配而被裁掉重要内容，或者因为CSS设置问题而显示错位。这一层专门修复这类"嵌入错误"，通过调整相关的HTML/CSS片段来解决对齐、溢出、间距等问题。
第三层叫"全局精炼"，是站在整个页面高度做的审视。系统同时参考页面的HTML代码和渲染后的截图，检查全局层面的布局平衡和风格一致性：各区块的视觉重量是否均衡，颜色主题是否贯穿始终，整体阅读体验是否流畅。发现问题后对HTML结构进行有针对性的修改。
这三层反思不是走形式，而是真正解决了不同层次的不同问题。局部精炼不能发现嵌入错误，上下文精炼不能发现全局不均衡，全局精炼不能修复单张图片的内容缺陷。三层配合，才能做到全面覆盖。
五、专门为这项任务设计的测试平台
研究团队意识到，要评估一套多媒体网页生成系统，现有的测试基准都不够用。现有基准要么只测代码对不对，不管视觉效果；要么测的是"给你一张截图，你能还原出代码吗"，而不是"给你一个描述，你能创造出合适的内容吗"；要么提供静态图片资源作为输入，完全回避了原生媒体生成的质量问题。
于是团队自己构建了一个叫MM-WebGEN-Bench的测试集，包含120个精心筛选的网页生成任务。这些任务覆盖了11种场景类别（从企业官网到个人作品集，从数据分析仪表盘到创意营销页面）和11种视觉风格（从极简主义到粗野主义，从学术刊物风到电影海报风）。在媒体内容方面，测试集包含4种类型的视频、8种类型的图片和17种类型的图表，确保对多媒体生成能力的全面考察。
测试集的构建过程也经过精心设计：先随机组合布局复杂度、视觉风格、媒体元素类型和语义意图四个维度，由AI代理将这些组合扩写成详细的设计描述，然后经过格式自动检验和人工审核双重筛选，剔除布局不合理、风格前后矛盾或媒体组合不现实的样本，最终保留高质量的120个测试案例。
评估方式也分两个层次。全局层次评估三件事：布局正确性（区块层级和空间安排是否符合设计描述）、风格一致性（颜色、字体、设计主题在各区块间是否统一）和审美质量（视觉平衡感、可读性和整体吸引力）。局部层次则分别评估图片、视频和图表的质量，考察语义相关性、视觉特征和与整体页面风格的契合度，同时把"设计要求的元素根本没有出现"也计入严重失分。
评分机制根据评估维度的特性分两种。对于有明确规则可循的维度（如布局正确性和风格一致性），采用扣分制：评估系统找出每个违规点并按严重程度扣分，最终得分等于1减去所有扣分的加权总和，不会低于0。对于需要整体判断的维度（如审美质量和各媒体元素质量），采用六档评分制，从0分到满分1分以0.2为步长，反映不同质量水平。
六、实验结果说明了什么
研究团队拿MM-WebAgent和三类方法做了比较：直接生成HTML代码的单轮方式、依托bolt.diy和OpenHands平台的代码代理方式，以及MM-WebAgent自身在不同骨干模型下的表现。所有实验都重复三次取平均值，以减少随机因素的影响。
以GPT-5.1作为骨干模型时，MM-WebAgent在六个评估维度上的综合得分达到0.75。相比之下，同样用GPT-5.1做单轮代码生成时综合得分只有0.42，用bolt.diy代理框架时为0.46，用OpenHands代理框架时也是0.46。差距最明显的地方在多媒体元素上：图片质量得分从0.05跃升至0.88，视频质量得分从接近0跃升至0.75。这说明代码生成方式在多媒体元素上几乎是完全放弃——它们要么根本不生成，要么只留一个链接占位符。
在WebGen-Bench这个主要测试后端代码功能的基准上，MM-WebAgent的准确率达到55.4%，与基于bolt.diy的GPT-5.1持平，明显高于单轮代码生成的47.8%和OpenHands的43.7%。这个结果颇具意义，因为MM-WebAgent本来的设计目标并不侧重后端逻辑，能在这个不擅长的赛道上打平手，说明其整体能力是扎实的。
七、拆解各个组件的贡献
为了搞清楚哪部分设计真正起了作用，研究团队做了一系列消融实验，相当于把一道菜里的调料一样一样拿掉，看少了哪个味道会变差。
去掉分层规划，让系统直接一步生成整个页面，结果多媒体元素质量断崖式下跌，图片得分降回0.05，视频接近0，综合得分从0.75降至0.42。加上分层规划但去掉局部计划（只保留全局布局计划），综合得分从0.75降至0.69，图片和视频得分明显下滑，说明为每个元素量身定制的局部计划是不可或缺的。
在反思机制方面，单独启用局部精炼主要改善图片和视频质量；单独启用全局精炼主要改善布局和风格一致性；同时启用所有反思层级才能取得最佳综合效果。三层反思各司其职，缺一不可。
还有一个特别重要的发现：如果只是把AIGC工具（GPT-Image-1等）塞进普通代码生成流程，而不使用MM-WebAgent的规划和反思框架，综合得分从0.42只提升到0.45。真正的质量飞跃来自分层规划和多层反思的协作设计，工具本身只是必要条件，不是充分条件。
在效率方面，MM-WebAgent每个任务平均耗时155.8秒，费用约3.21美元。与此对比，OpenHands平均耗时182.4秒，费用0.27美元；bolt.diy平均耗时76.9秒，费用0.14美元。MM-WebAgent的费用较高，主要是因为图片和视频生成本身代价不低；但考虑到它承担的任务复杂度远超代码生成，时间上的表现其实相当有竞争力。特别值得一提的是，图片、视频和图表的生成是并行执行的，总时长远小于各模块时间之和。
在用户研究方面，研究团队招募了50位具有网页设计、计算机科学或多媒体内容创作背景的评测人员，进行盲测比较。评测人员在不知道哪个结果来自哪个方法的情况下，对两两配对的网页从布局质量、内容相关性、多媒体资产质量和局部元素嵌入质量四个维度打分。最终MM-WebAgent的胜出率为78.99%，说明人类评测者对其生成质量有明确的偏好。
归根结底，这项研究做的事情可以用一句话概括：让AI在设计网页时，终于有了一位懂全局的总指挥，而不只是一群各干各活的工人。分层规划解决了"元素从一开始就知道自己该是什么样"的问题，迭代反思解决了"生成完还能回头查漏补缺"的问题，两者合力才把多媒体网页生成从"能用但不好看"推向了"好看而且协调"。
当然，这套系统目前也存在一些局限。它依赖外部的图像、视频和图表生成工具，这些工具各自的局限性会直接影响最终页面的质量。如果某个工具发生服务变更或内容安全过滤策略调整，整个系统的行为都会受到影响。此外，系统当前的规划和反思流程是固定的，没有通过学习来优化，未来若能引入强化学习让系统从每次生成经验中改进决策，表现有望进一步提升。
对于关注AI辅助设计工具的读者来说，这项研究提出了一个值得思考的问题：当AI越来越能自主生成复杂的多媒体内容时，"设计感"究竟是可以被系统化规划出来的，还是永远需要人类的介入？MM-WebAgent给出的是一个乐观但谨慎的答案——系统化的规划和自我修正机制可以走得很远，但还远未到终点。有兴趣深入探究技术细节的读者，可以通过arXiv:2604.15309查阅完整论文。
Q&A
Q1：MM-WebAgent和普通AI网页生成工具有什么区别？
A：普通AI网页生成工具通常只生成HTML和CSS代码，遇到需要图片或视频的地方要么留占位符，要么插入检索图片，各元素独立生成、风格不统一。MM-WebAgent的区别在于它有分层规划机制，先确定全局风格和布局，再为每个多媒体元素制定具体的生成指令，确保图片、视频、图表都在统一的设计语言下生成，最后还会经过三层自我检查和修正，让整个页面看起来浑然一体。
Q2：MM-WebGEN-Bench测试集是怎么保证评测质量的？
A：MM-WebGEN-Bench通过两道筛选保证质量。第一道是自动格式验证，排除结构错误的任务描述；第二道是人工审核，有经验的研究人员逐一检查渲染后的网页，剔除布局不合理、风格前后矛盾或媒体组合不现实的样本。经过这两道筛选，最终保留了120个覆盖11种场景、11种视觉风格和多种媒体类型的高质量测试案例。
Q3：MM-WebAgent生成一个网页大概需要多长时间和多少成本？
A：以GPT-5.1作为骨干模型时，生成一个网页平均耗时约155.8秒，费用约3.21美元。费用较高的主要原因是图片和视频的原生生成本身成本较高。相比之下，纯代码生成工具耗时更短、费用更低，但无法生成真实的多媒体内容。研究团队指出，随着多模态模型持续进步和开源替代方案增多，这套框架的成本有望随之下降。