imgcook 是一款面向设计稿到前端代码转换的开发工具。它可以接收 Sketch、Photoshop、Figma 设计文件以及图片文件，通过计算机视觉、深度学习等技术解析设计内容，生成 React、Rax、Vue、小程序等类型的代码。与仅提供图片识别或单一框架导出的工具相比，imgcook 支持 10 种官方 DSL，并允许用户自定义 DSL；同时提供 Plugin、CLI、VS Code 编辑器插件和自定义组件能力，使生成结果能够继续接入本地项目与既有研发链路。官网展示的使用案例包括阿里系前端团队、设计团队以及物料生成平台。
核心功能
设计文件与图片解析
imgcook 支持通过插件导出设计数据，也支持在编辑器中直接上传文件。官网列出的输入类型包括 Sketch 文件、PS 文件和图片文件，页面同时说明支持 4 种类型设计稿文件。通过插件导出时，设计文件的数据需要导入 imgcook 编辑器，或者直接在编辑器中上传设计文件进行处理。
智能还原页面结构
平台采用计算机视觉、深度学习等智能化技术，对设计稿中的页面内容进行解析。生成结果会关注 DOM 嵌套结构、相对定位布局和 ClassName 语义化，并能够自动识别循环结构。官网将这部分能力用于设计稿的页面还原，但正文没有说明所有复杂设计元素都能被完整转换。
多类型代码生成
imgcook 官方提供 React、Rax、Vue、小程序等 10 种 DSL，用于生成不同类型的代码。用户还可以自定义 DSL，生成满足自身需求的代码，因此输出类型不局限于官网默认提供的几种框架。首页展示了通过 Photoshop 或 Sketch 生成 H5、Vue 和 React 代码的实际记录。
自定义 DSL、组件与物料体系
开发者可以使用自定义 DSL 调整代码生成方式，也可以在平台中使用自有组件。开放的物料体系支持组件库配置、组件识别、组件干预和组件渲染，适用于需要将自身组件纳入设计稿解析与出码流程的团队。官网还提到设计物料管理和设计稿图层标记等能力被用于设计团队协作。
Plugin、CLI 与 VS Code 集成
在导出生成代码时，可以使用自定义 Plugin 对代码产物进行处理，例如自动上传图片到自己的图片空间、转换文件目录等。imgcook-cli 能结合 Plugin，将平台生成的代码产物一键放置到本地项目工程中。官方提供的 VS Code imgcook 编辑器插件，则支持把设计工具导出的数据粘贴到编辑器中生成代码，并导出到对应文件夹。
使用方式
imgcook 支持插件导出和网页编辑器上传两种主要方式。官网列出了 Sketch、PS、Figma 插件下载入口，以及 Sketch、PS、图片文件上传入口；设计数据可以粘贴或上传到 imgcook 编辑器。研发侧还可以使用 imgcook-cli、自定义 Plugin 和 VS Code imgcook 编辑器插件。登录方面，官网提示 Github 登录不稳定，并建议切换至钉钉登录。正文没有说明是否必须注册、是否需要自备模型 Key，也没有提供开放 API 的说明。
适用人群与场景
前端开发团队可以用它把设计稿转换为 React、Vue、Rax、H5 或小程序等代码，再通过 CLI、Plugin 和 VS Code 插件接入本地工程。设计团队可以使用设计物料管理、图层标记和代码导出能力，减少与前端之间的沟通。需要建设内部物料平台的企业，可以通过自定义 DSL、组件库和开放物料体系适配自身业务。官网案例还展示了它被用于智能物料生成、可搭建物料开发和研发流程整合。
注意事项
官网提示 Github 登录不稳定，建议尽快切换至钉钉登录。代码生成结果依赖设计文件解析与 DSL 配置，页面虽然展示了代码可用率数据，但正文没有承诺所有生成代码无需人工调整即可上线。
