這項由香港中文大學MMLab和ARISE實驗室聯(lián)合開展的最新研究，于2025年7月發(fā)表。研究團隊包括姜藝磊、鄭耀志、萬玉軒、韓佳明、王群忠、Michael R. Lyu和岳向宇等學者。有興趣深入了解的讀者可以通過GitHub項目頁面（https://github.com/leigest519/ScreenCoder）訪問完整代碼和技術細節(jié)。

當我們看到一張精美的網頁設計圖時，總是會想：要是能直接把這個設計變成真正的網站該多好?。‖F在，這個愿望正在成為現實。就像有了一位超級程序員助手，只需要給它看一眼設計稿，它就能瞬間寫出對應的HTML和CSS代碼。

傳統(tǒng)的網頁開發(fā)就像是翻譯工作。設計師畫出精美的設計圖，程序員要一行行地寫代碼來實現這個設計。這個過程不僅耗時，還容易出錯。程序員需要仔細觀察設計圖中每個元素的位置、顏色、大小，然后用代碼語言把這些視覺效果描述出來。這就好比你要用文字準確描述一幅畫，不僅要說出畫中有什么，還要精確地說明每個物體的位置關系。

近年來，隨著大語言模型的興起，一些系統(tǒng)開始嘗試直接從文字描述生成網頁代碼。你可以告訴AI"我想要一個有側邊欄和導航欄的博客頁面"，它就能生成相應的代碼。但這種方法有個致命弱點：文字描述往往無法準確表達復雜的視覺設計。就像你很難用文字完美描述蒙娜麗莎的微笑一樣，網頁的布局、色彩搭配、元素間距這些細節(jié)，用文字描述起來既冗長又不準確。

更重要的是，在實際的設計工作流程中，設計師習慣于從視覺草圖開始。他們會先畫出線框圖，然后制作高保真的設計稿，最后才交給程序員實現。如果AI只能理解文字而看不懂圖片，就無法真正融入這個工作流程。

研究團隊發(fā)現，現有的視覺語言模型雖然能看圖說話，但在處理網頁設計到代碼生成這個特殊任務時表現很差。問題出在哪里呢？原來，這個任務需要三種完全不同的能力協(xié)同工作：首先要能看懂圖片中的各種界面元素，然后要懂得網頁布局的設計原理，最后還要會寫規(guī)范的前端代碼。讓一個AI系統(tǒng)同時掌握這三種能力，就像要求一個人既是美術老師、又是建筑師、還是編程專家一樣困難。

為了解決這個問題，研究團隊提出了一個巧妙的解決方案：把這個復雜任務分解成三個相對簡單的步驟，讓三個專門的AI助手分工協(xié)作。這就像是組建了一個專業(yè)團隊，每個成員都有自己的專長。

第一個助手叫做"識別專家"，它的工作就像是一個細心的觀察員。當你給它一張網頁設計圖時，它會仔細掃描整個頁面，找出各種重要的功能區(qū)域。比如它會指著圖片的頂部說："這里是導航欄"，然后指著左邊說："這是側邊欄"，接著指著右邊大塊區(qū)域說："這是主要內容區(qū)"。這個過程就像是給網頁做解剖，把復雜的整體分解成清晰的組件。

有趣的是，這個識別專家不是傳統(tǒng)的目標檢測系統(tǒng)，而是基于視覺語言模型。研究人員會直接問它："側邊欄在哪里？"、"導航欄在哪個位置？"它就會用自然語言和坐標位置來回答。這種方法的好處是靈活性很強，如果將來需要識別新的界面元素，只需要換個問法就行，不用重新訓練整個系統(tǒng)。

第二個助手是"規(guī)劃專家"，它的作用類似于建筑師。在識別專家完成工作后，規(guī)劃專家會接手這些分散的組件信息，然后按照網頁設計的專業(yè)原理把它們組織成一個有層次的結構。這就像是搭積木，需要考慮哪些元素應該放在同一層，哪些元素應該包含在其他元素內部。

規(guī)劃專家使用的是CSS Grid布局系統(tǒng)的設計理念。CSS Grid就像是一個萬能的網格紙，你可以在上面靈活地排列各種元素。規(guī)劃專家會根據識別出的組件位置關系，畫出一個虛擬的網格圖，然后決定每個組件應該占據網格中的哪些位置。這個過程不需要復雜的計算，而是基于簡單的空間推理規(guī)則。

第三個助手是"代碼生成專家"，它就像是一個經驗豐富的前端程序員。在拿到規(guī)劃專家制作的結構圖后，它會根據每個組件的語義標簽（比如"這是導航欄"、"這是內容區(qū)"）來生成相應的HTML和CSS代碼。這個過程使用了自適應的提示技術，也就是說，針對不同類型的組件，它會采用不同的代碼生成策略。

比如，當它看到"導航欄"這個標簽時，就知道應該生成包含導航鏈接的代碼結構；當看到"側邊欄"時，就會生成適合放置輔助信息的代碼框架。這種方法比簡單的模板填充更靈活，能夠根據具體情況調整代碼的細節(jié)。

整個系統(tǒng)還有一個額外的巧思：圖片恢復功能。我們都知道，網頁上經常有各種圖片，比如產品照片、用戶頭像、裝飾性圖片等。但是AI生成的代碼只能用灰色占位符來代表這些圖片位置。為了讓生成的網頁更接近原始設計，研究團隊開發(fā)了一個圖片恢復系統(tǒng)。

這個系統(tǒng)會對比原始設計圖和生成的網頁，找出哪些灰色占位符應該對應原圖中的哪些圖片區(qū)域。然后它會把原始圖片中的相應部分裁剪出來，精確地替換掉占位符。這就像是一個細致的拼圖游戲，確保每個圖片都回到它應該在的位置。

為了驗證這個系統(tǒng)的效果，研究團隊構建了一個包含50000個網頁設計圖和對應代碼的大型數據集。這個數據集涵蓋了各種不同類型的網頁，包括電商平臺、社交媒體、個人博客、企業(yè)官網等等。通過在這個多樣化的數據集上進行測試，他們發(fā)現這種分工協(xié)作的方法確實比傳統(tǒng)的端到端方法效果更好。

具體來說，在布局準確性方面，這個系統(tǒng)達到了75.5%的精確度，明顯超過了現有的最佳方法。在文字內容的還原度方面，準確率高達94.6%。在元素位置對齊方面也有84%的準確率。這些數字聽起來可能比較抽象，但換個角度理解：如果給系統(tǒng)100張設計圖，大約有75張能夠生成布局完全正確的網頁代碼。

研究團隊還發(fā)現了一個有趣的現象：這個系統(tǒng)不僅能夠生成高質量的代碼，還能作為訓練其他AI模型的數據工廠。他們用系統(tǒng)生成的大量圖片-代碼配對數據來訓練開源的視覺語言模型Qwen2.5-VL，結果發(fā)現模型的網頁理解和代碼生成能力都有顯著提升。

這種訓練方法分為兩個階段。第一階段是基礎學習，就像是讓AI學生先看大量的教科書例題，掌握基本的圖片理解和代碼編寫技能。第二階段是強化訓練，通過獎勵機制來引導AI寫出更好的代碼。這個獎勵機制會從三個角度評估生成的代碼：布局完整性（是否包含了所有必要的元素）、文字準確性（是否正確識別了圖片中的文字）和位置對齊度（各個元素的位置是否正確）。

經過這種兩階段訓練后，開源模型的表現有了質的飛躍，在某些指標上甚至能夠接近商業(yè)化的閉源模型的水平。這意味著，研究團隊不僅開發(fā)了一個有效的網頁生成系統(tǒng)，還找到了一種培訓AI程序員的新方法。

從實際應用的角度來看，這個系統(tǒng)有很多令人興奮的可能性。對于設計師來說，他們可以把更多時間投入到創(chuàng)意設計上，而不用擔心技術實現的復雜性。畫好設計稿后，AI助手就能立即生成可運行的網頁原型，設計師可以快速看到效果并進行調整。

對于程序員來說，這個系統(tǒng)就像是一個智能的代碼生成助手。它不會完全取代程序員，而是幫助他們完成繁瑣的基礎代碼編寫工作，讓程序員能夠專注于更有創(chuàng)造性的功能開發(fā)和優(yōu)化工作。

對于那些沒有編程背景但有設計想法的普通人來說，這個系統(tǒng)打開了新的可能性。他們可以用設計工具畫出心目中的網頁樣子，然后讓AI來實現技術細節(jié)。這就像是有了一個萬能的技術合伙人，能夠把創(chuàng)意想法快速轉化為現實。

當然，這項技術目前還有一些局限性。比如，它主要專注于靜態(tài)網頁的生成，對于復雜的交互功能支持還不夠完善。生成的代碼主要適用于展示類網頁，如果需要復雜的用戶交互或者后端數據處理，仍然需要人工編程來完善。

另外，雖然系統(tǒng)的準確率已經相當高，但在處理一些非常規(guī)的設計風格或者特殊布局時，可能還會出現理解偏差。這就像是一個優(yōu)秀的翻譯員，雖然大部分時候都能準確翻譯，但遇到詩歌或者雙關語時可能還需要人工協(xié)助。

盡管如此，這項研究的意義還是非常重大的。它不僅在技術上實現了突破，更重要的是為AI輔助設計和開發(fā)領域指明了一個新方向。通過將復雜任務分解為多個專門化的子任務，然后讓不同的AI系統(tǒng)協(xié)作完成，這種模塊化的方法可能會在其他領域也有廣泛的應用前景。

比如，這種思路可能也適用于移動應用界面的自動生成、桌面軟件界面的設計，甚至是游戲界面的制作。核心思想都是一樣的：讓AI學會看懂視覺設計，理解設計背后的結構邏輯，然后生成相應的實現代碼。

從更宏觀的角度來看，這項研究反映了人工智能發(fā)展的一個重要趨勢：從單一的超級模型轉向專業(yè)化的協(xié)作系統(tǒng)。就像人類社會中的分工協(xié)作一樣，未來的AI系統(tǒng)可能也會朝著更精細化的專業(yè)分工方向發(fā)展。每個AI都有自己的專長領域，然后通過協(xié)作來解決復雜的綜合性問題。

這種模塊化的設計還有一個重要優(yōu)勢：系統(tǒng)的可解釋性更強。當生成的結果出現問題時，開發(fā)者可以逐個檢查每個模塊的輸出，快速定位問題所在。這就像是修理汽車時，如果發(fā)動機、變速箱、制動系統(tǒng)都是獨立的模塊，修理工就能更容易找到故障點。

說到底，這項研究展示了AI技術在創(chuàng)意工作中的巨大潛力。它不是要取代設計師和程序員，而是要成為他們的得力助手，讓創(chuàng)意的實現變得更加容易和高效。當技術門檻降低后，更多的人就能參與到網頁設計和開發(fā)中來，這可能會催生出更多富有創(chuàng)意的網站和應用。

未來，我們可能會看到這樣的場景：一個咖啡店老板想要為自己的小店建一個網站，他只需要在紙上畫出心目中網站的樣子，拍個照片上傳給AI系統(tǒng)，幾分鐘后就能得到一個完整的網站代碼。設計師可以快速制作出多個設計方案的實際效果，讓客戶能夠直觀地比較和選擇。程序員可以把更多精力投入到復雜的功能開發(fā)上，而不用花費大量時間在重復性的界面編碼工作上。

這項技術的開源性質也值得稱贊。研究團隊選擇將代碼公開，這意味著全世界的開發(fā)者都可以在此基礎上繼續(xù)改進和擴展。這種開放的研究態(tài)度有助于整個技術社區(qū)的共同進步，也讓普通用戶能夠更快地享受到技術進步帶來的便利。

有興趣的讀者可以訪問項目的GitHub頁面，那里不僅有完整的代碼實現，還有詳細的使用說明和示例。無論你是專業(yè)的開發(fā)者，還是對這項技術感興趣的普通用戶，都可以嘗試使用這個系統(tǒng)來體驗從設計圖到網頁代碼的神奇轉換過程。

Q&A

Q1：ScreenCoder系統(tǒng)是如何工作的？它的三個AI助手分別做什么？

A：ScreenCoder系統(tǒng)通過三個專門的AI助手協(xié)作工作。第一個"識別專家"負責觀察網頁設計圖，找出并標記各種功能區(qū)域如導航欄、側邊欄、內容區(qū)等。第二個"規(guī)劃專家"接收這些組件信息，按照網頁設計原理將它們組織成有層次的布局結構。第三個"代碼生成專家"根據布局結構和組件標簽，生成對應的HTML和CSS代碼。

Q2：這個系統(tǒng)生成的網頁代碼準確率有多高？

A：根據測試結果，ScreenCoder在布局準確性方面達到75.5%，文字內容還原度高達94.6%，元素位置對齊準確率為84%。這意味著給系統(tǒng)100張設計圖，大約有75張能夠生成布局完全正確的網頁代碼，表現明顯超過了現有的其他方法。

Q3：普通人可以使用ScreenCoder嗎？它有什么實際應用價值？

A：ScreenCoder的代碼已經在GitHub上開源，技術人員可以直接使用。對普通人來說，這項技術的價值在于大大降低了網頁開發(fā)的門檻。未來普通用戶可能只需要畫出網頁設計圖，AI就能自動生成可運行的網站代碼，讓沒有編程背景的人也能輕松創(chuàng)建自己的網站。