图像大厨imgcook

圖像大厨imgcook 是一款設計轉程式碼工具，可將設計稿轉換為前端程式碼，支援 Sketch、Photoshop、VS Code 與 CLI 的外掛及開發流程。

AI設計助手

AI開發者工具

AI程式助手

訪問網站

概述

imgcook 是一款設計轉程式碼產品，可將設計稿轉換為前端程式碼。其首頁將它定位為可把基於圖片或設計工具的素材轉為程式碼的工具，而文件則說明它會先從設計圖層中提取版面與樣式資訊，再產生程式碼。

這個產品圍繞外掛與開發者工作流程而非單一匯出按鈕來設計。來源頁面描述了 Sketch 與 Photoshop 外掛、imgcook 編輯器、VS Code 外掛，以及 imgcook CLI 支援，讓團隊能將產生的程式碼導入本地專案與既有研發流程。

功能特色

設計稿轉程式碼外掛

使用 Sketch 外掛或 Photoshop 外掛，從設計稿中提取版面與樣式資訊，並從分層元素產生程式碼。

多種輸入與匯出路徑

透過外掛工作流程匯出產生的程式碼，或將設計檔上傳至 imgcook 編輯器後繼續操作。

基於 CLI 的專案整合

使用 imgcook CLI 將產生的程式碼產物帶入本地專案，並納入工程工作流程。

VS Code 編輯器工作流程

使用 VS Code 外掛將設計工具輸出貼入編輯器、產生程式碼，並匯出到目標資料夾。

官方 DSL 支援與自訂化

支援 10 種程式碼類型的官方 DSL，包括 react、rax、Vue 與 applet，並提供自訂 DSL 以支援其他輸出。

自訂匯出處理

在匯出時套用自訂外掛來處理程式碼產物，例如將圖片移動到個人資產空間或轉換檔案目錄。

使用案例

從 mockup 進行設計交接
設計師可以安裝 Sketch 或 Photoshop 外掛，從稿件中提取圖層資訊，並交付產生的程式碼，而非靜態 mockup。
本地開發整合
前端團隊可以使用 CLI 或 VS Code 外掛，將產生的程式碼拉入本地儲存庫，並在既有工具中繼續實作。
特定框架的程式碼產生
需要特定框架輸出的團隊可以從官方 DSL 中選擇，包括 react、rax、Vue 與 applet，或為自身目標技術堆疊自訂 DSL。
匯出時的程式碼處理
工程團隊可以在匯出時套用自訂外掛來移動圖片、重新組織資料夾，或在程式碼進入專案前進行其他後處理。
用於重複生產的平台工作流程
產品或平台團隊可以將 imgcook 納入內部工作流程，結合設計素材管理、程式碼匯出與基於外掛的編輯，以支援重複性生產使用。

Pros and Cons

Pros

支援多種建立與交付路徑，包括外掛、編輯器、CLI 與 VS Code 工作流程。
文件同時說明 Sketch 與 Photoshop 外掛的安裝路徑，對使用不同設計工具的團隊有幫助。
官方提供 10 種 DSL，並允許為其他程式碼輸出進行自訂 DSL 產生。
展示了保留設計圖層版面與樣式資訊的程式碼產生流程，而非將設計視為單一平面圖片。
包含可在匯出期間對產生的程式碼產物進行後處理的自訂外掛。

Cons

所蒐集來源中無法取得定價資訊，因為定價頁面回傳未找到頁面。
可用來源未能清楚驗證除文件中提及的外掛與 DSL 之外，完整支援的設計工具或目標框架整合範圍。
部分蒐集到的證據中文檔頁面較為簡略或無法存取，因此某些工作流程細節仍僅部分確認。

FAQ

imgcook 如何將設計轉換為程式碼？

imgcook 提供透過其外掛工具與編輯器，將設計稿轉換為前端程式碼的工作流程。文件描述了 Sketch 與 Photoshop 外掛，以及可匯出產生程式碼的 imgcook 編輯器流程。

imgcook 支援哪些平台或工作流程？

來源文件顯示支援 Mac 上的 Sketch 外掛，以及適用於 Mac 與 Windows 的 Photoshop 外掛。文件也提到 imgcook VS Code 外掛與 imgcook CLI，可將產生的程式碼納入本地開發流程。

imgcook 會產生什麼類型的輸出？

安裝指南說明，imgcook 會從設計稿中提取位置與樣式等資訊，並透過逐層處理產生前端程式碼。首頁也表示產生的程式碼可以匯出、上傳，或整合到本地專案中。

imgcook 可以為不同框架產生程式碼嗎？

首頁說明其官方支援 10 種 DSL，包括 react、rax、Vue 與 applet，並表示使用者也可以自訂 DSL 來產生其他程式碼格式。

imgcook 的費用是多少？

所收集來源中的定價頁面回傳未找到頁面，因此無法從可用證據確認定價細節。

Quick Facts

類別: 設計工具 / 開發者工具
來源網域: imgcook.com
主要工作流程: 設計稿轉前端程式碼
支援的設計工具: Sketch 與 Photoshop 外掛
開發者工作流程: imgcook CLI 與 VS Code 外掛
定價: 未從蒐集來源中驗證