图像大厨 imgcook
简介
imgcook（图像大厨）是阿里巴巴前端委员会智能小组推出的设计稿一键生成代码的平台。它能够将 Sketch、Photoshop 等设计稿或普通图片转化为前端代码，大幅提升研发效率。截至页面数据，已有 58,888 位用户上传了 138,983 个设计稿，累计生成 95,427,359 行代码，代码可用率高达 79%。
主要功能
支持多种设计稿类型
imgcook 支持 Sketch、Photoshop 设计稿以及普通图片（jpg、png 等）的导入。用户可以通过插件导出设计稿，或直接在编辑器中上传设计文件。
智能生成高可维护性代码
生成的代码具有合理的 DOM 嵌套、相对定位布局、语义化的 class 名称，并能自动识别循环结构，便于后续维护。
支持多种 DSL 输出
官方提供 10 种 DSL（领域特定语言），包括 React、Rax、Vue、小程序等，可生成对应类型的代码。用户还可以自定义 DSL，生成满足特定需求的代码。
丰富的集成方式
- 自定义插件：在导出代码时，可通过插件自动处理图片上传、文件目录转换等操作。
- imgcook CLI：命令行工具，可将生成的代码整合到本地项目中，并支持插件能力，无缝融入研发流程。
- VS Code 插件：提供 imgcook 编辑器插件，支持在 VS Code 中粘贴设计数据并生成代码，直接导出到指定文件夹。
- 自定义组件：通过开放的物质系统，开发者可以配置、识别、干预、渲染自己的组件，并输出对应代码。
适用场景
- 前端快速开发：设计师交付设计稿后，前端可直接生成代码，减少手动切图、布局和样式编写的工作量。
- 活动页面搭建：如天猫双十一活动页面，imgcook 已被大规模使用，显著提升开发效率。
- 企业内部平台集成：多家企业（如哈啰、有品街、阿里妈妈、优酷）已将 imgcook 集成到自身的研发流程中，通过定制 DSL、插件等能力，实现设计稿到代码的自动化。
案例与社区
- Haomo Tech：使用 Sketch 插件导出、自定义 DSL 和命令行，提高前端代码开发效率。
- Youpingjie：设计师通过设计素材管理和图层标注，与前端高效协作，减少沟通成本。
- Alimama：将 imgcook 核心能力无缝集成到智能单坑生产平台，并定制可视化编辑器。
- Youku：结合 imgcook 和低代码技术，构建智能素材生成平台，适配研发与业务生态。
社区支持包括掘金、知乎、GitHub 等渠道，并提供钉钉帮助、反馈及更新日志。
相关资源
- Sketch 插件 v4.2.8
- Photoshop 插件 v1.1.3
- 图片转代码（beta）
访问 imgcook 官网 即可进入工作区、画廊、开发者文档等模块。
