這項由香港中文大學多媒體實驗室的陸梓慕、任厚星、楊云喬等研究人員組成的團隊完成的研究，發(fā)表于2025年1月的arXiv預印本，論文編號為arXiv:2509.22644v1。有興趣深入了解的讀者可以通過該編號查詢完整論文。

以前，我們想要AI幫忙做網(wǎng)站，就像讓一個從未見過世界的人閉著眼睛畫畫一樣。AI只能根據(jù)代碼是否出錯來判斷網(wǎng)站好不好，完全看不到最終的網(wǎng)站長什么樣，更不知道用戶點擊按鈕時會發(fā)生什么。這就導致生成的網(wǎng)站經(jīng)常出現(xiàn)各種問題：按鈕擺得亂七八糟、顏色搭配得像彩虹一樣刺眼、點擊鏈接卻跳不到該去的地方。

如今，香港中文大學的研究團隊為這個問題找到了一個巧妙的解決方案。他們開發(fā)的WebGen-Agent系統(tǒng)，就像給AI裝上了一雙眼睛和一個專業(yè)的網(wǎng)站測試員。這個系統(tǒng)不僅能"看到"網(wǎng)站的樣子，還能像真實用戶一樣在網(wǎng)站上點來點去，測試每個功能是否正常工作。

整個過程就像是一個不斷改進的循環(huán)。AI先寫代碼生成網(wǎng)站，然后截圖看看效果如何，就像畫家畫完畫后退后幾步欣賞作品。如果發(fā)現(xiàn)顏色不協(xié)調(diào)或者布局有問題，AI會根據(jù)視覺反饋進行調(diào)整。接著，系統(tǒng)會啟動一個虛擬用戶來測試網(wǎng)站功能，這個虛擬用戶會點擊每個按鈕、填寫表單、瀏覽各個頁面，就像真正的訪客一樣。如果發(fā)現(xiàn)某個功能不工作，系統(tǒng)會記錄下來并告訴AI該如何修復。

這種方法的效果令人驚喜。在測試中，原本只有26.4%準確率的Claude-3.5-Sonnet模型，使用WebGen-Agent后準確率躍升至51.9%，幾乎翻了一倍。不僅如此，生成網(wǎng)站的美觀程度也從3.0分提升到3.9分（滿分5分），這意味著網(wǎng)站不僅功能更完善，看起來也更加賞心悅目。

研究團隊還開發(fā)了一套專門的訓練方法，叫做Step-GRPO。這就像是給AI學生配備了一個嚴格的老師，在AI生成網(wǎng)站的每一個步驟都給出評分和建議。傳統(tǒng)的訓練方法只在最后告訴AI結果好不好，而這套新方法會在整個過程中持續(xù)指導，告訴AI每一步做得如何，應該往哪個方向改進。

通過這種訓練方法，即使是相對較小的AI模型也能顯著提升性能。比如Qwen2.5-Coder-7B模型，經(jīng)過訓練后準確率從38.9%提升到45.4%，美觀度評分也從3.4分升至3.7分。這證明了不需要更大更昂貴的AI模型，通過更好的訓練方法同樣可以獲得出色的效果。

**一、傳統(tǒng)網(wǎng)站生成AI的盲點問題**

以往的AI網(wǎng)站生成系統(tǒng)就像是一個優(yōu)秀的程序員，但卻患有嚴重的"色盲"和"觸覺失調(diào)"。這些系統(tǒng)能夠熟練地編寫HTML、CSS和JavaScript代碼，邏輯清晰，語法正確，但它們最大的問題是無法真正"看到"自己創(chuàng)造的作品，也無法像普通用戶那樣與網(wǎng)站互動。

當AI完成代碼編寫后，它唯一的反饋來源就是代碼是否能夠成功運行。這就好比一個廚師做菜，只知道食材有沒有煮熟，卻永遠嘗不到味道，也看不到菜品的賣相。即使代碼運行正常，網(wǎng)站可能依然存在各種用戶體驗問題：重要按鈕被擠到了頁面邊角、文字顏色和背景顏色太接近導致看不清楚、表單提交按鈕點擊后毫無反應、導航菜單在手機上顯示混亂。

更糟糕的是，這些AI系統(tǒng)無法理解網(wǎng)站的整體視覺效果。它們可能會創(chuàng)建一個功能完備的在線商店，但這個商店的頁面布局混亂不堪，產(chǎn)品圖片大小不一，購買按鈕藏在頁面底部不顯眼的位置。對于注重用戶體驗的現(xiàn)代網(wǎng)站來說，這樣的問題往往比功能性錯誤更致命，因為用戶在糟糕的視覺體驗面前會立即失去耐心。

研究團隊意識到，要讓AI真正擅長網(wǎng)站開發(fā)，必須讓它具備兩種人類開發(fā)者天然具有的能力：審美判斷和用戶測試。前者需要AI能夠"看見"網(wǎng)站的視覺效果，就像設計師審視自己的作品一樣；后者需要AI能夠模擬真實用戶的行為，像質量測試員一樣仔細檢查每個功能。

**二、WebGen-Agent的雙眼視覺系統(tǒng)**

WebGen-Agent的核心創(chuàng)新在于為AI配備了兩套"感官系統(tǒng)"：視覺系統(tǒng)和交互測試系統(tǒng)。這兩套系統(tǒng)相互配合，讓AI能夠從用戶的角度全面評估網(wǎng)站質量。

視覺系統(tǒng)的工作原理類似于專業(yè)的網(wǎng)頁設計評審。當AI生成網(wǎng)站代碼并成功運行后，系統(tǒng)會自動對網(wǎng)站首頁進行截圖，然后將這張截圖交給一個專門訓練過的視覺語言模型進行分析。這個模型就像一位資深的UI設計師，它會仔細觀察網(wǎng)站的各個方面：整體布局是否協(xié)調(diào)、色彩搭配是否和諧、重要元素是否突出、是否存在明顯的設計缺陷。

分析完成后，視覺模型會生成詳細的評價報告，包括對網(wǎng)站外觀的文字描述、美觀度評分（1-5分），以及具體的改進建議。比如，它可能會指出"導航欄和主要內(nèi)容區(qū)域的顏色對比度不夠，建議加深導航欄背景色"，或者"頁面左側有大片空白區(qū)域，建議添加側邊欄或調(diào)整內(nèi)容布局"。

交互測試系統(tǒng)則扮演著虛擬用戶的角色。當視覺評估通過后，系統(tǒng)會啟動一個GUI代理，這個代理會像真實用戶一樣瀏覽網(wǎng)站。它會點擊每個按鈕、填寫表單、測試搜索功能、嘗試不同的導航路徑。整個過程完全模擬真實用戶的行為模式，甚至包括用戶可能犯的一些小錯誤，比如在必填字段中留空或者輸入錯誤格式的郵箱地址。

在測試過程中，GUI代理會詳細記錄每次交互的結果。如果發(fā)現(xiàn)某個按鈕點擊后沒有反應，或者表單提交后出現(xiàn)錯誤信息，或者某個頁面無法正常加載，代理都會將這些問題記錄下來，并生成相應的功能性評分。最終，這個評分會反映網(wǎng)站功能的完整程度和用戶體驗的流暢程度。

這兩套系統(tǒng)的結合使用，讓WebGen-Agent能夠從多個維度全面評估網(wǎng)站質量。視覺系統(tǒng)確保網(wǎng)站"好看"，交互系統(tǒng)確保網(wǎng)站"好用"。更重要的是，當發(fā)現(xiàn)問題時，系統(tǒng)不僅會指出問題所在，還會提供具體的修改建議，指導AI在下一輪改進中朝著正確的方向努力。

**三、智能回溯和最優(yōu)選擇機制**

WebGen-Agent還具備了一套智能的"后悔機制"，這就像給AI裝上了撤銷鍵和智能存檔系統(tǒng)。在網(wǎng)站開發(fā)過程中，AI有時會陷入越改越糟的困境，這時候智能回溯功能就派上了用場。

系統(tǒng)會在每一個成功運行的步驟處自動創(chuàng)建"存檔點"，記錄當時的代碼狀態(tài)、視覺評分和功能評分。當AI連續(xù)5次修改都出現(xiàn)代碼錯誤時，系統(tǒng)會判斷當前的修改方向可能有問題，立即觸發(fā)回溯機制，將整個項目恢復到之前最好的狀態(tài)，然后重新開始改進。

這種機制特別有用，因為AI在修復一個問題時，有時會無意中破壞其他已經(jīng)工作正常的功能。比如，AI為了修復按鈕顏色問題而修改CSS樣式，結果卻意外改變了整個頁面的布局。傳統(tǒng)系統(tǒng)會繼續(xù)在這個錯誤的基礎上進行修改，越改越亂，而WebGen-Agent會及時發(fā)現(xiàn)問題并回到正確的軌道上。

除了錯誤回溯，系統(tǒng)還有一套最優(yōu)選擇機制。即使整個開發(fā)過程順利完成，系統(tǒng)也會回顧整個過程中的所有版本，選擇綜合評分最高的版本作為最終結果。選擇標準很有講究：首先比較功能評分，選擇功能最完善的版本，如果功能評分相同，再比較視覺評分，選擇最美觀的版本，如果兩項評分都相同，則選擇最新的版本。

這種設計理念體現(xiàn)了"功能優(yōu)先，美觀其次"的務實原則。畢竟，一個功能殘缺但外觀精美的網(wǎng)站，遠不如一個功能完整但外觀普通的網(wǎng)站有價值。但在功能相當?shù)那闆r下，更美觀的設計當然更受歡迎。

**四、Step-GRPO訓練方法的突破**

傳統(tǒng)的AI訓練就像期末考試，只在最后告訴學生總成績是多少，卻不說具體哪道題做錯了，為什么錯，應該怎么改進。而WebGen-Agent開發(fā)的Step-GRPO訓練方法，則像是配備了一位全程跟蹤指導的私人教師。

這套訓練方法充分利用了WebGen-Agent工作流程中產(chǎn)生的豐富反饋信息。在AI生成網(wǎng)站的每一個步驟，系統(tǒng)都會獲得視覺評分和功能評分，這些評分加起來就構成了該步驟的綜合獎勵值。與傳統(tǒng)方法只在整個任務完成后給出一個總體評價不同，Step-GRPO會對每一步的表現(xiàn)進行實時評價和獎勵。

具體來說，當AI在某一步成功改善了網(wǎng)站的視覺效果，比如將原本擁擠的頁面布局調(diào)整得更加清爽，視覺評分就會上升，AI會立即獲得正面獎勵，知道這個修改方向是正確的。同樣，如果AI修復了一個功能性問題，比如讓原本無法提交的表單能夠正常工作，功能評分的提升也會給AI帶來正面反饋。

這種步驟級的獎勵機制有幾個顯著優(yōu)勢。首先，它能夠提供更密集的學習信號，讓AI能夠快速識別哪些行為是有益的，哪些是有害的。其次，它能夠幫助AI理解復雜任務中的因果關系，比如理解某個CSS屬性的修改如何影響頁面的整體視覺效果。最后，它能夠防止AI在長期任務中迷失方向，即使最終結果不夠理想，AI也能從過程中的部分成功中學到有價值的經(jīng)驗。

實驗結果證明了這種訓練方法的有效性。經(jīng)過Step-GRPO訓練的7B參數(shù)模型，在網(wǎng)站生成任務上的表現(xiàn)顯著超越了同規(guī)模的其他模型，甚至在某些指標上接近了更大規(guī)模模型的性能。這意味著通過更好的訓練方法，我們可以用更少的計算資源獲得更好的效果，這對于普及AI網(wǎng)站生成技術具有重要意義。

**五、實驗驗證和性能提升**

研究團隊在WebGen-Bench這個專門的網(wǎng)站生成測試平臺上進行了全面的實驗驗證。這個測試平臺包含101個不同難度和類型的網(wǎng)站生成任務，涵蓋了從簡單的個人博客到復雜的電商網(wǎng)站的各種場景，以及647個GUI測試用例，確保能夠全面評估AI的網(wǎng)站生成能力。

實驗結果讓人印象深刻。以Claude-3.5-Sonnet這個目前表現(xiàn)優(yōu)秀的AI模型為例，使用傳統(tǒng)方法時，它在網(wǎng)站生成任務上的準確率只有26.4%，也就是說10個網(wǎng)站任務中只能成功完成不到3個。而使用WebGen-Agent后，準確率躍升至51.9%，成功率提高了近一倍。更令人驚喜的是，生成網(wǎng)站的美觀度評分也從3.0分提升到3.9分，這意味著不僅功能更完善，視覺效果也明顯改善。

這種提升不僅限于大型模型。對于計算資源相對有限的用戶來說，更令人鼓舞的是小型模型的表現(xiàn)改善。Qwen2.5-Coder-7B這個只有70億參數(shù)的模型，原本準確率只有12.4%，幾乎無法勝任實際的網(wǎng)站生成工作。但經(jīng)過Step-GRPO訓練后，準確率大幅提升至45.4%，美觀度評分也從1.6分躍升至3.7分。

這些數(shù)字背后反映的是WebGen-Agent在實際應用中的價值。在傳統(tǒng)方法下，用戶可能需要嘗試多次才能得到一個勉強可用的網(wǎng)站，而且還需要大量的手動修改。而使用WebGen-Agent后，用戶更有可能在第一次嘗試就得到一個既美觀又實用的網(wǎng)站，大大提高了工作效率。

研究團隊還對不同類型的網(wǎng)站生成任務進行了分類分析。結果顯示，WebGen-Agent在各種類型的任務上都取得了顯著改善，無論是注重內(nèi)容展示的信息網(wǎng)站，還是強調(diào)用戶交互的應用程序，或者是需要復雜數(shù)據(jù)管理的后臺系統(tǒng)，都能從這套新方法中受益。

**六、技術實現(xiàn)的精妙細節(jié)**

WebGen-Agent的技術實現(xiàn)充滿了巧思，整個系統(tǒng)的架構設計體現(xiàn)了研究團隊對AI網(wǎng)站生成任務的深刻理解。

系統(tǒng)采用了模塊化的設計理念，將代碼生成引擎和視覺反饋系統(tǒng)分離開來。這種設計的好處是可以根據(jù)需要選擇不同性能和成本的模型組合。代碼生成部分使用強大的大語言模型，確保生成的代碼質量和邏輯正確性；而視覺反饋部分使用相對輕量級的視覺語言模型，在保證評估準確性的同時控制計算成本。

實驗發(fā)現(xiàn)，使用開源的Qwen2.5-VL-32B模型作為視覺反饋引擎，其效果與昂貴的商業(yè)模型GPT-4o相當，但成本卻低得多。這種發(fā)現(xiàn)對于實際應用具有重要意義，因為它證明了高質量的AI網(wǎng)站生成服務可以以相對較低的成本提供給普通用戶。

在GUI測試方面，系統(tǒng)會根據(jù)原始的網(wǎng)站需求自動生成測試指令，指導虛擬用戶如何測試網(wǎng)站功能。這些指令會覆蓋網(wǎng)站的各個功能點，確保測試的全面性。研究團隊對生成的測試指令進行了人工評估，發(fā)現(xiàn)98.3%的指令都能有效覆蓋原始需求的關鍵功能點，證明了自動化測試生成的可靠性。

系統(tǒng)還實現(xiàn)了智能的迭代控制機制。通過分析不同迭代次數(shù)對最終結果的影響，研究團隊發(fā)現(xiàn)大多數(shù)任務在14-20次迭代后就能達到最佳效果，繼續(xù)增加迭代次數(shù)的收益會顯著遞減。這個發(fā)現(xiàn)幫助系統(tǒng)在效果和效率之間找到了最佳平衡點。

在錯誤處理方面，系統(tǒng)設計了多層次的容錯機制。除了前面提到的5步錯誤回溯機制，系統(tǒng)還會對不同類型的錯誤采用不同的處理策略。比如，對于簡單的語法錯誤，系統(tǒng)會嘗試自動修復；對于邏輯錯誤，系統(tǒng)會回溯到更早的穩(wěn)定狀態(tài)；對于環(huán)境相關的錯誤，系統(tǒng)會重新初始化運行環(huán)境。

說到底，WebGen-Agent的成功不僅僅在于技術上的創(chuàng)新，更在于它真正解決了AI網(wǎng)站生成領域的核心痛點。傳統(tǒng)AI生成的網(wǎng)站就像是閉門造車的產(chǎn)物，雖然在技術層面可能沒有問題，但缺乏對用戶體驗的考慮。而WebGen-Agent通過引入視覺反饋和用戶測試，讓AI能夠站在用戶的角度思考問題，生成真正實用和美觀的網(wǎng)站。

這項研究的意義遠不止于技術層面的改進。它為AI在創(chuàng)意和設計領域的應用提供了新的思路，證明了通過合適的反饋機制，AI可以在需要審美判斷和用戶體驗考量的任務中取得突破性進展。隨著技術的進一步發(fā)展和普及，我們可以期待看到更多普通用戶能夠輕松創(chuàng)建專業(yè)水準的網(wǎng)站，讓網(wǎng)頁設計不再是專業(yè)人士的專利。

對于想要深入了解這項技術的讀者，可以通過arXiv:2509.22644v1查詢完整的研究論文，獲取更多技術細節(jié)和實驗數(shù)據(jù)。研究團隊還承諾會開源相關代碼和模型，這將進一步推動整個領域的發(fā)展，讓更多開發(fā)者和研究者能夠在此基礎上繼續(xù)創(chuàng)新。

**Q&A**

Q1：WebGen-Agent和傳統(tǒng)的網(wǎng)站生成AI有什么區(qū)別？

A：最大的區(qū)別是WebGen-Agent能"看見"網(wǎng)站的樣子并能測試功能。傳統(tǒng)AI只能根據(jù)代碼是否出錯來判斷，就像閉著眼睛做設計，而WebGen-Agent會截圖分析網(wǎng)站外觀，還會像真實用戶一樣點擊測試每個功能，發(fā)現(xiàn)問題后會自動修改改進。

Q2：普通用戶可以使用WebGen-Agent來制作網(wǎng)站嗎？

A：目前WebGen-Agent還是一個研究項目，主要在學術環(huán)境中測試。不過研究團隊承諾會開源相關代碼，未來可能會有基于這項技術的商業(yè)產(chǎn)品出現(xiàn)?，F(xiàn)在普通用戶還需要等待更成熟的產(chǎn)品化版本。

Q3：WebGen-Agent生成的網(wǎng)站質量到底有多好？

A：在測試中，WebGen-Agent讓AI的網(wǎng)站生成成功率從26%提升到52%，美觀度評分從3.0提升到3.9分（滿分5分）。這意味著生成的網(wǎng)站不僅功能更完善，看起來也更加專業(yè)美觀，基本達到了可以實際使用的水平。