imgcook

设计稿一键智能生成代码

专注以各种图像 Sketch / PSD / 静态图片 为原材料烹饪的匠心大厨，通过智能化手段将各种视觉稿一键生成可维护的 UI 视图代码，期望此 imgcook 图像大厨 未来成为一位 P5 的重构工程师，能切实提高前端的开发效率，并助力前端、设计师、测试的高效协作

对于 UI 还原而言，早在多年前对于类似从设计稿中还原生成静态 UI 场景的解决方案也都涌现过，比如一些设计稿标注工具，又或目前的一些可视化建站平台也都能够在搭建完后直接产出线上页面 imgcook 的优势体现在哪？

回到 UI 还原主题上，当图像生成代码时，关心的不仅仅是生成 UI 的还原度，也关心生成的代码是否合理、可维护，如果生成的代码属于不可读不可维护的快餐代码，开发使用上再对其进行二次开发就会显得极为艰难，而往往后者的难度相比前者更甚，如果需要在生产环境中使用，这个问题就无法避免

对此 imgcook 的定位就在于解决 UI 还原以及生成可维护代码的问题

imgcook 的诞生源于业务，也最终服务于业务

场景使用层面上 imgcook 倾向于以页面中的模块级别维度来进行使用；对于模块本身 imgcook 也会倾向于一些轻交互逻辑的模块来进行使用

技术层面上 imgcook 对于支持 Flexbox 布局类型的 DSL 都会有一个比较好的支持（支持小程序、React、H5、Weex Rax 等）

安装

打开要还原的 Sketch 设计稿

一般前端都是模块化方式开发，推荐 一个模块一个模块 进行还原生成代码，期望还原的模块在一个分组内即可，对分组名没有要求。更多注意点可查看设计稿规范建议

如需多图层需合并为一个位图，在分组名后添加 合并 即可

选中分组执行 Plugins > imgcook > 导出数据或使用快捷键 command ⌘ + shift ⇧ + C 进行导出，在弹出的对话框，点击 去粘贴 后在自动弹出的浏览器窗口粘贴即可

在浏览器窗口保存后，点击右上角 代码 按钮

注意：代码中的域名 https://ai-sample.oss-cn-hangzhou.aliyuncs.com/ 下的图片，只能在特定域名下使用，如直接将图片链接复制到本地, 图片无法打开，建议使用 导出 功能，可将图片引用变为相对地址