這項由上海交通大學、西安交通大學、同濟大學與微軟公司聯(lián)合開展的研究，以預印本形式發(fā)布于2026年4月，論文編號為arXiv:2604.15309，感興趣的讀者可通過該編號查閱完整原文。

當你瀏覽一個設計精美的網站時，你可能從沒想過那些圖片、視頻和數據圖表是怎么湊到一起的。它們不僅要在視覺上相互協(xié)調，還得和整個頁面的風格、排版、顏色"說一種語言"。對人類設計師來說，這需要經驗、審美和大量反復調整；而對人工智能來說，這一直是個棘手的難題?，F有的AI工具要么只會生成代碼骨架，用空白占位符代替圖片，要么各個模塊各自為政——圖片是圖片，視頻是視頻，最后拼在一起時往往顯得格格不入。

這項研究提出了一個叫做MM-WebAgent的系統(tǒng)，核心思路是：讓AI像一位有條不紊的總設計師一樣工作，先做全局規(guī)劃，再指導每個細節(jié)的生成，最后一輪一輪地檢查和打磨，直到整個頁面看起來渾然一體。

一、為什么現有工具總讓網頁"東拼西湊"

以一位室內設計師的工作方式來理解這個問題。一個好的室內設計師不會先買一張粉色沙發(fā)，然后再去找墻紙，最后發(fā)現顏色完全不搭。他會先確定整體風格——是北歐簡約還是工業(yè)復古——然后在這個大框架下挑選每一件家具和擺件，確保整體和諧。

現有的AI網頁生成工具大多缺乏這種整體意識。它們通常直接生成HTML和CSS代碼，遇到需要圖片的地方就留一個占位符，或者隨便塞一張從網上檢索來的圖片。這樣做的結果是三個常見問題：首先是風格不統(tǒng)一，不同模塊的圖片風格各異，一個清新寫實，另一個卻是卡通插畫；其次是尺寸錯配，生成的圖片比例和留給它的位置對不上，要么被拉伸變形，要么留下大片空白；第三是整體失調，各個元素單獨看還不錯，組合在一起卻像是來自不同世界的拼貼畫。

研究團隊通過大量觀察發(fā)現，這三個問題的根源是一樣的：元素是孤立生成的，沒有一個統(tǒng)一的"指揮官"告訴每個部分"你在整個設計里扮演什么角色，應該長什么樣"。

二、MM-WebAgent如何像總設計師一樣工作

MM-WebAgent的工作方式可以用建造一棟房子的過程來理解。建房子不是從某面墻開始砌，而是先有建筑師的整體設計圖，然后施工隊根據圖紙逐段施工，最后質檢團隊驗收，發(fā)現問題就局部修整，確認沒問題后再做整體驗收。

整個系統(tǒng)分四個階段推進：任務規(guī)劃、分層生成、多層次評估和迭代反思。

在任務規(guī)劃階段，系統(tǒng)扮演的是建筑師角色。它接收到用戶的描述——比如"設計一個活潑而精致的儀表盤風格主頁"——之后不是立刻開始寫代碼，而是先生成一份結構化的設計方案。這份方案里包含全局布局計劃，明確整個頁面分哪幾個區(qū)塊、排列順序如何、整體色調和視覺風格是什么；同時還包含每個多媒體元素的局部計劃，比如"這張圖片出現在英雄區(qū)（頁面最頂部的醒目區(qū)域），扮演背景的角色，風格要寫實，顏色偏暖調，構圖是寬幅橫向，光線柔和自然"。

這種雙層規(guī)劃的巧妙之處在于：全局計劃保證了整體的一致性，而局部計劃則為每個具體元素的生成提供了足夠詳細的"施工指令"，讓負責生成圖片、視頻和圖表的工具知道自己該做什么、做成什么樣。

三、每種媒體元素如何根據"施工指令"生成

有了這份詳細的局部計劃，系統(tǒng)就像把任務分配給不同專業(yè)的施工隊一樣，調用不同的生成工具。

圖片由GPT-Image-1負責，局部計劃會告訴它圖片所在的頁面區(qū)塊、在布局中的功能角色、整體頁面風格、應有的視覺風格、色調、構圖方式和光線處理。視頻由Sora-2負責，局部計劃除了告知基本背景信息外，還會指定視覺風格、運動幅度、鏡頭行為以及視頻是否需要能無縫循環(huán)播放。圖表則由GPT-5.1負責生成基于ECharts的HTML代碼，局部計劃會告知圖表類型、配色方案、數據內容和視覺重點。

所有這些生成工作在局部計劃完成后可以并行進行，效率大幅提升。生成完畢后，各個資產被嵌入到按照全局計劃生成的HTML框架中，拼成初稿。

四、像老師改卷一樣的三層反思機制

初稿完成后并不意味著大功告成。MM-WebAgent會對這份初稿進行三個層次的檢查和修改，就像一位嚴格的老師先批改每道題的解題過程，再檢查卷面整潔度，最后對整份試卷做總評。

第一層叫"局部精煉"，聚焦在每個單獨的媒體元素上。系統(tǒng)會檢查每張圖片或每個圖表本身有沒有問題：圖片里是否出現了不該有的水印或雜亂內容，顏色是否和局部計劃的要求一致，圖表的數據是否準確，標簽和圖例是否清晰可讀。發(fā)現問題后，圖片會通過圖像編輯工具修改，圖表則通過修改HTML代碼來修復。

第二層叫"上下文精煉"，關注元素嵌入頁面后產生的問題。即使一張圖片本身很漂亮，嵌進頁面后可能因為容器尺寸不匹配而被裁掉重要內容，或者因為CSS設置問題而顯示錯位。這一層專門修復這類"嵌入錯誤"，通過調整相關的HTML/CSS片段來解決對齊、溢出、間距等問題。

第三層叫"全局精煉"，是站在整個頁面高度做的審視。系統(tǒng)同時參考頁面的HTML代碼和渲染后的截圖，檢查全局層面的布局平衡和風格一致性：各區(qū)塊的視覺重量是否均衡，顏色主題是否貫穿始終，整體閱讀體驗是否流暢。發(fā)現問題后對HTML結構進行有針對性的修改。

這三層反思不是走形式，而是真正解決了不同層次的不同問題。局部精煉不能發(fā)現嵌入錯誤，上下文精煉不能發(fā)現全局不均衡，全局精煉不能修復單張圖片的內容缺陷。三層配合，才能做到全面覆蓋。

五、專門為這項任務設計的測試平臺

研究團隊意識到，要評估一套多媒體網頁生成系統(tǒng)，現有的測試基準都不夠用。現有基準要么只測代碼對不對，不管視覺效果；要么測的是"給你一張截圖，你能還原出代碼嗎"，而不是"給你一個描述，你能創(chuàng)造出合適的內容嗎"；要么提供靜態(tài)圖片資源作為輸入，完全回避了原生媒體生成的質量問題。

于是團隊自己構建了一個叫MM-WebGEN-Bench的測試集，包含120個精心篩選的網頁生成任務。這些任務覆蓋了11種場景類別（從企業(yè)官網到個人作品集，從數據分析儀表盤到創(chuàng)意營銷頁面）和11種視覺風格（從極簡主義到粗野主義，從學術刊物風到電影海報風）。在媒體內容方面，測試集包含4種類型的視頻、8種類型的圖片和17種類型的圖表，確保對多媒體生成能力的全面考察。

測試集的構建過程也經過精心設計：先隨機組合布局復雜度、視覺風格、媒體元素類型和語義意圖四個維度，由AI代理將這些組合擴寫成詳細的設計描述，然后經過格式自動檢驗和人工審核雙重篩選，剔除布局不合理、風格前后矛盾或媒體組合不現實的樣本，最終保留高質量的120個測試案例。

評估方式也分兩個層次。全局層次評估三件事：布局正確性（區(qū)塊層級和空間安排是否符合設計描述）、風格一致性（顏色、字體、設計主題在各區(qū)塊間是否統(tǒng)一）和審美質量（視覺平衡感、可讀性和整體吸引力）。局部層次則分別評估圖片、視頻和圖表的質量，考察語義相關性、視覺特征和與整體頁面風格的契合度，同時把"設計要求的元素根本沒有出現"也計入嚴重失分。

評分機制根據評估維度的特性分兩種。對于有明確規(guī)則可循的維度（如布局正確性和風格一致性），采用扣分制：評估系統(tǒng)找出每個違規(guī)點并按嚴重程度扣分，最終得分等于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本來的設計目標并不側重后端邏輯，能在這個不擅長的賽道上打平手，說明其整體能力是扎實的。

七、拆解各個組件的貢獻

為了搞清楚哪部分設計真正起了作用，研究團隊做了一系列消融實驗，相當于把一道菜里的調料一樣一樣拿掉，看少了哪個味道會變差。

去掉分層規(guī)劃，讓系統(tǒng)直接一步生成整個頁面，結果多媒體元素質量斷崖式下跌，圖片得分降回0.05，視頻接近0，綜合得分從0.75降至0.42。加上分層規(guī)劃但去掉局部計劃（只保留全局布局計劃），綜合得分從0.75降至0.69，圖片和視頻得分明顯下滑，說明為每個元素量身定制的局部計劃是不可或缺的。

在反思機制方面，單獨啟用局部精煉主要改善圖片和視頻質量；單獨啟用全局精煉主要改善布局和風格一致性；同時啟用所有反思層級才能取得最佳綜合效果。三層反思各司其職，缺一不可。

還有一個特別重要的發(fā)現：如果只是把AIGC工具（GPT-Image-1等）塞進普通代碼生成流程，而不使用MM-WebAgent的規(guī)劃和反思框架，綜合得分從0.42只提升到0.45。真正的質量飛躍來自分層規(guī)劃和多層反思的協(xié)作設計，工具本身只是必要條件，不是充分條件。

在效率方面，MM-WebAgent每個任務平均耗時155.8秒，費用約3.21美元。與此對比，OpenHands平均耗時182.4秒，費用0.27美元；bolt.diy平均耗時76.9秒，費用0.14美元。MM-WebAgent的費用較高，主要是因為圖片和視頻生成本身代價不低；但考慮到它承擔的任務復雜度遠超代碼生成，時間上的表現其實相當有競爭力。特別值得一提的是，圖片、視頻和圖表的生成是并行執(zhí)行的，總時長遠小于各模塊時間之和。

在用戶研究方面，研究團隊招募了50位具有網頁設計、計算機科學或多媒體內容創(chuàng)作背景的評測人員，進行盲測比較。評測人員在不知道哪個結果來自哪個方法的情況下，對兩兩配對的網頁從布局質量、內容相關性、多媒體資產質量和局部元素嵌入質量四個維度打分。最終MM-WebAgent的勝出率為78.99%，說明人類評測者對其生成質量有明確的偏好。

歸根結底，這項研究做的事情可以用一句話概括：讓AI在設計網頁時，終于有了一位懂全局的總指揮，而不只是一群各干各活的工人。分層規(guī)劃解決了"元素從一開始就知道自己該是什么樣"的問題，迭代反思解決了"生成完還能回頭查漏補缺"的問題，兩者合力才把多媒體網頁生成從"能用但不好看"推向了"好看而且協(xié)調"。

當然，這套系統(tǒng)目前也存在一些局限。它依賴外部的圖像、視頻和圖表生成工具，這些工具各自的局限性會直接影響最終頁面的質量。如果某個工具發(fā)生服務變更或內容安全過濾策略調整，整個系統(tǒng)的行為都會受到影響。此外，系統(tǒng)當前的規(guī)劃和反思流程是固定的，沒有通過學習來優(yōu)化，未來若能引入強化學習讓系統(tǒng)從每次生成經驗中改進決策，表現有望進一步提升。

對于關注AI輔助設計工具的讀者來說，這項研究提出了一個值得思考的問題：當AI越來越能自主生成復雜的多媒體內容時，"設計感"究竟是可以被系統(tǒng)化規(guī)劃出來的，還是永遠需要人類的介入？MM-WebAgent給出的是一個樂觀但謹慎的答案——系統(tǒng)化的規(guī)劃和自我修正機制可以走得很遠，但還遠未到終點。有興趣深入探究技術細節(jié)的讀者，可以通過arXiv:2604.15309查閱完整論文。

Q&A

Q1：MM-WebAgent和普通AI網頁生成工具有什么區(qū)別？

A：普通AI網頁生成工具通常只生成HTML和CSS代碼，遇到需要圖片或視頻的地方要么留占位符，要么插入檢索圖片，各元素獨立生成、風格不統(tǒng)一。MM-WebAgent的區(qū)別在于它有分層規(guī)劃機制，先確定全局風格和布局，再為每個多媒體元素制定具體的生成指令，確保圖片、視頻、圖表都在統(tǒng)一的設計語言下生成，最后還會經過三層自我檢查和修正，讓整個頁面看起來渾然一體。

Q2：MM-WebGEN-Bench測試集是怎么保證評測質量的？

A：MM-WebGEN-Bench通過兩道篩選保證質量。第一道是自動格式驗證，排除結構錯誤的任務描述；第二道是人工審核，有經驗的研究人員逐一檢查渲染后的網頁，剔除布局不合理、風格前后矛盾或媒體組合不現實的樣本。經過這兩道篩選，最終保留了120個覆蓋11種場景、11種視覺風格和多種媒體類型的高質量測試案例。

Q3：MM-WebAgent生成一個網頁大概需要多長時間和多少成本？

A：以GPT-5.1作為骨干模型時，生成一個網頁平均耗時約155.8秒，費用約3.21美元。費用較高的主要原因是圖片和視頻的原生生成本身成本較高。相比之下，純代碼生成工具耗時更短、費用更低，但無法生成真實的多媒體內容。研究團隊指出，隨著多模態(tài)模型持續(xù)進步和開源替代方案增多，這套框架的成本有望隨之下降。