今天小編分享的科學經驗：10秒生成官網，WeaveFox重塑前端研發生產力，歡迎閱讀。
AI 入職大廠擔當程式員編程助手，如今已非新鮮事。
不過，随着實踐的深入，新的問題正在出現：AI 生成代碼需要大量翻修、安全生產難以保障……
" 如果不能找到一個合适的切入點，可能會适得其反——用 AI 不如不用 AI。"
作為技術變革的一線親歷者，螞蟻集團平台智能體驗技術負責人徐達峰如是坦言。
聚焦前端開發場景，徐達峰和他的團隊打造了 WeaveFox 智能研發體系進行 AI 編碼。主要有圖生代碼、意圖生碼和 AI 質檢系統三大突破方向，讓 AI 能根據用戶輸入的設計圖，或者工程上下文補充邏輯代碼，交付通過多模态技術檢查產物質量。
目前 WeaveFox 已在阿裡和螞蟻實際投產，據介紹在超 500 名前端工程師的參與下，目前在設計圖交付動線場景下，AI 已累計生成合并接近 100 萬行代碼；研發效率最高可提升 5 倍。
在第三屆中國 AIGC 產業峰會上，圍繞 "AI 賦能軟體研發周期 " 的話題，徐達峰帶來更多前端從業者、開發者的第一視角實踐與思考。為了完整體現徐達峰的分享，在不改變原意的基礎上，量子位對演講内容進行了編輯整理，希望能給你帶來更多啟發。
中國 AIGC 產業峰會是由量子位主辦的 AI 領網域前沿峰會，20 餘位產業代表與會讨論。線下參會觀眾超千人，線上直播觀眾 320 萬 +，累計曝光 2000 萬 +。
話題要點
AI 前端研發如果不能找到一個合适的切入點，可能會适得其反——用 AI 不如不用 AI。
AI 輔助編碼會帶來思維方式的轉變，從人產出代碼 AI 配合優化，過渡到 AI 生成代碼再人工進行檢查。
對面向開發者的產品來說，用戶同時是開發者，是構成新質生產力的重要部分。
（以下為徐達峰演講全文）
AI 前端研發需要合适的突破視角
大家下午好！很榮幸來到 AIGC 產業峰會，我叫徐達峰，來自螞蟻集團平台智能體驗技術團隊，目前正在主導前端智能研發系統 WeaveFox，同時我也是開源社區的深度參與者。
在 AI 技術高速發展的今天，AI 前端研發已然成為行業的共識，尤其在今年初以來，開源社區對技術的促進和推動，讓我們發現整個軟體研發生命周期裡面，有非常多的環節有很大的提效空間。
AI 如何深度賦能軟體研發周期呢？我會從自身作為前端從業者、開發者的第一視角給大家介紹螞蟻前端技術團隊的實踐及思考。
從前端視角來看，AI 研發落地上的困難包括很多方面。整體的實踐沒有一個固定的标準，在 AI 編碼方面有行級代碼生成、片斷級代碼生成、需求級代碼生成，還有另外一種範式是先完成單元測試的編寫再反推實現。
這樣就帶來多個瓶頸。首先，AI 生成的大部分代碼可能 50% 以上都需要後續二次修改或者大量翻修。
其次，在安全生產方面，我們在使用 AI 工具的時候很容易将企業數據和敏感信息發出去，甚至提交到海外，這給企業帶來了很大的風險，包括入侵風險。企業内部如何安全合規地使用 AI 能力進行 AI 生產，也是我們面臨的問題。
在現有軟體研發體系上，很多工具經歷十多年打磨，已經很方便、很成熟了，此時如果不能找到一個合适的切入點可能會适得其反——用 AI 不如不用 AI。
不是任何地方都需要智能化更新，我們需要找到一個可以突破的合适的視角。
另外，AI 研發也在平台和組織層面上帶來了衝擊和思維方式的轉變。從以往更多是人來產出代碼、AI 配合優化，慢慢過渡到 AI 生成代碼、人工來檢查，這對現有人員的經驗或者思維方式衝擊還是很大的。
我們主要從以下三個方面突破這些瓶頸：
圖生代碼，通過圖片直接生成生產級代碼；
意圖生碼，通過意圖生成骨架代碼，或根據工程上下文生成邏輯代碼；
AI 質檢，通過多模态能力對產出檢查并自動完善，幫助提升交付品質。
圖生代碼
圖生代碼解決的核心問題主要分為以下幾個方面。
第一，其最大的優勢在于簡化了流程，不再依賴上遊的各種工具，不管是 Figma、Sketch 還是其他工具，直接将圖片像素輸入給多模态模型，它就可以理解并生成源代碼，并且一定要一次成型。其好處在于減少了中間的人工幹預，一次成形意味着自動化，自動化意味着可以規模化地使用，在產業的落地中具備了可行性。
其次，在端側研發過程中還有一個比較關鍵的技術項，那就是跨端。在現今的產業中，很多產品端是多端的，用在車機系統、手機、PC 上，可能形式是小程式或者移動端網頁等，這麼多端如果每一套都做 AI 化的模型，成本非常高昂而且不便于復用，能否用一個模型解決所有端側問題呢，讓跨技術棧成為可以復用甚至可以一鍵切換的可能性？用戶直接輸入一個圖片，通過模型推理在十幾秒就生成整體代碼，最終交付到代碼倉庫中。
完成這樣的能力需要用到 GUI 的領網域多模态模型，生產這樣模型并不容易，我們做了以下幾方面工作。
基座模型與數據
首先是強化了基座模型。
我們基于螞蟻多模态基座模型對整個細粒度調節做了高強度強化，針對細顆度的 Query Token 疊加位置編碼。這樣的特性其實對 grounding（基礎訓練）的任務有很大好處，生成在布局、準确度、精準度上會有很大優勢。
第二是在深度融合和預訓練階段使用海量數據，以提升大模型本身對于 GUI 風格的敏感度。
第三方面涉及其他高分辨率的編碼器，例如具備 2K 分辨率的數據視窗。對于一些常規的頁面區網域或界面，此類編碼器能夠輕松應對。
數據處理方面，涵蓋數據采集、标注以及精篩等環節，面臨的挑戰較大。
以往在訓練視覺小模型時，使用數千至上萬個樣本往往就能取得不錯的效果。然而，如今訓練大模型則需要動辄數百萬的數據樣本，這使得樣本精篩和問題查找工作面臨巨大挑戰。例如，要從數百萬數據中找出錯誤樣本，可能需要訓練專業的專家模型。為此，我們對整體的訓練模型工具鏈進行了大幅更新，付出了諸多心血和努力。
訓練與評測
接下來進入訓練階段，此階段包括樣本預處理以及二百萬級别的後訓練，并進行了相應的調試工作。
評測部分從兩個維度展開。
其一為白盒的多維評測，我們每周都會對版本模型進行迭代。為了評估這些版本模型在各個維度上是得到了優化還是出現了劣化，我們設定了多個評測維度，如組件布局、顏色準确性等。
其二是存圖的泛化評測，主要用于評估大模型上一個版本的產出準确性和相似度。
UI IR 标準
說到訓練工作，不得不提到我們确立的 IR（Intermediate Representation ) ）标準，作為模型訓練備數和跨端消費的統一标準，完備描述 GUI 世界。目前，我們已支持 60+ GUI 語義單元的數據定義，能夠涵蓋行業流行标準和現代作業系統，基本涵蓋了行業的流行的視覺組件包括流行的框架庫，并适配現有的作業系統。
作為模型訓練以及後續消費的統一标準，我們去年添加了 17 個視覺可視化相關的标準，IR 标準讓整體跨端的實現成為了可能性。不僅能夠生成如 Vue 等各種框架庫，甚至可以後續生成鴻蒙、安卓界面類的代碼。這些技術棧的操作和切換只需要一鍵操作。
我們還開展了模型上下文的擴展與增強工作，包括對細節方面的處理。以顏色（如背景色、按鈕背景色）為例，原本呈現為列表形式，存在組件混淆的問題。通過工程校準，我們基本實現了高度還原的效果。
這在圖生代碼的演示中得到了體現，直接輸入官網圖片即可生成代碼，生成的代碼質量與人工編寫的代碼相近，能夠滿足測試标準。
我們采用了這樣的測試方法：将同一份代碼展示給測試人員，讓他們判斷代碼是通過輔助工具編寫還是一次性自動生成。若大部分人難以分辨，則認為該代碼達到了标準。
接下來大家可以看一下我們 " 圖生代碼 " 的演示。僅需 10 秒，我們就用 WeaveFox 輕松生成了 Claude 的官網。
接下來給大家介紹一下 " 交付設計圖即交付代碼 "。
在企業内部實踐中，涉及眾多業務線和產品線，會產生大量的設計圖和設計稿。我們在設計稿平台上直接集成了相關能力，當上遊生成設計資產後，可直接通過模型推理生成代碼，下遊工程師能夠直接獲取這些資產、代碼片段甚至完整代碼進行生產。這種模式有效降低了中間環節的成本，提高了效率。
在圖生代碼方面，我們還将自身模型與行業内的優秀模型，如 Claude-3.7-Sonnet、GPT-4o、Qwen2.5-VL 進行了對比。在列表、卡片布局、圖片處理以及眾多資源處理（包括 SVG）方面，我們的模型展現出了顯著優勢。由于大模型對 SVG 不夠敏感，我們針對這些方面進行了大量的細節優化。未來，我們将持續與行業内的 SOTA 模型進行參照和對比，不斷提升自身能力。
意圖生碼
意圖生碼，主要是通過意圖來生成骨架代碼。
然而，在實際的產業生產中，對話式編程這種模式較難落地，難以實現标準化和工業化。在實際需求中，企業通常不會要求技術團隊開發類似坦克大戰這樣的演示項目，更多的是希望完成特定 APP 功能的開發。
針對意圖生碼，我們進行了 L3 級别的產品封裝，推出了意圖生碼智能體。該智能體旨在将研發場景的效率優勢進行固化。例如，在多語言處理方面，對于已有代碼上下文如何進行覆蓋單側處理，以及用戶埋點行為相關代碼等復雜工作，智能體能夠借助 AI 技術一次性完成。
當然，僅有這些能力還不夠。為了将企業内部工程師轉化為新質生產力，讓每位工程師都能成為能力的貢獻者，我們需要解決内部開放和接入的問題。為此，我們将開放面向工具的多種接入方式，包括 API、WebUI 以及 IDE 插件等，同時兼容标準化大模型通用的 MCP 協定标準。
對面向開發者的產品來說，用戶同時是開發者，是構成新質生產力的重要部分。
AI 質檢
在突破發展瓶頸方面，我們引入了 AI 質檢技術。
該技術充分復用了前文提及的多模态能力，旨在分析產品交付前原始需求與最終交付成果之間的差異，并通過 AI 分析和再次生成修復代碼，以此提升交付環節的品質。
目前，這一技術的實踐和落地情況如下：我們耗時四個多月的工作日，邀請了 500 多位前端工程師，生成了一百萬行代碼。
去年年底，我們進行了科學論證。行業中一直流傳着 "10 倍速工程師 " 的說法，為了驗證其 " 真實性 "，我們邀請了幾十位同學并将他們抽成 AB 兩組，其中一組使用智能研發動線和智能研發工具。最終的驗證結果顯示，工作效率大約有 2.7 倍的提升；在復雜場景下，效率提升可達 5 倍。
雖然目前尚未達到 10 倍速，但這仍是我們努力的方向和目标。此外，我們還致力于為行業體系内已有的搭建平台工具提供賦能和接入支持。
開放計劃
最後介紹一下 WeaveFox 開放計劃，我們目前有公有 SaaS 版在測試中，會逐步擴大公測名單。下一步計劃是通過螞蟻開源社區進行開源，像大家使用 Ollama 一樣，讓每個人可以本地擁有這樣的服務，持續開放代碼生成器甚至模型訓練的工具鏈，同時包括各種豐富的上下遊工具生态。
在面向產業應用方面，可以通過一個形象的比喻來理解。首先是一體化交付模式，就像前面提及的圖生代碼智能體或意圖生碼智能體，它們借助 L3 級别能力能夠自動化完成任務。這類似于一體化壓鑄技術，直接完成某個大型部件的生產，之後無論是外觀設計還是内飾配置，都可以根據需求自由選擇。同樣，在技術層面，跨端技術棧的切換和選擇也能為用戶提供這樣的自主選擇權，而無需重新訓練模型。此外，在交付之前，具備 AI 檢查和自動質檢能力，以此确保交付成果的質量和效果。
在當前產業蓬勃發展的背景下，我們前端研發或者外部技術研發所構建的智慧工廠，或許就蘊含在這樣的模式之中。
以上就是我今天分享的内容。
一鍵三連「點贊」「轉發」「小心心」
歡迎在評論區留下你的想法！
— 完 —
點亮星标
科技前沿進展每日見
