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

當(dāng)我們看到一張精美的網(wǎng)頁設(shè)計圖時，總是會想：要是能直接把這個設(shè)計變成真正的網(wǎng)站該多好啊！現(xiàn)在，這個愿望正在成為現(xiàn)實。就像有了一位超級程序員助手，只需要給它看一眼設(shè)計稿，它就能瞬間寫出對應(yīng)的HTML和CSS代碼。

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

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

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

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

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

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

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

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

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

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

比如，當(dāng)它看到"導(dǎo)航欄"這個標(biāo)簽時，就知道應(yīng)該生成包含導(dǎo)航鏈接的代碼結(jié)構(gòu)；當(dāng)看到"側(cè)邊欄"時，就會生成適合放置輔助信息的代碼框架。這種方法比簡單的模板填充更靈活，能夠根據(jù)具體情況調(diào)整代碼的細(xì)節(jié)。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Q&A

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

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

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

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

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

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