內容介紹
今天給大家分享一款sketch外掛，利用該外掛可以實現程式碼自動生成，並且包含多端。例如web端，微信小程式端等。
imgcook介紹
imgcook 專注以 Sketch、PSD、靜態圖片等形式的視覺稿作為輸入，通過智慧化技術一鍵生成可維護的前端程式碼，包含檢視程式碼、資料欄位繫結、元件程式碼、部分業務邏輯程式碼等。目前此產品是阿里巴巴前端委員會智慧化小組的服務化的內外落地產品。
imgcook 的主要功能是視覺稿一鍵還原和基於還原後的視覺化編輯，Sketch/Photoshop 設計稿的還原從安裝外掛開始，在設計稿中通過外掛匯出視覺稿的 JSON 描述資訊貼上到 imgcook 視覺化編輯器，在編輯器中可以進行檢視編輯、邏輯編輯等，生成程式碼後可將程式碼匯出到本地或您的工程檔案。主流程如下箭頭所示
使用場景
imgcook 目前支援各種場景的頁面或模組的高度還原，您可以根據以下場景分類選擇是否使用 imgcook。
移動端細粒度模組開發場景 - 特別推薦
移動端活動頁 - 特別推薦
移動端全頁面開發 - 推薦
PC 端 toC 應用 - 推薦
PC 端 toB 應用
PC 端富互動應用 - 不推薦
遊戲場景 - 不推薦
使用流程
設計師根據 設計稿規範 調整設計稿，確保圖層組織以及切圖相關的質量交付，完成後交於前端。
前端根據設計師調整後的設計稿，可選中模組或頁面進行匯出（使用外掛或者檔案上傳服務）。
前端根據設計稿匯出還原後的結果在編輯器中進行微調使用。
軟體安裝
1.sketch安裝。這裡就不演示如何安裝。如果需要破解版的，可以關注公眾號(卡二條的技術圈)回覆，”sketch”,即可免費獲取最新破解包。
2.imcook安裝。
2.1我們先開啟官網地址。官網地址 將外掛下載到本地，點選該外掛即可自動安裝到sketch外掛中。
3.檢測外掛是否安裝成功。開啟sketch，點選外掛管理選單，如果現實imgcook則表示安裝成功。同時我們也可以看到sketch的工作介面右側多了幾個選單選項。
如何使用
1.我們事先找一個sketch檔案，我這裡去網上找的一個sketch元件。匯入到sketch中。我們選中元件，點選右側的匯出按鈕即可。
2.複製匯出的連結。會自動跳轉到imgcokke的官網中去。
3.點選複製按鈕，會預設跳轉到該介面。我們直接按住ctrl+v,貼上即可。
4.此時點選右上角的程式碼按鈕，即可選擇不同埠的程式碼。
5.預設的是web端的程式碼，我們可以看到幾個選型卡，這幾個選項卡就是我們常見的html,css，js等檔案。
6.根據需要，自動生成多端程式碼。
7.自動調整元素。如果需要調整sketch元件的設計，我們可以點選編輯模式，根據不同的選項，進行配置。
8.最後我們根據我們常見的操作，建立html，css和js檔案，imgcook建立好的程式碼匯入進去就可以啦。這裡就不演示了。
本作品採用《CC 協議》，轉載必須註明作者和本文連結