一段話，20秒，AI直接生成2版UI設(shè)計稿！

十三 2024-09-20 11:54:30 來源：量子位

用戶只需要輸入一段話，20秒左右，就能生成兩版UI設(shè)計稿……9月20日，在云棲大會現(xiàn)場，Motiff妙多研發(fā)負(fù)責(zé)人樊鍇演講分享了AI生成UI功能的最新進展及開發(fā)歷程，強調(diào)盡快找到TPF（技術(shù)產(chǎn)品契合度）、重視數(shù)據(jù)積累、完善后臺開發(fā)體系，都是AI功能落地的關(guān)鍵因素。

Motiff妙多研發(fā)負(fù)責(zé)人樊鍇演講現(xiàn)場

生成式AI是2024年云棲大會最受關(guān)注的議題之一，Motiff妙多AI生成UI功能的落地，標(biāo)志著設(shè)計工具從效率工具向生產(chǎn)力工具的轉(zhuǎn)變?！拔覀兿Ｍ?Motiff妙多不止于設(shè)計領(lǐng)域的 Copilot， 更能成為 Autopilot，能直接完成日常設(shè)計任務(wù)，甚至生成完整的設(shè)計稿?！狈|表示。

Motiff妙多于今年6月面向全球發(fā)布，開創(chuàng)了界面設(shè)計領(lǐng)域的多個AI功能。開發(fā)全球領(lǐng)先的AI功能面臨諸多技術(shù)挑戰(zhàn)：如何讓AI成為真正可用的生產(chǎn)力、創(chuàng)作兼具邏輯性和藝術(shù)性的UI設(shè)計稿？大模型的能力邊界在哪、如何揚長避短？樊鍇在演講中詳細(xì)分享了背后的工程難點和經(jīng)驗。

Motiff妙多能生成用戶所需的各式各樣的界面，生成的設(shè)計稿還可在Motiff妙多的編輯器中不斷調(diào)整優(yōu)化。

鎖定應(yīng)用場景，加速達(dá)成技術(shù)產(chǎn)品契合度

在AIGC領(lǐng)域，不同于常見的文本生成或圖片生成任務(wù)，UI 生成非常獨特。這是因為UI設(shè)計既需要保證嚴(yán)謹(jǐn)?shù)漠a(chǎn)品邏輯，又要具備像素級的精確程度，還要兼具美觀的視覺效果。這對技術(shù)能力提出了相當(dāng)高的要求。

AI生成UI可由AI從零開始創(chuàng)建所有頁面內(nèi)容，這背后有多種技術(shù)路徑，但生成效果均不理想。樊鍇舉例稱，基于擴散模型的文生圖技術(shù)可以生成設(shè)計圖片，但在像素級別的布局控制和內(nèi)容生成能力上相對欠缺。另一些方法，如生成HTML網(wǎng)頁代碼再轉(zhuǎn)為設(shè)計稿，同樣面臨細(xì)節(jié)處理能力不足的問題。

對于AI應(yīng)用來說，盡快找到TPF（技術(shù)產(chǎn)品契合度）尤為關(guān)鍵。“相比于傳統(tǒng)軟件開發(fā)，AI應(yīng)用的底層技術(shù)不確定性高，戰(zhàn)略上用戶需求驅(qū)動，但在戰(zhàn)術(shù)上產(chǎn)品設(shè)計嚴(yán)重依賴于技術(shù)可行性?！狈|在會上表示，關(guān)鍵在于盡快找到最有可能被實際使用的場景，更早得到用戶反饋。

生成一張設(shè)計稿，需要兼顧整體結(jié)構(gòu)、頁面內(nèi)容和UI細(xì)節(jié)三大方面。設(shè)計稿需要包含導(dǎo)航欄、搜索框、內(nèi)容列表等模塊，并匹配合適的文字、圖片、圖標(biāo)等內(nèi)容，同時呈現(xiàn)良好的視覺效果。通用大模型普遍擅長生成整體結(jié)構(gòu)和頁面內(nèi)容，但對于 UI 細(xì)節(jié)控制還有所不足。

因此，為大模型尋找合適的任務(wù)成為解決問題的關(guān)鍵?！白尨竽Ｐ蛯Ｗ⒂谄渖瞄L的領(lǐng)域，即生成頁面的整體結(jié)構(gòu)和內(nèi)容。在細(xì)節(jié)把控上，通過預(yù)定義的組件庫來保證美觀?！狈|表示。組件庫是大量組件和設(shè)計規(guī)范的集合，基于組件庫的生成方案也更容易支持自定義組件。這不僅能夠覆蓋大部分UI設(shè)計場景，還能滿足用戶對個性化和靈活性的需求。

這也是面向未來的技術(shù)方案?！半S著軟件開發(fā)的成本降低，未來應(yīng)用場景會更個性化，也需要更靈活的交互設(shè)計，信息龐雜的交互設(shè)計頁面反而會減少?！狈|判斷。

筑成數(shù)據(jù)護城河，率先實現(xiàn)設(shè)計Autopilot

即使是基于組件庫的方案，現(xiàn)有通用大模型仍難以生成高質(zhì)量的UI設(shè)計稿。這是因為通用大模型并不擅長UI設(shè)計，也難以理解組件庫。為了呈現(xiàn)多樣化的效果，組件庫包含大量不同類型的組件。以列表為例，就有上百種相似的樣式，通用大模型難以分辨其細(xì)微差別。

“核心還是在于讓大模型充分理解UI設(shè)計，需要有專門的領(lǐng)域大模型?！胺|表示。Motiff妙多近期正式發(fā)布了其自研的國內(nèi)首個UI多模態(tài)大模型，經(jīng)過大量UI領(lǐng)域的優(yōu)質(zhì)數(shù)據(jù)訓(xùn)練，該模型在多個UI任務(wù)表現(xiàn)上顯著超越GPT-4o等通用大模型，能靈活地根據(jù)上下文理解界面元素，達(dá)到“設(shè)計專家”水平，最接近人類對UI界面的理解和表述結(jié)果。

在自研大模型加持下，Motiff妙多有效結(jié)合了自研大模型的生成能力和組件庫的表現(xiàn)力，在多輪行業(yè)盲評中取得了第一的生成效果，優(yōu)于此前業(yè)內(nèi)領(lǐng)先的AI生成UI工具Galileo AI、設(shè)計工具Uizard和文生圖工具Ideogram。

Motiff在AI生成UI功能中取得的成功，還得益于長期的專業(yè)數(shù)據(jù)積累。“未來，數(shù)據(jù)是最重要的護城河?！胺|表示，“隨著大模型能力不斷增強、成本不斷降低，專業(yè)數(shù)據(jù)將成為更稀缺的資源，為AI應(yīng)用的質(zhì)量提供堅實保障?！?/p>

在開發(fā)AI功能的工程實施中，Motiff妙多積累了寶貴的經(jīng)驗。對于大部分復(fù)雜任務(wù)，Motiff妙多發(fā)現(xiàn)Flow Engineering（流程工程）比Prompt Engineering（提示工程）更為有效。相比于單次模型調(diào)用的黑箱運行，F(xiàn)Low Engineering將任務(wù)分解為多個步驟，實現(xiàn)整體功能的協(xié)同，對團隊協(xié)作和工程化更為友好。

為了更好地應(yīng)對AI應(yīng)用開發(fā)中的不確定性，Motiff妙多搭建了一個高效的實驗平臺。平臺不僅支持便捷地定制流程和參數(shù)，還能詳細(xì)記錄實驗的中間結(jié)果，從而幫助團隊快速嘗試和迭代。

目前，Motiff妙多AI生成UI功能在指令遵循和設(shè)計美觀性上均處于行業(yè)領(lǐng)先水平，并在海外社交媒體引起大量討論。樊鍇在會上透露，Motiff妙多還將持續(xù)迭代技術(shù)方案，有望于年內(nèi)發(fā)布新的AI功能。