imgplay制作軟件(圖像大廚)可以將設計稿一鍵智能的生成代碼，將智能化的手段圖像變成可維護的方式，來更好的提高ui代碼的試圖方式，同時還可以更加有效的提高用戶的開發的效率。

imgplay免費介紹

自定義編寫代碼模板

實時保證代碼和視覺的高度還原

一鍵智能還原與豐富的操作面板

支持小程序、React、H5、Weex Rax 等，外部暫時不支持自定義代碼模板。

全鏈路采用計算機視覺、深度學習等智能化手段依次去除對設計稿的約束，智能生成代碼。

imgplay官方版特色

高可維護性

DOM 嵌套合理、相對定位布局、文本自適應

ClassName語義化、循環可自動識別

Imgcook-cli 可將生成的代碼以任意形式一鍵下載到任意目錄，和您的研發鏈路無縫連接，支持自定義加工

軟件安裝步驟

下載 PS 版插件解壓文件后，會得到對應操作系統的插件安裝器文件以及試驗田試玩 PSD 文件。

Mac

雙擊 imgcook.photoshop_version.pkg 文件

按步驟提示進行安裝

安裝完畢后可重啟 PhotoShop

在頂部菜單「Window(窗口)」-「Extensions(擴展)」 找到 imgcook 插件。

注意：如果遇到軟件不可信問題，可前往 「系統偏好設置」-「安全性與隱私」-「仍要打開」。

注意：在最新的 Mac OS Catalina(10.15)中，安裝器因為權限原因咱不能使用，可使用下述的手動安裝。

Windows

手動安裝(推薦)

如果上述安裝器安裝流程出現異常(比如 Windows 安裝過程卡住時間很久，Mac 10.15 安裝器不可用)，可嘗試按以下步驟手動安裝。

1、解壓下載的 zip 文件，根據各自的系統將解壓后目錄里的 imgcook.photoshop 目錄放置到以下指定目錄。

Mac OS: /Library/Application Support/Adobe/CEP/extensions/

Windows x64: C:Program Files (x86)Common FilesAdobeCEPextensions, 或者 C:Program FilesCommon FilesAdobeCEPextensions

Windows x86: C:Program FilesCommon FilesAdobeCEPextensions

2、重啟 PhotoShop 即可在頂部菜單「 Window(窗口) 」-「Extensions(擴展)」 找到 imgcook 插件。

自動安裝

雙擊 imgcook.photoshop_version.exe 文件，按步驟提示進行安裝，大概耗時幾分鐘。

安裝完畢后可重啟 PhotoShop，在頂部菜單 「 Window(窗口) 」- 「Extensions(擴展)」 找到 imgcook 插件。

軟件常見問題

生成的代碼樣式尺寸不匹配?

對于非響應式的情況，默認的代碼樣式尺寸是根據設計稿實際尺寸出碼的，如果有存在1x、2x 設計稿情況，可以參考響應式處理方式進行處理，比如 750 的設計稿，想導出 375 的尺寸(需要根據設計稿尺寸自己在 DSL 實現里做整除)。

為什么有些樣式代碼導出是 vw，有些是 px、rem?

這個跟具體的 DSL 實現有關，實際上三者都可以導出，甚至可以是 less、scss，建議有自定義需求的可以自己在 Github fork DSL 代碼實現。

生成的代碼是否支持 less 、scss?

通常情況下是可以根據節點層級關系做到命名保護的，可以支持了一個比較簡單的層級樣式代碼生成，但相對來講還是偏靜態實現，可以參考此實現