最近藍湖重磅上線了「設計圖轉代碼」功能，在原有設計稿標注功能的基礎上，進一步提升前端工程師的開發體驗和效率，達到了像素級還原設計稿的效果。

　　在工程師日常的開發鏈路中，“溝通協作”與“編碼”是時間成本較大的兩個環節，主要有兩個痛點：

　　協作效率低，溝通成本高

　　設計師需提前標記元素信息、下載切圖以便開發人員使用。設計師和前端需要反復溝通才能確保信息一致性。

　　視覺稿還原之后，設計師需要花費大量時間走查，不斷對齊修改界面代碼。

　　大量低技術含量的需求

　　view層代碼技術難度低，但是較為繁瑣耗時，有時需要短時間內上線大量活動頁、說明頁以支持產品及運營活動。

　　低技術含量的需求過多占用前端工程師的時間，對團隊來說，資源化的前端人力將會成為產品需求迭代的瓶頸。

　　本次藍湖推出的「設計圖轉代碼」功能很好的解決了上述兩個痛點，從“溝通協作”與“編碼”兩個維度切入，全面提升了 Web 應用生產效率。

　　【設計圖轉代碼】功能地址：LanhuApp.com/dds

　　下面我們來深扒藍湖「設計圖轉代碼」的理念和實現過程：

　　溝通與協作

　　藍湖原有的設計圖標注功能，已經有效的減少了設計師和前端工程師之間的溝通成本，優化了協作流程。此次推出「設計圖轉代碼」功能后，為了不額外增加設計師工作負擔，保持簡單的工作流程：

　　1. 對設計稿或設計組件的命名不做任何特殊要求。

　　2. 設計師原有上傳設計圖的流程不變。

　　從產品層面上來說，真正意義上的提效，是全協作流程的提效，而不是把開發成本轉嫁到流程里的另外一側。這也是「設計圖轉代碼」功能面臨的最大的挑戰，因為理論上“約束”與“規則”是一切自動化的關鍵，“靈活性”與“高效率”的權衡是無法避免的。但設計與創作的養分來自于想象與自由，不讓規則扼殺設計的養分，是藍湖的原則與堅持。基于此，「設計圖轉代碼」功能用 AI 圖像識別，來應對多變的 UI 風格和組件的個性化應用。

　　AI 賦能代碼自動化生產

　　通常來說，寫界面、還原 UI 稿對前端同學來說并沒有太大的技術難度，但是比較低效。藍湖用設計稿圖層信息與圖像識別結合的方式，實現了一鍵從 0 生成可用的 view 層代碼。我們都知道，越是簡單的操作背后，越隱藏著巨大的挑戰，在 UI 還原度和代碼可維護性上，需要做很多努力。比如我們知道一個視圖界面通常包括幾個要素：

　　布局：合理的層級與嵌套關系、循環體檢測與生成、絕對定位與相對定位的轉換。

　　組件：組件的類型識別，特征表達與生成。

　　樣式：前景和背景的區分，線條、圓角、字體的還原等。

　　經過不斷對每個要素進行優化和調整，藍湖「設計圖轉代碼」功能的UI還原度最高已達到 98%，對于邏輯簡單的活動頁、說明頁等，可直接下載使用，無需二次開發。

　　同時「設計圖轉代碼」對 DSL 的擴展也很好的支持了各種多元化的應用平臺和場景。除了 Vue 與 React 等前端常用框架，同時支持生成微信小程序代碼與 uni-app。

　　藍湖「設計圖轉代碼」功能還同時從協作和編碼兩個維度進行了優化，可以大大縮短 Web 應用的開發時間，減少協作中的信息摩擦。代碼的智能化、自動化讓工程師拋棄繁復冗雜的工作，有更多的精力關注更感興趣、更有價值的事情。

　　代碼自動化的展望

　　據了解，藍湖仍在【自動生成代碼】方面將持續發力，會在更多更深的領域為工程師持續賦能。

　　我們也相信隨著 AI 技術的不斷成熟，未來前端技術基于人工智能不僅可以完美的實現從設計稿到應用的智能生產，還可以根據需求模擬多種線上情況進行智能化測試，形成全自動化的迭代閉環。

　　讓我們共同期待藍湖的下一個【黑科技】。