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