Imgcook（圖像大廚）是由阿里巴巴-大淘寶技術-導購和營銷產品團隊推出的設計稿智能生成前端代碼（D2C，Design to Code）的平台，專注以 Sketch、PSD、靜態圖片等形式的視覺稿作爲輸入，通過智能化技術一鍵生成可維護的前端代碼，包含視圖代碼、數據字段綁定、組件代碼、部分業務邏輯代碼等。
Imgcook的主要功能
一鍵還原視覺稿
從視覺稿中還原生成代碼需要將視覺稿中的數據導出到 imgcook 可視化編輯器中還原生成代碼，支持兩種方式：
- 第1種：打開 Sketch/PSD 文件，通過安裝好的 imgcook 插件將設計稿中的圖層信息導出，粘貼到可視化編輯器中。
- 第2種：在可視化編輯器中直接上傳“導入” Sketch/PSD/圖片文件，imgcook 會解析圖層信息直接還原到編輯器中。
可視化編輯
在 imgcook 可視化編輯器中，用戶可以對視圖編輯，比如支持動態表達式樣式、設置循環、修改佈局。還可以編寫邏輯代碼、綁定字段等。
生成代碼
官方有提供常用的 DSL（React/Vue/小程序 DSL等），點擊下拉列表可切換使用其他 DSL。如果有特殊訴求，你也可以自定義 DSL。
代碼確定後，可點擊「導出」，你也可以使用 VS code imgcook 插件鏈路「導出」，此方式可以將整個模塊代碼文件生成到相應目錄，直接繼續使用 VS code 開發整個項目即可。導出後的代碼到本地文件中，圖片以相對路徑的形式存放在 images 文件夾下。
Imgcook的應用場景
imgcook 目前支持各種場景的頁面或模塊的高度還原，您可以根據以下場景分類選擇是否使用 imgcook。
- 移動端細粒度模塊開發場景 – 特別推薦
- 移動端活動頁 – 特別推薦
- 移動端全頁面開發 – 推薦
- PC 端 toC 應用 – 推薦
- PC 端 toB 應用
- PC 端富交互應用 – 不推薦
- 遊戲場景 – 不推薦
如何使用imgcook插件？
-
確保你已登錄到 imgcook 帳戶。
-
在 Figma 中，轉到 Plugins 並選擇 imgcook，你應該看到一個新的導出窗口。
-
選擇任意文件圖層組，然後點擊“導出”。 imgcook 將彈出“導出成功，已複製到剪貼板！” 提示彈出層，然後單擊“轉到粘貼”進行還原。
-
imgcook將在新的瀏覽器選項卡中打開編輯器。 將其粘貼並恢復到“ ctr + v”編輯器中，然後另存爲模塊即可。
Imgcook是免費的嗎？
Imgcook是完全免費的，用戶可以使用其提供的Figma、Sketch、VSCode等插件來進行將設計稿免費轉化爲代碼。
