作者：京東物流 冷先鋒

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

一、美團的探索

美團在2021年3月25日發表了一篇關于設計稿自動生成代碼的文章，探討了sketch2json和imgCook兩種技術方案。sketch2json通過解析Sketch源文件中的圖層信息，轉化成DSL并生成代碼，而imgCook則基于AI技術來實現這一過程。盡管當時大模型技術尚未成熟，sketch2json的生成算法較為簡單粗暴，復雜層布局的準確率較低且可解釋性不高，難以持續優化。

原文：設計稿（UI視圖）自動生成代碼方案的探索?

二、咸魚的UI2CODE的設計思路：

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

原文： UI2CODE智能生成Flutter代碼——整體設計篇?

三、微軟的Sketch2Code

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

?

除了上述企業的探索，還有一些工具和方法可以幫助設計師和開發人員將設計稿轉化為代碼：

1.Uizard：可以將手繪草圖和設計圖像轉換為數字原型和代碼，支持HTML/CSS代碼生成。

2.Adobe XD + Plugins：通過插件（如"Export Kit"或"Anima"）將設計稿導出為HTML、CSS和JavaScript代碼。

3.Figma + Plugins：類似于Adobe XD，通過插件（如"HTML Generator"或"Figma to Code"）將設計稿轉換為代碼。

4.Zeplin：設計師可以將設計稿上傳到Zeplin，開發人員可以從中提取CSS代碼和設計規范。

5.Avocode：支持將Sketch、XD、Photoshop等設計稿轉換為代碼，自動生成HTML和CSS代碼。

6.Sketch2React：將Sketch設計稿轉換為React組件。

7.CodeMyUI：提供大量UI設計和代碼示例，供設計師和開發人員參考。

四、Flutter代碼生成工具

將設計稿直接轉換為Flutter代碼是一項復雜的任務，但以下工具可以顯著簡化工作流：

1.Supernova：支持從Sketch、Adobe XD、Figma導出Flutter代碼。

2.Flutter Studio：在線工具，可以將設計轉換為Flutter代碼。

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

4.Figma to Flutter：Figma插件，可以將設計稿轉換為Flutter代碼。

5.Adobe XD to Flutter：Adobe XD插件，可以將設計稿導出為Flutter代碼。

6.Sketch2Flutter：將Sketch設計稿轉換為Flutter代碼。

7.Draftbit：低代碼平臺，支持從設計到Flutter代碼的轉換。

這些工具通常需要經過以下步驟：

1.設計階段：在設計工具中創建設計稿。

2.導出設計：使用相應的插件或工具導出設計稿。

3.生成代碼：導出的設計稿自動轉換為代碼。

4.手動調整：根據需要手動調整生成的代碼。

?

五、京東的Ling平臺

京東的Ling平臺可以根據設計稿生成H5代碼和Android布局代碼，但目前尚無法生成Flutter代碼。該平臺的主要目標是簡化開發流程，提高開發效率。

?羚瓏平臺?

六、大模型生成flutter探索和經驗總結

1、嘗試用歷史的UI設計圖生成，下圖是把UI設計圖導入到ling平臺，可以生產web前端代碼。

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

?

發現整體UI都正式出來，所有元素都能展示出來，字體和顏色還原度很高，就是位置偏差比較大。分析認為，設計圖畫的層次結構比較自由，沒有結構化，大模型不能很高理解位置和層級關系。

3、原型設計圖結構化和組件化

把這個想法和UI設計師溝通后，在新的項目中，嘗試結構化UI設計圖，按照順序編排元素的位置，并且組件化。派送引導式作業的組件化化的設計圖如下：

?

組件一：頭部卡片

?

?

?

組件二：運單卡片

?

?

小結

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

審核編輯 黃宇