Imgcook

Imgcook (Image Chef) is a platform launched by the Alibaba Taobao Technology Guide and Marketing Product Team to intelligently generate front-end code (D2C, Design to Code) for design drafts. It focuses on using visual drafts such as Sketch, PSD, and static images as input, and using intelligent technology to generate maintainable front-end code with just one click, including view code, data field binding, component code, and some business logic code.
The main functions of Imgcook
One click restoration of visual drafts
To restore generated code from a visual draft, you need to export the data from the visual draft to the imgcook visual editor to restore the generated code, which supports two methods:
Option 1: Open the Sketch/PSD file, export the layer information in the design draft through the installed imgcook plugin, and paste it into the visualization editor.
Option 2: Upload the “Import” Sketch/PSD/image file directly in the visual editor, and imgcook will parse the layer information and restore it directly to the editor.
visual editing
In the imgcook visual editor, users can edit views, such as supporting dynamic expression styles, setting loops, and modifying layouts. You can also write logic code, bind fields, and so on.
Generate Code
The official provides commonly used DSLs (React/Vue/Mini Program DSL, etc.), click on the dropdown list to switch to using other DSLs. If you have special requirements, you can also customize DSL.
After the code is confirmed, you can click “Export”, or you can use the VS code imgcook plugin link to “Export”. This method can generate the entire module code file to the corresponding directory and continue to develop the entire project using VS code. Export the code to a local file, and store the images in a relative path in the images folder.
The application scenarios of Imgcook
Imgcook currently supports highly restored pages or modules for various scenarios. You can choose whether to use imgcook based on the following scenario categories.
Mobile fine-grained module development scenario – special recommendation
Mobile Activity Page – Special Recommendation
Mobile Full Page Development – Recommendation
PC ToC Application – Recommended
PC ToB application
PC rich interactive application – not recommended
Game Scenario – Not Recommended
How to use the imgcook plugin?
Make sure you are logged into your imgcook account.
In Figma, go to Plugins and select imgcook, and you should see a new export window.
Select any file layer group and click “Export”. Imgcook will pop up a prompt saying “Export successful, copied to clipboard!” and then click “Go to paste” to restore the layer.
Imgcook will open the editor in a new browser tab. Paste and restore it to the “ctr+v” editor, then save it as a module.
Is Imgcook free?
Imgcook is completely free, and users can use its provided plugins such as Figma, Sketch, VSCode to convert design drafts into code for free.