{"id":8290,"date":"2024-04-17T09:49:19","date_gmt":"2024-04-17T01:49:19","guid":{"rendered":"https:\/\/www.1ai.net\/?p=8290"},"modified":"2024-04-17T09:49:19","modified_gmt":"2024-04-17T01:49:19","slug":"imgcook%ef%bc%9a%e5%85%8d%e8%b4%b9%e8%ae%be%e8%ae%a1%e7%a8%bf%e6%99%ba%e8%83%bd%e7%94%9f%e6%88%90%e5%89%8d%e7%ab%af%e4%bb%a3%e7%a0%81%e5%b7%a5%e5%85%b7","status":"publish","type":"post","link":"https:\/\/www.1ai.net\/en\/8290.html","title":{"rendered":"Imgcook: Free design draft intelligent generation front-end code tool"},"content":{"rendered":"

\"image-151\"<\/p>\n

Imgcook<\/a> It is a tool that can convert designs into codes. It can help front-end developers improve development efficiency and help companies reduce labor costs. It is produced by Alibaba.<\/p>\n

imgcook\u00a0<\/span><\/strong>We focus on using visual drafts in the form of Sketch, PSD, static images, etc. as input, and use intelligent technology to generate maintainable front-end code with one click, including view code, data field binding, component code, some business logic code, etc.<\/span><\/p>\n

imgcook<\/strong>\u00a0The main function of the visual<\/span>One-click<\/span>reduction<\/span>and visual editing based on restoration<\/span>,Sketch\/Photoshop<\/strong>\u00a0The restoration of the design draft starts with installing the plug-in, and exporting the visual draft through the plug-in in the design draft\u00a0JSON<\/strong>\u00a0Paste the description into\u00a0imgcook<\/strong> A visual editor in which you can perform view editing, logic editing, etc. After generating the code, you can export the code to a local computer or your project file.<\/span><\/p>\n

Imgcook Features<\/strong><\/span><\/h2>\n

Supports multiple design types: export designs using plugins or upload design files in the Imgcook editor.<\/p>\n

Intelligent and highly maintainable: reasonable DOM nesting, relative positioning layout, semantic class names and automatic loop identification.<\/p>\n

Support 10 types of code generation: The official provides 10 DSLs, such as react, rax, Vue, and mini-programs, which can generate different types of code. Users can also customize DSL to generate any code that meets their needs.<\/p>\n

Integration into R&D process: Provides multiple ways to seamlessly connect to your R&D process after code generation.<\/p>\n

Custom plug-ins: When using Imgcook to export the generated code, you can use custom plug-ins to process the code products, such as automatically uploading images to your own image space, file directory conversion, etc.<\/p>\n

Imgcook CLI: Imgcook CLI can integrate the code products generated by the Imgcook platform into your local project and integrate them seamlessly into your R&D process through plug-in capabilities.<\/p>\n

Imgcook Visual Studio: To match the powerful engineering capabilities of VS Code, we provide the VSCode Imgcook editor plug-in. You can paste the data exported by the design tool into the VSCode Imgcook editor plug-in to generate code and export it to the corresponding folder directory.<\/p>\n

Custom components: In order to allow developers to use their own components on the Imgcook platform, we provide an open material system that supports the configurability, identifiability, intervention, rendering and code output of the component library.<\/p>\n

Official website address:https:\/\/www.imgcook.com\/\u00a0<\/a><\/p>","protected":false},"excerpt":{"rendered":"

Imgcook is a tool that can convert design into code, which can help front-end developers to improve development efficiency, while helping companies to reduce labor costs, produced by Alibaba. imgcook focuses on Sketch, PSD, static images and other forms of visual scripts as input, through intelligent technology to generate maintainable front-end code, including view code, data field binding, component code, part of the business logic code and so on. The main function of imgcook is one-click visual script restoration and visual editing based on the restored visual script. The restoration of Sketch\/Photoshop design scripts starts from installing the plug-in, and the JSON description information of the visual scripts is exported from the design scripts through the plug-in and pasted into imgcook for visual editing.<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[138,139],"tags":[1124,596,2276],"collection":[],"class_list":{"0":"post-8290","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"hentry","6":"category-product","7":"category-daima","8":"tag-ai","10":"tag-imgcook"},"acf":[],"_links":{"self":[{"href":"https:\/\/www.1ai.net\/en\/wp-json\/wp\/v2\/posts\/8290","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.1ai.net\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.1ai.net\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.1ai.net\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.1ai.net\/en\/wp-json\/wp\/v2\/comments?post=8290"}],"version-history":[{"count":0,"href":"https:\/\/www.1ai.net\/en\/wp-json\/wp\/v2\/posts\/8290\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.1ai.net\/en\/wp-json\/wp\/v2\/media?parent=8290"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.1ai.net\/en\/wp-json\/wp\/v2\/categories?post=8290"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.1ai.net\/en\/wp-json\/wp\/v2\/tags?post=8290"},{"taxonomy":"collection","embeddable":true,"href":"https:\/\/www.1ai.net\/en\/wp-json\/wp\/v2\/collection?post=8290"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}