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

更多信息

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

imgcook 是什么

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

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

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

為什么要做 imgcook ？

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

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

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

? 設計稿無約束+高還原

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

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

? 生成可維護代碼

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

如何使用 imgcook ？

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

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

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

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

什么場景下使用 imgcook ？

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

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

面向未來

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

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

總結

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

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