WeaveFox是螞蟻團(tuán)隊(duì)推出的AI驅(qū)動(dòng)前端智能研發(fā)平臺(tái)，基于螞蟻?zhàn)匝械陌凫`多模態(tài)大模型，能直接根據(jù)設(shè)計(jì)圖生成前端源代碼。工具支持多種應(yīng)用類型，包括控制臺(tái)、移動(dòng)端H5、小程序等，且兼容多種技術(shù)棧，如React、Vue等。

WeaveFox是什么

WeaveFox是螞蟻團(tuán)隊(duì)推出的AI前端智能研發(fā)平臺(tái)，基于螞蟻?zhàn)匝械陌凫`多模態(tài)大模型，能直接根據(jù)設(shè)計(jì)圖生成前端源代碼。工具支持多種應(yīng)用類型，包括控制臺(tái)、移動(dòng)端H5、小程序等，兼容多種技術(shù)棧，如React、Vue等。WeaveFox能提升前端開發(fā)的效率和質(zhì)量，支持二次調(diào)整滿足個(gè)性化需求，追求設(shè)計(jì)稿的精確還原。目前 WeaveFox 在閉源開發(fā)中，預(yù)計(jì)明年正式開放，為前端開發(fā)者帶來(lái)性的開發(fā)體驗(yàn)。

WeaveFox的主要功能

• 設(shè)計(jì)圖轉(zhuǎn)代碼：根據(jù)設(shè)計(jì)圖直接生成前端源代碼，減少手動(dòng)編碼工作。
• 多端支持：支持控制臺(tái)、移動(dòng)端H5、小程序等多種應(yīng)用類型的開發(fā)。
• 多技術(shù)棧兼容：支持React、Vue、less、scss等多種前端技術(shù)棧。
• 二次調(diào)整：支持用戶對(duì)自動(dòng)生成的代碼進(jìn)行調(diào)整和優(yōu)化，滿足更具體的需求。
• 高準(zhǔn)確度還原：追求設(shè)計(jì)稿的一比一還原，確保設(shè)計(jì)意圖得到準(zhǔn)確實(shí)現(xiàn)。

WeaveFox開發(fā)演示

• 切割圖片，生成代碼：把圖片切成幾塊，挑選出想要生成代碼的部分，點(diǎn)擊“生成代碼”按鈕。

• 選擇技術(shù)棧和框架：選擇喜歡的技術(shù)棧和框架，比如：React + AntD ，WeaveFox根據(jù)選擇的技術(shù)架構(gòu)生成代碼。

• 確認(rèn)生成：點(diǎn)擊“OK”，系統(tǒng)開始生成。

• 效果預(yù)覽：預(yù)覽生成效果和代碼。

WeaveFox的技術(shù)原理

• UI智能優(yōu)化：基于螞蟻集團(tuán)自研百靈多模態(tài)模型構(gòu)建的前端領(lǐng)域大模型，具備細(xì)粒度UI理解能力，能提供精準(zhǔn)的代碼生成和優(yōu)化服務(wù)。

• 智能切分：輸入設(shè)計(jì)圖，前端領(lǐng)域大模型會(huì)進(jìn)行整稿 / 局部塊推理的自動(dòng)切分識(shí)別，得到頁(yè)面語(yǔ)法結(jié)構(gòu)。

• 完備定義：建立的頁(yè)面語(yǔ)法結(jié)構(gòu)標(biāo)準(zhǔn)對(duì) UI 信息原子組件定義本身也是合理完備的。

• 智能代碼生成：基于頁(yè)面語(yǔ)法結(jié)構(gòu)的布局樹作為上下文配合模型矩陣完成高可讀性和可維護(hù)性的業(yè)務(wù)代碼生成。

如何使用WeaveFox

• 目前 WeaveFox 在閉源開發(fā)中，預(yù)計(jì)明年正式開放。

WeaveFox的應(yīng)用場(chǎng)景

• 快速原型開發(fā)：設(shè)計(jì)師或開發(fā)者將設(shè)計(jì)原型快速轉(zhuǎn)換為可工作的前端代碼，加速產(chǎn)品開發(fā)流程。
• 中后臺(tái)頁(yè)面開發(fā)：自動(dòng)生成中后臺(tái)管理界面的代碼，提高開發(fā)效率，減少重復(fù)勞動(dòng)。
• 移動(dòng)端界面開發(fā)：為移動(dòng)端應(yīng)用（如H5頁(yè)面、小程序等）生成前端代碼，支持移動(dòng)優(yōu)先的開發(fā)策略。
• 跨平臺(tái)應(yīng)用開發(fā)：生成的代碼適配多種平臺(tái)和設(shè)備，簡(jiǎn)化跨平臺(tái)開發(fā)工作。
• 代碼重構(gòu)與優(yōu)化：對(duì)現(xiàn)有項(xiàng)目進(jìn)行代碼重構(gòu)時(shí)，幫助自動(dòng)生成或優(yōu)化代碼，提高代碼質(zhì)量和維護(hù)性。