手把手教你D2C，走向前端智能化

這幾年來 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 能真正給前端帶來更多的提效能力。

建議反饋

imgcook 目前還處於體驗版，會存在一些不肯定性的還原 badcase 以及代碼生成不合理的 badcase，請向咱們反饋，咱們會第一時間進行問題收集、跟進處理。

反饋地址：Issue

---

本文做者：塗挺鵬（波本）

閱讀原文

本文爲雲棲社區原創內容，未經容許不得轉載。