Imgcook（圖像大廚）是由阿里巴巴-大淘寶技術(shù)-導(dǎo)購(gòu)和營(yíng)銷(xiāo)產(chǎn)品團(tuán)隊(duì)推出的設(shè)計(jì)稿智能生成前端代碼（D2C，Design to Code）的平臺(tái)，專(zhuān)注以 Sketch、PSD、靜態(tài)圖片等形式的視覺(jué)稿作為輸入，通過(guò)智能化技術(shù)一鍵生成可維護(hù)的前端代碼，包含視圖代碼、數(shù)據(jù)字段綁定、組件代碼、部分業(yè)務(wù)邏輯代碼等。

Imgcook的主要功能

一鍵還原視覺(jué)稿

從視覺(jué)稿中還原生成代碼需要將視覺(jué)稿中的數(shù)據(jù)導(dǎo)出到 imgcook 可視化編輯器中還原生成代碼，支持兩種方式：

• 第1種：打開(kāi) Sketch/PSD 文件，通過(guò)安裝好的 imgcook 插件將設(shè)計(jì)稿中的圖層信息導(dǎo)出，粘貼到可視化編輯器中。
• 第2種：在可視化編輯器中直接上傳“導(dǎo)入” Sketch/PSD/圖片文件，imgcook 會(huì)解析圖層信息直接還原到編輯器中。

可視化編輯

在 imgcook 可視化編輯器中，用戶可以對(duì)視圖編輯，比如支持動(dòng)態(tài)表達(dá)式樣式、設(shè)置循環(huán)、修改布局。還可以編寫(xiě)邏輯代碼、綁定字段等。

生成代碼

官方有提供常用的 DSL（React/Vue/小程序 DSL等），點(diǎn)擊下拉列表可切換使用其他 DSL。如果有特殊訴求，你也可以自定義 DSL。

代碼確定后，可點(diǎn)擊「導(dǎo)出」，你也可以使用 VS code imgcook 插件鏈路「導(dǎo)出」，此方式可以將整個(gè)模塊代碼文件生成到相應(yīng)目錄，直接繼續(xù)使用 VS code 開(kāi)發(fā)整個(gè)項(xiàng)目即可。導(dǎo)出后的代碼到本地文件中，圖片以相對(duì)路徑的形式存放在 images 文件夾下。

Imgcook的應(yīng)用場(chǎng)景

imgcook 目前支持各種場(chǎng)景的頁(yè)面或模塊的高度還原，您可以根據(jù)以下場(chǎng)景分類(lèi)選擇是否使用 imgcook。

• 移動(dòng)端細(xì)粒度模塊開(kāi)發(fā)場(chǎng)景 - 特別推薦
• 移動(dòng)端活動(dòng)頁(yè) - 特別推薦
• 移動(dòng)端全頁(yè)面開(kāi)發(fā) - 推薦
• PC 端 toC 應(yīng)用 - 推薦
• PC 端 toB 應(yīng)用
• PC 端富交互應(yīng)用 - 不推薦
• 游戲場(chǎng)景 - 不推薦

如何使用imgcook插件？

1. 確保你已登錄到 imgcook 帳戶。

2. 在 Figma 中，轉(zhuǎn)到 Plugins 并選擇 imgcook，你應(yīng)該看到一個(gè)新的導(dǎo)出窗口。

3. 選擇任意文件圖層組，然后點(diǎn)擊“導(dǎo)出”。 imgcook 將彈出“導(dǎo)出成功，已復(fù)制到剪貼板！” 提示彈出層，然后單擊“轉(zhuǎn)到粘貼”進(jìn)行還原。

4. imgcook將在新的瀏覽器選項(xiàng)卡中打開(kāi)編輯器。 將其粘貼并恢復(fù)到“ ctr + v”編輯器中，然后另存為模塊即可。

Imgcook是免費(fèi)的嗎？

Imgcook是完全免費(fèi)的，用戶可以使用其提供的Figma、Sketch、VSCode等插件來(lái)進(jìn)行將設(shè)計(jì)稿免費(fèi)轉(zhuǎn)化為代碼。