imgcook

imgcook（图像大厨）解决的是设计稿到代码之间那段重复劳动：设计师给一张 Sketch 或 Photoshop 稿，前端照着量间距、写结构、起类名。它把设计稿导入后自动识别图层，生成 DOM 结构合理、用相对定位布局、类名有语义的代码，循环结构也能自动识别。除了设计稿，也支持直接上传图片转代码，这部分标注为 beta。

主要功能

官方提供 React、Rax、Vue、小程序等 10 种 DSL，生成不同类型的代码；不够用还可以自定义 DSL，让输出符合自己团队的写法。生成之后有几种方式接进研发流程：自定义插件可以在导出时处理产物，比如把图片自动传到自己的图床、转换目录结构；imgcook cli 把产物落到本地项目；VS Code 插件则能在编辑器里粘贴设计工具导出的数据，直接生成代码并导出到对应目录。组件方面提供开放物料系统，团队可以把自己组件库接进来，参与识别和渲染。

适合谁

面向前端开发者和需要与前端配合的设计团队。页面上列了高摩科技、悠桦林、阿里妈妈、优酷等接入案例，阿里前端团队内部也在大规模使用，2019 年天猫双十一活动页面生成后的代码可用率为 79.34%。

费用与限制

站点未标明收费方式，从公开页面看是免费使用的平台。登录方面，页面提示 GitHub 登录不稳定，建议尽快切换到钉钉登录。使用前需要先装 Sketch 插件（v4.2.8）或 Photoshop 插件（v1.1.3），或在编辑器里上传设计文件。生成代码的质量依赖设计稿图层是否规范，图层混乱时识别效果会打折扣。