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

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

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

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

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

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

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

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

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

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

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

　　溝通與協(xié)作

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

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

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

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

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

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

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

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

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

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

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

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

　　代碼自動(dòng)化的展望

　　據(jù)了解，藍(lán)湖仍在【自動(dòng)生成代碼】方面將持續(xù)發(fā)力，會(huì)在更多更深的領(lǐng)域?yàn)楣こ處煶掷m(xù)賦能。

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

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