Over the past few years AI Break in in full fury , In some areas, the application is gradually mature . Front end development up to now , We also have a lot of mature front-end solution code , There are a lot of design drafts , Whether we can combine the ability of intelligence to make a Design To become a Code （ Design to code , abbreviation D2C） To improve the effect , Liberate the front end from a resource-based role and devote its energy to other professional fields of the front end ？ TaoBao D2C In the past two years, the intelligent team has also made a lot of exploration in this direction , In the end D2C The ability to carry to imgcook On this product .
imgcook What is it?
imgcook It's focused on images （Sketch/PSD/ static picture ） Cooking for raw materials , Through intelligent means to generate various images into maintainable UI View code , Expect this imgcook ( Image chef ) The future can be a P5 Level of refactoring Engineer , Can effectively improve the development efficiency of development , And help develop 、 The designer 、 Efficient collaboration of testing , We expect to do ：
vision ： Can highly restore various images , Release UI Develop productivity , Let you focus on more challenging things ！
Why do it imgcook ？
about UI In terms of reduction , Many years ago , Similarly, the static state is generated from the design draft UI Solutions for scenarios have sprung up , For example, some design annotation tools （ Such as Marketch）, In other words, some of the current visual station building platforms can also produce online pages directly after construction , that imgcook Where is the advantage of ？
We go back to UI Restore the theme , When we talk about image generation code , We're not just concerned with generating UI Reduction degree of , Also concerned about whether the generated code is reasonable 、 Maintainable , If the generated code belongs to non readable and non maintainable fast food code , It will be very difficult to develop and use it again , And often the latter is more difficult than the former , If you need to use it in a production environment , This problem cannot be avoided .
Regarding this ,imgcook The positioning is to solve UI Problems with restoring and generating maintainable code .
▐ The draft is unconstrained + High reduction
about UI Restore , From the current design tools are more common （ such as Sketch、PS） Starting with . But what's more unsatisfactory is , The structured information in the design draft delivered by the designer is often disordered , If you need to analyze the structured data of a module in a design draft accurately , Often need to cooperate with designers , Standardize the design in the design draft and make some constraints to use , This will increase the cost of use to a certain extent .
imgcook To solve this problem , At present, some intelligent processing has been done on the analysis of the design draft , Remove the dependence on the designer layer design specification （ Of course, good design specifications will make the restoration effect even better ！）, Only one specification that developers may use to do it is reserved UI Restore .
▐ Generating maintainable code
For the problem of maintainability code ,imgcook It will restore the UI At the code level, it is widely used Flexbox Layout and relative positioning layout , On some custom names （ For example, style naming ）,imgcook It will also generate more user-friendly names according to the habits of developers .
How to use imgcook ？
imgcook In the current external experience version , Open up for Sketch Design draft and PSD Restore plug-in of design draft , With Sketch For example , The whole export process is as follows ：
1. Plug in export module
In the use of Sketch When the plug-in is restored , You can select a container node outside the module （ Drawing board 、Group perhaps Symbol） To export .
2. Paste and restore
After the module is exported , You can go to imgcook Paste and restore the platform .
3. Save the reference code
Check module restore UI And the layout on the left is correct , It can be preserved -> Look up the code , In the current external experience version imgcook Several options are offered DSL Code generation , For each DSL, It can be on the right playground Check the effect of the specific operation .
What scenarios to use imgcook ？
imgcook The birth of the business , And ultimately serve the business .
Facing the future
Facing the future ,imgcook Still ploughing, more UI Recognition ability , Such as Input/Table/Select Such as front-end basic control recognition 、 Popular in the industry Antd/Fusion Such as front-end component library identification , You can even customize the identification capabilities of unique business components for vertical businesses , We hope imgcook Can really bring more efficiency to the front end .