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

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

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

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

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

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

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

　　低技術(shù)含量的需求過多占用前端工程師的時(shí)間,，對團(tuán)隊(duì)來說，資源化的前端人力將會成為產(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án)湖「設(shè)計(jì)圖轉(zhuǎn)代碼」的理念和實(shí)現(xiàn)過程：

　　溝通與協(xié)作

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

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

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

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

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

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

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

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

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

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

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

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

　　代碼自動化的展望

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

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

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