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

更多信息

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

imgcook 是什么

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

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

愿景：能夠高度還原各種圖像，釋放 UI 開發生產力，讓你關注更具挑戰性的事情！

為什么要做 imgcook ？

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

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

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

? 設計稿無約束+高還原

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

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

? 生成可維護代碼

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

如何使用 imgcook ？

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

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

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

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

什么場景下使用 imgcook ？

imgcook 的誕生源于業務，也最終服務于業務。

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

面向未來

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

原文鏈接
本文為云棲社區原創內容，未經允許不得轉載。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。