Imgcook: Intelligent Code Generation from Design Drafts with a 100% Accuracy Rate

This article explains imgcook and various plug-ins to help with intelligent code generation.

By Suchuan from F(x) Team

Use imgcook to Generate Codes from the Design Draft

Imgcook is an intelligent code generation platform that helps you generate high-quality frontend codes from the design draft automatically.

Not sure what to do with messy design drafts from the design team? Did you know that the imgcook plug-in allows you to "merge" and "group" elements?

Read on to find out the answer to these questions!

In the Sketch plug-in, the "group" feature allows you to specify the nested structure of the generated codes.

The following figure shows the nested structure that I want:

You just need to select target layers and group them together!

The DOM tree generated will be exactly what you have expected:

In the Sketch plug-in, you can use the merge feature to integrate multiple layers into a single image.

This feature will not let you down.

For example, you can combine icons formed in multiple layers into a single image:

Select the layers you want to put together and merge them.

You can combine multiple layers that generate a specific atmosphere into a single image.

Just select the layers that you want to put together and merge them:

Select the layers you want to put together and merge them.

imgcook supports automatic merging and grouping.

Manual "merge" and "group" actions are unnecessary for the automatic generation of highly maintainable codes.

If your design draft is not well organized, you will love this feature!

Use "merge" and "group" together

You can generate 100% accurate codes:

View the generated code

Visit Imgcook and generate your code now! Time to say goodbye to those simple, repetitive, and burdensome tasks!

0 0 0

Share on