Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/imgcook/imgcook

Generate pages from any sketch or images.
https://github.com/imgcook/imgcook

design-to-code frontend machine-learning

Last synced: 25 days ago
JSON representation

Generate pages from any sketch or images.

Awesome Lists containing this project

README 

        
English | [简体中文](https://github.com/imgcook/imgcook/blob/master/README.zh-CN.md)



# imgcook



[imgcook](https://www.imgcook.com/) is an ingenious chef who specializes in cooking with various images (Sketch / PSD / static images). it will intelligently generate front-end codes, including view codes, data-binding codes, component codes as well as part of business logic codes from different kinds of design documents.。





  

    imgcook

  




We are making imgcook a P5 front-end engineer who could improve the development efficiency and promote the effective collaboration between front-end developers, designers and testers. We are looking forward to:



- 100% restore【Designer will not have to check how codes restore the design draft again】

- 100% compatible [Tester will not have to check the compatibility again]

- One-click Into Production [Front-end Developer will not have to do the slicing and bind the data. Taking the Tmall Double Eleven venue as an example, the current code availability is 79.43% (the code generated by imgcook and reserved after going online / the code on the total online code).



## Features



The main functions of imgcook are one-click restoration of design drafts and visual editing based on restoration.


The restoration of Sketch / Photoshop design drafts starts with the installation of plugins. Export the JSON description of the design draft through the plug-in in the design draft and paste it into the imgcook visual editor.


In the editor, you can edit the view, logic, etc. After generating the code, you can export the code to your local or your project file.


In addition to the visual draft restoration service, we also provide engineering efficiency tools such as imgcook-cli, imgcook VS Code plug-ins, and also support developer custom DSL, custom Plugin, etc.


In addition, we are also exploring the capabilities that AI has given to imgcook, such as image to code and text semantic understanding.


For the created modules, you can also manage them by team and project dimensions. If you want to see some featured cases, you can go to the square to view them.



## Scenes



imgcook currently supports highly restored for pages and modules in various scenarios. You can choose whether to use imgcook according to the following scenario classification. 



- Mobile fine-grained module development scenario - `Special recommendation`

- Mobile promotion pages - `Special recommendation`

- Mobile full page development - `Recommended`

- PC to consumer application - `Recommended`

- PC to business application

- PC rich-interactive application - `Not recommended`

- Game development - `Not recommended`



## Target Users



- **Designer** - Follow imgcook's design draft specifications to produce high-quality design drafts. Either give it to developers or try it by designers, you can achieve one-click restoration! 


- **Developer** -  standard design drafts + imgcook intelligent core + visualization platform: help developers delivery applications rapidly



## Who is using



The Alibaba front-end team is using imgcook on a large scale. The development efficiency of Tmall's Double Eleven Activity in 2019 has been greatly improved, and the code availability after generation (the number of code lines retained after going online accounts for the total number of online code lines) is 79.34%. The effect continues to improve.





  

    imgcook

  




## More Help



The document can't solve the problem? Don't worry. You could just join the user group in DingDing and ask whatever you are concerned. We are promised to quickly responses to any questions.

Community users Please scan the code to join Community group, Alibaba internal users Please join Internal group.



### Documentations



[https://www.imgcook.com/docs](https://www.imgcook.com/docs)



### Feedback



[https://github.com/taofed/imgcook/issues](https://github.com/taofed/imgcook/issues)



### DingTalk



**Community classmates** Please scan the code to join **Community group**，**Ali internal classmates** Please scan the code to join **Internal group**.



**Community group:**





    





**Internal group:**