**前端工程師的工作流**是一個(gè)復(fù)雜而精細(xì)的過程，它從抽象的設(shè)計(jì)概念開始，經(jīng)過精確的視覺感知理解，最終轉(zhuǎn)化為功能完備的交互式代碼。隨著技術(shù)的發(fā)展，多模態(tài)大語言模型（MLLMs）展現(xiàn)出了在處理視覺信息和生成代碼方面的巨大潛力，有望徹底改變前端開發(fā)領(lǐng)域。但是，我們是否真的了解這些模型在整個(gè)前端開發(fā)流程中的表現(xiàn)如何呢？

這項(xiàng)由同濟(jì)大學(xué)的孫浩宇、華盛頓大學(xué)的王惠辰、中山大學(xué)的顧嘉偉、微軟的李林杰以及香港中文大學(xué)的成宇領(lǐng)導(dǎo)的研究發(fā)表于2025年5月的arXiv預(yù)印本（arXiv:2505.17399v1），為我們提供了一個(gè)全面的答案。研究團(tuán)隊(duì)創(chuàng)建了名為"FullFront"的基準(zhǔn)測試，系統(tǒng)性地評(píng)估了多模態(tài)大語言模型在完整前端開發(fā)流程中的能力。有興趣深入了解的讀者可以通過https://github.com/Mikivishy/FullFront訪問完整論文和代碼。

一、為什么我們需要全面的前端工程評(píng)測基準(zhǔn)？

想象一下烹飪一道復(fù)雜的菜肴：你需要先構(gòu)思菜單（概念化），然后理解每種食材的特性和搭配（感知理解），最后按照特定步驟烹飪出成品（實(shí)現(xiàn)）。前端工程也是如此，包含三個(gè)關(guān)鍵階段：設(shè)計(jì)概念化、視覺理解和代碼實(shí)現(xiàn)。

目前的問題在于，現(xiàn)有的評(píng)測基準(zhǔn)就像是只測試廚師切菜或調(diào)味的能力，而非評(píng)估整道菜肴的制作過程。例如，IW-Bench和WebCode2M專注于評(píng)估從視覺輸入生成代碼的能力，但忽略了交互功能的實(shí)現(xiàn)或現(xiàn)有代碼庫的優(yōu)化。另一方面，WebQuest和Webqa則專注于網(wǎng)頁的視覺理解，但往往只關(guān)注內(nèi)容層面的推理，而忽視了精細(xì)的感知能力，比如元素大小、位置和布局等，這些對于準(zhǔn)確的前端實(shí)現(xiàn)至關(guān)重要。

更重要的是，這些分散的評(píng)測方法通常完全忽略了開發(fā)過程中的初始"設(shè)計(jì)"階段，因此無法全面評(píng)估MLLM在端到端前端工程中的能力。就像評(píng)價(jià)一個(gè)廚師，我們不僅要看他能否按照菜譜烹飪，還要看他能否根據(jù)食材創(chuàng)造菜單，以及是否能準(zhǔn)確辨別食材的品質(zhì)。

FullFront基準(zhǔn)測試恰好填補(bǔ)了這一空白，它不是簡單地測試模型的單一能力，而是模擬了真實(shí)世界中前端工程師的完整工作流程，從設(shè)計(jì)概念的生成，到網(wǎng)頁元素的視覺理解，再到功能代碼的實(shí)現(xiàn)。

二、FullFront：一個(gè)全面的前端工程評(píng)測基準(zhǔn)

FullFront基準(zhǔn)測試被精心設(shè)計(jì)為涵蓋三個(gè)核心任務(wù)，每個(gè)任務(wù)對應(yīng)前端開發(fā)流程中的一個(gè)關(guān)鍵階段：

**網(wǎng)頁設(shè)計(jì)（Webpage Design）**：這好比是廚師根據(jù)食材清單構(gòu)思一道菜肴。模型需要根據(jù)文本描述生成網(wǎng)頁設(shè)計(jì)圖像，測試其將抽象需求轉(zhuǎn)化為具體視覺布局的能力。FullFront包含50個(gè)網(wǎng)頁設(shè)計(jì)問題，讓模型展示它們的創(chuàng)意構(gòu)思能力。

**網(wǎng)頁感知問答（Webpage Perception QA）**：這類似于廚師識(shí)別各種食材的特性和質(zhì)量。這部分評(píng)估模型對網(wǎng)頁元素的位置、樣式、空間關(guān)系和整體布局的感知能力，通過三個(gè)子任務(wù)實(shí)現(xiàn)：真實(shí)世界QA（1250個(gè)問答對）、合成QA（400個(gè)問答對）和多窗口QA（150個(gè)問答對）。這些問題都是關(guān)于"這個(gè)按鈕比那個(gè)按鈕大嗎？"或"這個(gè)導(dǎo)航菜單的文字樣式如何？"等細(xì)節(jié)的多選題。

**網(wǎng)頁代碼生成（Webpage Code Generation）**：這就像廚師按照特定步驟將原料轉(zhuǎn)化為美味佳肴。這部分專注于將視覺設(shè)計(jì)準(zhǔn)確轉(zhuǎn)化為功能性代碼，包括四個(gè)子任務(wù)：圖像到代碼（200個(gè)樣本）、文本到代碼（50個(gè)樣本）、交互實(shí)現(xiàn)（100個(gè)樣本）和代碼優(yōu)化（50個(gè)樣本）。這些任務(wù)測試模型不僅能夠生成靜態(tài)網(wǎng)頁，還能實(shí)現(xiàn)交互功能并優(yōu)化現(xiàn)有代碼。

與其他基準(zhǔn)測試相比，F(xiàn)ullFront的一個(gè)重要?jiǎng)?chuàng)新是其數(shù)據(jù)構(gòu)建方法。傳統(tǒng)方法要么使用從Common Crawl等來源簡化的HTML（通常冗長且混亂），要么使用LLM從頭生成的HTML（往往過于簡化）。而FullFront采用了一種新穎的兩階段處理方法：

首先，從真實(shí)世界網(wǎng)頁截圖開始，使用OmniParser提取元素信息。 然后，GPT-4o生成初始HTML-v1，之后Claude 3.7 Sonnet進(jìn)一步優(yōu)化樣式、位置、對齊和布局，生成更高質(zhì)量、更復(fù)雜的HTML-v2。

這種方法的巧妙之處在于，它既保留了真實(shí)網(wǎng)頁的視覺多樣性，又避免了版權(quán)問題，同時(shí)生成了干凈、標(biāo)準(zhǔn)化的HTML代碼。這就像是保留了各種菜肴的獨(dú)特風(fēng)味，但用標(biāo)準(zhǔn)化的食譜記錄下來，便于不同廚師之間的比較。

在圖像處理方面，F(xiàn)ullFront不像其他基準(zhǔn)測試那樣使用單一占位圖或隨機(jī)圖像，而是采用了基于類別的圖像表示策略。研究團(tuán)隊(duì)將常見的圖像內(nèi)容分為15個(gè)預(yù)定義類別（如人物、動(dòng)物、食物等），每個(gè)類別鏈接到一個(gè)固定的非版權(quán)圖像URL。這確保了視覺一致性，同時(shí)也測試了模型對圖像內(nèi)容的感知、分類和樣式設(shè)置能力。

三、評(píng)測方法：如何衡量前端工程能力？

要全面評(píng)估模型在前端工程中的表現(xiàn)，研究團(tuán)隊(duì)設(shè)計(jì)了多層次的評(píng)估框架，就像評(píng)價(jià)一道菜肴需要考慮其外觀、口感、香氣和創(chuàng)意等多個(gè)維度一樣。

**視覺層面評(píng)估**：研究團(tuán)隊(duì)使用兩種方法評(píng)估生成內(nèi)容的視覺相似度：

1. CLIP得分：這就像快速判斷兩道菜肴的整體相似度。它通過嵌入空間相似性衡量生成內(nèi)容與目標(biāo)圖像之間的高級(jí)概念一致性。

2. Gemini視覺評(píng)分：這更像是專業(yè)廚師的細(xì)致評(píng)價(jià)。使用Gemini 2.5 Flash模型，從十個(gè)維度（如元素復(fù)現(xiàn)、比例和大小一致性、布局和排版保真度等）對生成的網(wǎng)頁進(jìn)行評(píng)分，每個(gè)維度0-10分，分?jǐn)?shù)越高表示與原始設(shè)計(jì)越相似。

**代碼層面評(píng)估**：研究團(tuán)隊(duì)提出了"代碼評(píng)分"（Code Score）來評(píng)估生成的HTML與參考HTML的相似度：

1. 首先，將HTML解析為DOM樹并提取關(guān)聯(lián)的CSS。 2. 然后，評(píng)估結(jié)構(gòu)相似性，通過DOM標(biāo)簽序列的最長公共子序列（LCS）比率來量化。 3. 同時(shí)，評(píng)估文本、圖像和表單的內(nèi)容類型相似性，識(shí)別對應(yīng)元素并根據(jù)內(nèi)容（如文本通過SequenceMatcher）、關(guān)鍵樣式屬性（如顏色、字體大小、圖像尺寸）和關(guān)鍵屬性（如圖像src、表單元素類型）進(jìn)行比較。 4. 針對每種內(nèi)容類型，計(jì)算實(shí)現(xiàn)率（反映參考元素在生成代碼中的覆蓋比例），用于調(diào)整相似度分?jǐn)?shù)，以捕捉質(zhì)量和完整性。 5. 最終的代碼評(píng)分通過預(yù)定義權(quán)重組合結(jié)構(gòu)和調(diào)整后的內(nèi)容類型相似性。

這種多維度評(píng)估方法確保了評(píng)測結(jié)果的全面性和準(zhǔn)確性，就像評(píng)價(jià)一位廚師不僅要看最終的菜肴，還要考察其烹飪技巧、食材選擇和創(chuàng)新能力。

四、實(shí)驗(yàn)設(shè)置：模型陣容與測試環(huán)境

為了全面評(píng)估當(dāng)前最先進(jìn)的MLLMs在前端工程領(lǐng)域的能力，研究團(tuán)隊(duì)選擇了十個(gè)代表性模型進(jìn)行測試：

**開源模型**：包括Qwen2.5-VL-72B-Instruct、InternVL2.5-78B、InternVL3-78B和LLaVA-Onevision-72B。這些模型代表了開源社區(qū)的最新進(jìn)展。

**專有模型**：包括Claude 3.7 Sonnet、Gemini 2.5 Flash、GPT-4o、o4-mini、GPT-4.1以及o1和Gemini 2.5 Pro（僅在FullFront-mini上測試）。這些是當(dāng)前業(yè)界領(lǐng)先的商業(yè)模型。

對于專門針對圖像生成的網(wǎng)頁設(shè)計(jì)任務(wù)，研究團(tuán)隊(duì)測試了GPT-4o和gemini-2.0-flash-exp-image-generation兩個(gè)模型的能力。

為了便于研究者進(jìn)行快速迭代評(píng)估和初步探索，研究團(tuán)隊(duì)還構(gòu)建了FullFront-mini數(shù)據(jù)集，這是完整FullFront數(shù)據(jù)集的精簡版本，包含200個(gè)真實(shí)世界QA、100個(gè)合成QA、50個(gè)多窗口QA、20個(gè)圖像到代碼、10個(gè)文本到代碼、20個(gè)交互創(chuàng)作和10個(gè)代碼優(yōu)化樣本。

五、實(shí)驗(yàn)結(jié)果：模型在前端工程中的表現(xiàn)如何？

就像不同廚師在烹飪比賽中展現(xiàn)各自的強(qiáng)項(xiàng)和弱點(diǎn)一樣，不同的MLLMs在FullFront的三個(gè)主要任務(wù)上表現(xiàn)各異。

**網(wǎng)頁設(shè)計(jì)任務(wù)**：在這項(xiàng)任務(wù)中，當(dāng)前的文本到圖像生成MLLMs展現(xiàn)出了生成網(wǎng)頁布局概念的基礎(chǔ)能力，但在生成高保真度的設(shè)計(jì)方面仍面臨困難。GPT-4o在Gemini評(píng)分（5.47）和人類評(píng)分（6.96）上都優(yōu)于gemini-2.0-flash-exp-image-generation。質(zhì)性分析顯示，GPT-4o在渲染整體頁面結(jié)構(gòu)、排版和元素實(shí)現(xiàn)保真度方面表現(xiàn)更好。不過，即使是表現(xiàn)最好的模型，在精確細(xì)節(jié)（如頁腳部分的背景顏色）方面仍有不足。

**網(wǎng)頁感知問答**：這個(gè)任務(wù)的結(jié)果令人意外。即使是表現(xiàn)最好的模型，如Claude 3.7 Sonnet和Gemini 2.5 Pro，在三個(gè)子任務(wù)上的平均準(zhǔn)確率也僅略高于50%。相比之下，LLaVA-OneVision-72B的準(zhǔn)確率在所有QA子任務(wù)上都低于35%。更令人擔(dān)憂的是，所有模型的表現(xiàn)都遠(yuǎn)遠(yuǎn)落后于人類專家，后者在三個(gè)子任務(wù)上的準(zhǔn)確率分別為97%、96%和94%。這表明當(dāng)前的MLLMs在精細(xì)化網(wǎng)頁元素感知方面存在嚴(yán)重不足。

進(jìn)一步分析顯示，MLLMs在準(zhǔn)確理解元素對齊（21.5%）、大?。?9.5%）、間距（15.5%）和精確定位（18.5%）方面面臨著特別的困難。這些因素構(gòu)成了感知失敗的核心原因。例如，所有模型都無法正確識(shí)別標(biāo)簽"Human Rights Advocates"相對于主標(biāo)題和副標(biāo)題的位置，或者無法正確比較兩個(gè)"LEARN MORE"按鈕的大小。

有趣的是，研究發(fā)現(xiàn)模型在單頁真實(shí)世界QA和合成QA上的表現(xiàn)幾乎相同，但在更復(fù)雜的多窗口QA上表現(xiàn)顯著下降。這表明隨著任務(wù)復(fù)雜性的增加，模型的感知能力面臨更大挑戰(zhàn)。

**網(wǎng)頁代碼生成**：在這個(gè)任務(wù)中，閉源模型顯著優(yōu)于開源模型，在所有子任務(wù)和指標(biāo)上都領(lǐng)先。Claude 3.7 Sonnet始終表現(xiàn)最佳，緊隨其后的是其他專有模型如Gemini 2.5 Pro、Gemini 2.5 Flash和GPT-4.1。例如，在FullFront-mini的代碼優(yōu)化任務(wù)中，Gemini 2.5 Pro獲得了9.17的Gemini視覺評(píng)分，表明在大多數(shù)情況下幾乎完美的視覺復(fù)制，而表現(xiàn)最好的開源模型InternVL3-78B在相同設(shè)置下僅得到6.25分。

子任務(wù)分析顯示了明顯的模式：提供部分HTML（代碼優(yōu)化任務(wù)）比僅提供圖像輸入（圖像到代碼任務(wù)）能獲得更好的性能。然而，生成功能性交互代碼（交互實(shí)現(xiàn)任務(wù)）更具挑戰(zhàn)性，盡管目標(biāo)HTML-v1更簡單，但得分更低。這一困難在交互實(shí)現(xiàn)率（表5）中得到了進(jìn)一步證實(shí)，閉源模型的成功率超過65%，遠(yuǎn)高于開源模型如LLaVA-Onevision-72B（僅16%）。文本到代碼任務(wù)，需要根據(jù)文本描述自主設(shè)計(jì)，證明是最困難的，導(dǎo)致整體模型性能最低。

人類評(píng)估（表4）進(jìn)一步證實(shí)，閉源模型如Claude 3.7 Sonnet和Gemini 2.5 Pro被認(rèn)為更準(zhǔn)確，在復(fù)制質(zhì)量方面經(jīng)常得分超過8/10。雖然這些模型實(shí)現(xiàn)了高整體保真度，但詳細(xì)示例顯示，即使頂級(jí)表現(xiàn)者也可能在精細(xì)細(xì)節(jié)方面表現(xiàn)出輕微缺陷。

六、深入分析：MLLMs在前端工程中的挑戰(zhàn)與局限

通過分析200個(gè)所有MLLMs（除o1和Gemini 2.5 Pro外）都無法正確回答的問題，研究團(tuán)隊(duì)發(fā)現(xiàn)了當(dāng)前MLLMs在網(wǎng)頁感知方面面臨的主要困難。如前所述，MLLMs在準(zhǔn)確理解元素對齊（21.5%）、大小（19.5%）、間距（15.5%）和精確定位（18.5%）方面存在特別的難題。

**感知能力與代碼表現(xiàn)之間的關(guān)系**：一個(gè)反直覺的發(fā)現(xiàn)是，在感知任務(wù)中表現(xiàn)出色的模型并不一定在代碼生成中表現(xiàn)同樣出色，盡管它們能夠更詳細(xì)地理解頁面。誠然，一些模型如Claude 3.7 Sonnet和Gemini 2.5 Pro在兩類任務(wù)中都表現(xiàn)強(qiáng)勁。然而，InternVL3-78B雖然在感知QA中超過了Gemini 2.5 Flash，但在代碼生成能力上卻存在明顯差距。InternVL2.5-78B和GPT-4o之間也觀察到了類似的模式。

研究團(tuán)隊(duì)試圖分析這一現(xiàn)象的潛在原因。如圖4(b)所示，在感知QA階段，所有測試的模型都錯(cuò)誤地識(shí)別了"Human Rights Advocate"標(biāo)簽相對于標(biāo)題的位置。然而，在分析它們生成的頁面時(shí)，所有模型都正確地將標(biāo)簽直接放在標(biāo)題上方。這一觀察表明，即使模型在精細(xì)感知上存在錯(cuò)誤，它們?nèi)匀豢梢陨梢曈X協(xié)調(diào)和結(jié)構(gòu)合理的網(wǎng)頁。這表明用于QA中的視覺感知和將視覺概念轉(zhuǎn)換為代碼的過程可能在MLLMs內(nèi)部以不同的敏感度運(yùn)作，或依賴于不同的內(nèi)部表示和生成策略。

**MLLMs能否成為出色的前端工程師？**：為了確定MLLM生成的網(wǎng)頁是否優(yōu)于真實(shí)世界版本，三名人類專家對各種MLLMs（除o1和Gemini 2.5 Pro外）生成的100個(gè)網(wǎng)頁與其真實(shí)世界對應(yīng)物進(jìn)行了盲評(píng)。結(jié)果顯示，領(lǐng)先模型（如o4-mini、Gemini 2.5 Flash）在絕大多數(shù)情況下優(yōu)于真實(shí)世界對應(yīng)物。

然而，對生成網(wǎng)頁的進(jìn)一步分析揭示了MLLMs可能出現(xiàn)的三種常見錯(cuò)誤類型：異常圖像大?。ㄆ茐牟季滞暾缘漠惓４髨D像）、空白圖像（盡管代碼非空但完全空白的截圖）和隔離錯(cuò)誤（僅包含隔離交互元素的輸出）。每種錯(cuò)誤類型都會(huì)顯著降低生成網(wǎng)頁的有效性。表6顯示，開源模型比閉源模型更頻繁地表現(xiàn)出這些錯(cuò)誤，這大大降低了它們的可靠性和穩(wěn)定性。

此外，對代碼級(jí)性能的詳細(xì)檢查（表7）表明，當(dāng)前MLLMs在文本和表單實(shí)現(xiàn)方面仍有很大的改進(jìn)空間，這些組件的相似度分?jǐn)?shù)不超過0.6。

總體而言，盡管在精細(xì)細(xì)節(jié)方面存在某些缺陷，MLLMs確實(shí)展示了從文本描述設(shè)計(jì)一般連貫的網(wǎng)頁界面的能力，并能從網(wǎng)頁截圖生成相應(yīng)的代碼。然而，它們在感知能力上的總體不足，加上代碼生成過程中潛在的關(guān)鍵錯(cuò)誤，使得它們當(dāng)前的可靠性和穩(wěn)定性不確定。研究團(tuán)隊(duì)認(rèn)為，一個(gè)有前途的未來方向是將MLLMs與專門工具集成，以彌補(bǔ)它們的感知限制，并提供機(jī)制來識(shí)別和糾正生成異常，從而幫助MLLMs發(fā)展成為優(yōu)秀的前端工程師。

七、總結(jié)與展望：前端工程的智能化未來

FullFront作為一個(gè)開創(chuàng)性且全面的多模態(tài)前端基準(zhǔn)測試，為系統(tǒng)評(píng)估MLLMs在完整前端開發(fā)流程中的能力鋪平了道路。通過構(gòu)建高質(zhì)量、多樣化的合成數(shù)據(jù)和設(shè)計(jì)多層次評(píng)估系統(tǒng)，F(xiàn)ullFront成為分析當(dāng)前MLLMs優(yōu)勢和局限性的強(qiáng)大工具，特別是揭示了MLLMs在處理復(fù)雜前端細(xì)節(jié)（如圖像大小和交互實(shí)現(xiàn)）以及準(zhǔn)確感知網(wǎng)頁元素方面面臨的挑戰(zhàn)。

雖然FullFront像任何基準(zhǔn)測試一樣存在一定局限性，但它為評(píng)估MLLMs在前端工程領(lǐng)域的能力設(shè)定了新標(biāo)準(zhǔn)，為下一代智能網(wǎng)頁開發(fā)工具的發(fā)展奠定了基礎(chǔ)。未來的工作可以通過引入更先進(jìn)的評(píng)估指標(biāo)、擴(kuò)大數(shù)據(jù)集規(guī)?；蛱剿餍碌娜蝿?wù)類型來改進(jìn)FullFront。

總的來說，這項(xiàng)研究表明，雖然當(dāng)前的MLLMs在前端開發(fā)的某些方面表現(xiàn)出色，但要成為真正的"前端工程師"還有很長的路要走。它們在精細(xì)感知、復(fù)雜布局處理和交互實(shí)現(xiàn)方面的局限性表明，人類專業(yè)知識(shí)在可預(yù)見的未來仍將不可或缺。然而，隨著技術(shù)的不斷進(jìn)步，我們可以期待MLLMs在前端開發(fā)中扮演越來越重要的角色，最終可能作為人類開發(fā)者的強(qiáng)大助手或協(xié)作伙伴，而不是完全替代者。

對于普通用戶和開發(fā)者來說，這項(xiàng)研究的意義在于：它不僅展示了AI在前端開發(fā)中的潛力，也明確了當(dāng)前技術(shù)的局限性。這有助于我們對AI輔助開發(fā)工具形成更現(xiàn)實(shí)的期望，并指導(dǎo)未來工具的開發(fā)方向，使其更好地滿足實(shí)際需求。隨著這些技術(shù)的成熟，我們可以期待更智能、更高效的前端開發(fā)體驗(yàn)，但同時(shí)也應(yīng)認(rèn)識(shí)到人類創(chuàng)造力和專業(yè)知識(shí)在設(shè)計(jì)和實(shí)現(xiàn)高質(zhì)量用戶界面方面的持續(xù)價(jià)值。