這幾年來 AI 來勢洶洶，在部分領(lǐng)域應(yīng)用也逐漸成熟。前端發(fā)展至今，我們也有許多成熟的前端解決方案代碼，有大量的設(shè)計稿，我們是否能夠結(jié)合智能化的能力將一個 Design 變成一個 Code （設(shè)計轉(zhuǎn)代碼，簡稱 D2C）來提效，讓前端從一個資源型的角色中解放出來將精力投入到前端其他專業(yè)領(lǐng)域？淘寶 D2C 智能團隊這兩年圍繞這個方向也做了許多的探索，最終將 D2C 的能力都承載到了 imgcook 這個產(chǎn)品上。

更多信息

imgcook下載鏈接，以及使用指南，小編已經(jīng)為大家準(zhǔn)備好啦！
下載imgcook：https://imgcook.taobao.org/
imgcook使用指南：https://imgcook.taobao.org/docs

imgcook 是什么

imgcook 是專注以各種圖像（Sketch/PSD/靜態(tài)圖片）為原材料烹飪的匠心大廚，通過智能化手段將各種圖像一鍵生成可維護的 UI 視圖代碼，期望此 imgcook (圖像大廚) 未來能夠成為一位 P5 級別的重構(gòu)工程師，能切實提高開發(fā)的開發(fā)效率，并助力開發(fā)、設(shè)計師、測試的高效協(xié)作，我們期望做到：

• 100% 還原【設(shè)計師再也不用還原走查了】
• 100% 兼容【測試再也不用適配樣式了】
• 一鍵上線【開發(fā)再也不用切圖寫樣式了】

愿景：能夠高度還原各種圖像，釋放 UI 開發(fā)生產(chǎn)力，讓你關(guān)注更具挑戰(zhàn)性的事情！

為什么要做 imgcook ？

對于 UI 還原而言，早在很多年前，類似的從設(shè)計稿中還原生成靜態(tài) UI 場景的解決方案也都涌現(xiàn)過，比如一些設(shè)計稿標(biāo)注工具（如Marketch），又或者說目前的一些可視化建站平臺也都能夠在搭建完后直接產(chǎn)出線上頁面，那么 imgcook 的優(yōu)勢體現(xiàn)在哪？

我們回到 UI 還原主題上，當(dāng)我們說圖像生成代碼的時候，我們關(guān)心的不僅僅是生成 UI 的還原度，也關(guān)心生成的代碼是否合理、可維護，如果生成的代碼屬于不可讀不可維護的快餐代碼，開發(fā)使用上再對其進行二次開發(fā)就會顯得極為艱難，而往往后者的難度相比前者更甚，如果需要在生產(chǎn)環(huán)境中使用，這個問題就無法避免。

對此，imgcook 的定位就在于解決 UI 還原以及生成可維護代碼的問題。

? 設(shè)計稿無約束+高還原

對于 UI 還原，目前比較常見的場景是從設(shè)計工具（比如Sketch、PS）入手。但比較不如意的是，設(shè)計師交付的設(shè)計稿里所帶的結(jié)構(gòu)化信息往往是雜亂無章的，如果需要精確得解析一個設(shè)計稿里某個模塊的結(jié)構(gòu)化數(shù)據(jù)，往往又需要跟設(shè)計師進行合作，規(guī)范設(shè)計稿中的設(shè)計以及制定一些約束來進行使用，這會增加一定程度上的使用成本。

imgcook 為了解決這個問題，目前在對設(shè)計稿的解析上做了一些智能化的處理，去除了對設(shè)計師圖層設(shè)計規(guī)范這塊的依賴（當(dāng)然對于良好的設(shè)計規(guī)范會讓還原效果更甚！），只保留了一項開發(fā)人員可能使用到的規(guī)范來做 UI 還原。

? 生成可維護代碼

對于可維護性代碼的問題，imgcook 會對還原后的 UI 在代碼層面上生成目前使用比較廣泛的 Flexbox 布局以及相對定位布局，在一些自定義的命名上（比如樣式命名），imgcook 也會根據(jù)開發(fā)者的習(xí)慣生成更加人性化的命名。

如何使用 imgcook ？

imgcook 目前對外的體驗版里，開放了針對 Sketch 設(shè)計稿和 PSD 設(shè)計稿的還原插件，以 Sketch 為例，整體的導(dǎo)出流程如下：

1. 插件導(dǎo)出模塊
在使用 Sketch 插件進行還原的時候，可選中一個模塊外層的容器節(jié)點（畫板、Group或者Symbol）來進行導(dǎo)出。

2. 粘貼還原
模塊導(dǎo)出完畢后，可前往 imgcook 平臺進行粘貼還原。

3. 保存查閱代碼
檢查模塊還原 UI 以及左側(cè)的布局結(jié)構(gòu)無誤后，可進行保存->查閱代碼，目前對外的體驗版中 imgcook 提供了幾種可選擇的 DSL 進行代碼生成，對于每個 DSL，可在右側(cè)的 playground 里查看具體運行的效果。

什么場景下使用 imgcook ？

imgcook 的誕生源于業(yè)務(wù)，也最終服務(wù)于業(yè)務(wù)。

• 場景使用層面上，imgcook 傾向于以頁面中的模塊級別維度來進行使用；對于模塊本身，imgcook 也會傾向于一些輕交互邏輯的模塊來進行使用。
• 技術(shù)層面上，imgcook 對于支持 Flexbox 布局類型的 DSL 都會有一個比較好的支持。

面向未來

面向未來，imgcook 還在深耕更多的 UI 識別能力，諸如 Input/Table/Select 等前端基礎(chǔ)控件識別、業(yè)界流行的 Antd/Fusion 等前端組件庫識別，甚至可以為垂直業(yè)務(wù)定制獨特的業(yè)務(wù)組件的識別能力，我們希望 imgcook 能真正給前端帶來更多的提效能力。

原文鏈接
本文為云棲社區(qū)原創(chuàng)內(nèi)容，未經(jīng)允許不得轉(zhuǎn)載。

總結(jié)

以上是生活随笔為你收集整理的手把手教你D2C，走向前端智能化的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。