最近藍(lán)湖重磅上線了「設(shè)計圖轉(zhuǎn)代碼」功能，在原有設(shè)計稿標(biāo)注功能的基礎(chǔ)上，進(jìn)一步提升前端工程師的開發(fā)體驗和效率，達(dá)到了像素級還原設(shè)計稿的效果。

　　在工程師日常的開發(fā)鏈路中，“溝通協(xié)作”與“編碼”是時間成本較大的兩個環(huán)節(jié)，主要有兩個痛點：

　　協(xié)作效率低，溝通成本高

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

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

　　大量低技術(shù)含量的需求

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

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

　　本次藍(lán)湖推出的「設(shè)計圖轉(zhuǎn)代碼」功能很好的解決了上述兩個痛點，從“溝通協(xié)作”與“編碼”兩個維度切入，全面提升了 Web 應(yīng)用生產(chǎn)效率。

　　【設(shè)計圖轉(zhuǎn)代碼】功能地址：LanhuApp.com/dds

　　下面我們來深扒藍(lán)湖「設(shè)計圖轉(zhuǎn)代碼」的理念和實現(xiàn)過程：

　　溝通與協(xié)作

　　藍(lán)湖原有的設(shè)計圖標(biāo)注功能，已經(jīng)有效的減少了設(shè)計師和前端工程師之間的溝通成本，優(yōu)化了協(xié)作流程。此次推出「設(shè)計圖轉(zhuǎn)代碼」功能后，為了不額外增加設(shè)計師工作負(fù)擔(dān)，保持簡單的工作流程：

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

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

　　從產(chǎn)品層面上來說，真正意義上的提效，是全協(xié)作流程的提效，而不是把開發(fā)成本轉(zhuǎn)嫁到流程里的另外一側(cè)。這也是「設(shè)計圖轉(zhuǎn)代碼」功能面臨的最大的挑戰(zhàn)，因為理論上“約束”與“規(guī)則”是一切自動化的關(guān)鍵，“靈活性”與“高效率”的權(quán)衡是無法避免的。但設(shè)計與創(chuàng)作的養(yǎng)分來自于想象與自由，不讓規(guī)則扼殺設(shè)計的養(yǎng)分，是藍(lán)湖的原則與堅持?；诖?，「設(shè)計圖轉(zhuǎn)代碼」功能用 AI 圖像識別，來應(yīng)對多變的 UI 風(fēng)格和組件的個性化應(yīng)用。

　　AI 賦能代碼自動化生產(chǎn)

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

　　布局：合理的層級與嵌套關(guān)系、循環(huán)體檢測與生成、絕對定位與相對定位的轉(zhuǎn)換。

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

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

　　經(jīng)過不斷對每個要素進(jìn)行優(yōu)化和調(diào)整，藍(lán)湖「設(shè)計圖轉(zhuǎn)代碼」功能的UI還原度最高已達(dá)到 98%，對于邏輯簡單的活動頁、說明頁等，可直接下載使用，無需二次開發(fā)。

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

　　藍(lán)湖「設(shè)計圖轉(zhuǎn)代碼」功能還同時從協(xié)作和編碼兩個維度進(jìn)行了優(yōu)化，可以大大縮短 Web 應(yīng)用的開發(fā)時間，減少協(xié)作中的信息摩擦。代碼的智能化、自動化讓工程師拋棄繁復(fù)冗雜的工作，有更多的精力關(guān)注更感興趣、更有價值的事情。

　　代碼自動化的展望

　　據(jù)了解，藍(lán)湖仍在【自動生成代碼】方面將持續(xù)發(fā)力，會在更多更深的領(lǐng)域為工程師持續(xù)賦能。

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

　　讓我們共同期待藍(lán)湖的下一個【黑科技】。