探索設(shè)計(jì)稿自動(dòng)生成Flutter代碼的技術(shù)方案

作者：京東物流 冷先鋒

近年來，隨著人工智能和大模型技術(shù)的發(fā)展，設(shè)計(jì)稿（UI視圖）自動(dòng)生成代碼的技術(shù)也在不斷進(jìn)步。本文將探討幾家知名企業(yè)在這一領(lǐng)域的探索和實(shí)踐，包括美團(tuán)、京東、微軟等，以及一些常見的工具和方法，最后嘗試大模型生成flutter代碼在項(xiàng)目中的實(shí)踐。

一、美團(tuán)的探索

美團(tuán)在2021年3月25日發(fā)表了一篇關(guān)于設(shè)計(jì)稿自動(dòng)生成代碼的文章，探討了sketch2json和imgCook兩種技術(shù)方案。sketch2json通過解析Sketch源文件中的圖層信息，轉(zhuǎn)化成DSL并生成代碼，而imgCook則基于AI技術(shù)來實(shí)現(xiàn)這一過程。盡管當(dāng)時(shí)大模型技術(shù)尚未成熟，sketch2json的生成算法較為簡(jiǎn)單粗暴，復(fù)雜層布局的準(zhǔn)確率較低且可解釋性不高，難以持續(xù)優(yōu)化。

原文：設(shè)計(jì)稿（UI視圖）自動(dòng)生成代碼方案的探索?

二、咸魚的UI2CODE的設(shè)計(jì)思路：

咸魚將整個(gè)工程結(jié)構(gòu)分為五個(gè)部分，其中四塊內(nèi)容核心處理機(jī)器視覺的問題，通過機(jī)器學(xué)習(xí)將它們鏈接起來。代碼的線上發(fā)布是非常嚴(yán)格的事情，而機(jī)器學(xué)習(xí)屬于概率學(xué)解法，很難達(dá)到我們要求的精度，所以我們選擇以機(jī)器視覺理解為主，機(jī)器學(xué)習(xí)為輔的方式，構(gòu)建整個(gè)UI2CODE工程體系。

原文： UI2CODE智能生成Flutter代碼——整體設(shè)計(jì)篇?

三、微軟的Sketch2Code

微軟也曾推出過一個(gè)類似的項(xiàng)目，名為Sketch2Code。這個(gè)項(xiàng)目的目標(biāo)是通過識(shí)別草圖生成網(wǎng)頁代碼。雖然這項(xiàng)技術(shù)在形式上較為新穎，但其背后依然依賴于大量的研究工作。微軟強(qiáng)調(diào)，通過草圖生成代碼并不意味著AI可以通過任意圖像生成復(fù)雜邏輯的代碼。在實(shí)際開發(fā)中，產(chǎn)品經(jīng)理等角色需要將需求轉(zhuǎn)化為設(shè)計(jì)，再由工程師通過代碼實(shí)現(xiàn)。GPT-4等大模型目前只能在從設(shè)計(jì)到代碼生成的環(huán)節(jié)提供輔助，而在需求理解和設(shè)計(jì)階段仍需人工介入。

?

除了上述企業(yè)的探索，還有一些工具和方法可以幫助設(shè)計(jì)師和開發(fā)人員將設(shè)計(jì)稿轉(zhuǎn)化為代碼：

1.Uizard：可以將手繪草圖和設(shè)計(jì)圖像轉(zhuǎn)換為數(shù)字原型和代碼，支持HTML/CSS代碼生成。

2.Adobe XD + Plugins：通過插件（如"Export Kit"或"Anima"）將設(shè)計(jì)稿導(dǎo)出為HTML、CSS和JavaScript代碼。

3.Figma + Plugins：類似于Adobe XD，通過插件（如"HTML Generator"或"Figma to Code"）將設(shè)計(jì)稿轉(zhuǎn)換為代碼。

4.Zeplin：設(shè)計(jì)師可以將設(shè)計(jì)稿上傳到Zeplin，開發(fā)人員可以從中提取CSS代碼和設(shè)計(jì)規(guī)范。

5.Avocode：支持將Sketch、XD、Photoshop等設(shè)計(jì)稿轉(zhuǎn)換為代碼，自動(dòng)生成HTML和CSS代碼。

6.Sketch2React：將Sketch設(shè)計(jì)稿轉(zhuǎn)換為React組件。

7.CodeMyUI：提供大量UI設(shè)計(jì)和代碼示例，供設(shè)計(jì)師和開發(fā)人員參考。

四、Flutter代碼生成工具

將設(shè)計(jì)稿直接轉(zhuǎn)換為Flutter代碼是一項(xiàng)復(fù)雜的任務(wù)，但以下工具可以顯著簡(jiǎn)化工作流：

1.Supernova：支持從Sketch、Adobe XD、Figma導(dǎo)出Flutter代碼。

2.Flutter Studio：在線工具，可以將設(shè)計(jì)轉(zhuǎn)換為Flutter代碼。

3.Parabeac：開源工具，支持從Sketch、Figma轉(zhuǎn)換為Flutter代碼。

4.Figma to Flutter：Figma插件，可以將設(shè)計(jì)稿轉(zhuǎn)換為Flutter代碼。

5.Adobe XD to Flutter：Adobe XD插件，可以將設(shè)計(jì)稿導(dǎo)出為Flutter代碼。

6.Sketch2Flutter：將Sketch設(shè)計(jì)稿轉(zhuǎn)換為Flutter代碼。

7.Draftbit：低代碼平臺(tái)，支持從設(shè)計(jì)到Flutter代碼的轉(zhuǎn)換。

這些工具通常需要經(jīng)過以下步驟：

1.設(shè)計(jì)階段：在設(shè)計(jì)工具中創(chuàng)建設(shè)計(jì)稿。

2.導(dǎo)出設(shè)計(jì)：使用相應(yīng)的插件或工具導(dǎo)出設(shè)計(jì)稿。

3.生成代碼：導(dǎo)出的設(shè)計(jì)稿自動(dòng)轉(zhuǎn)換為代碼。

4.手動(dòng)調(diào)整：根據(jù)需要手動(dòng)調(diào)整生成的代碼。

?

五、京東的Ling平臺(tái)

京東的Ling平臺(tái)可以根據(jù)設(shè)計(jì)稿生成H5代碼和Android布局代碼，但目前尚無法生成Flutter代碼。該平臺(tái)的主要目標(biāo)是簡(jiǎn)化開發(fā)流程，提高開發(fā)效率。

?羚瓏平臺(tái)?

六、大模型生成flutter探索和經(jīng)驗(yàn)總結(jié)

1、嘗試用歷史的UI設(shè)計(jì)圖生成，下圖是把UI設(shè)計(jì)圖導(dǎo)入到ling平臺(tái)，可以生產(chǎn)web前端代碼。

2、把前端WEB代碼輸入到大模型，讓生成flutter代碼，然后運(yùn)行效果如下：

?

發(fā)現(xiàn)整體UI都正式出來，所有元素都能展示出來，字體和顏色還原度很高，就是位置偏差比較大。分析認(rèn)為，設(shè)計(jì)圖畫的層次結(jié)構(gòu)比較自由，沒有結(jié)構(gòu)化，大模型不能很高理解位置和層級(jí)關(guān)系。

3、原型設(shè)計(jì)圖結(jié)構(gòu)化和組件化

把這個(gè)想法和UI設(shè)計(jì)師溝通后，在新的項(xiàng)目中，嘗試結(jié)構(gòu)化UI設(shè)計(jì)圖，按照順序編排元素的位置，并且組件化。派送引導(dǎo)式作業(yè)的組件化化的設(shè)計(jì)圖如下：

?

組件一：頭部卡片

?

?

?

組件二：運(yùn)單卡片

?

?

小結(jié)

設(shè)計(jì)稿的組件在羚瓏平臺(tái)( https://ling.jd.com)生成web前端代碼，然后拿生成的web前端代碼輸入到大模型，直接告訴大模型生成flutter代碼。上圖組件一和組件二，左邊是設(shè)計(jì)稿，右邊是大模型輸入在項(xiàng)目運(yùn)行的效果，還原效果比未結(jié)構(gòu)化的情況，大模型理解翻譯的提高90%，基本可以用于日常項(xiàng)目中，對(duì)設(shè)計(jì)師的畫圖有一定要求，這個(gè)時(shí)間投入，可以讓研發(fā)節(jié)省更多的時(shí)間。

審核編輯 黃宇