ImgCook

定义

ImgCook 是一款把视觉设计稿自动转换为前端代码的工具，其名称由英文 image 与 cook 组合而来，中文常称作「图像大厨」^[3]。它的输入是 Sketch、PSD 源文件或普通图片，输出则是可以直接放入工程中使用的前端代码^[1]。这类「设计稿转代码」的技术方向在业内被称为 D2C，即 Design to Code 的缩写^[6]。

ImgCook 的定位并不止于像素层面的视觉还原，还强调生成代码的结构与可读性，力求产出开发者能够继续维护和二次开发的代码，而不是只能一次性使用的产物^[2]。

原理

ImgCook 的核心可以概括为两件事：先从视觉稿中识别信息，再把这些信息表达成代码^[5]。具体做法是借助设计工具插件导出 JSON 描述信息，再通过规则系统、计算机视觉与机器学习等技术逐层处理这些 JSON，最终得到符合代码结构与语义的 JSON，再由 DSL 转换器输出代码^[5]。以 Sketch 为例，插件的导出结果是一份符合 ImgCook 规范、以绝对定位描述元素位置与样式的 JSON 数据^[6]。

在识别环节，ImgCook 把「找到界面中特定类型的组件」定义为目标检测或图像分类任务，用深度学习模型判断某个节点属于按钮、搜索框、开关还是标签栏等类别，并给出位置与类别信息^[7]。训练这类模型时使用了迁移学习，以 ResNet、MobileNet 等在 ImageNet 上预训练过的网络为基础，再用业务样本做调整，以降低数据与算力的需求^[8]。对于淘宝常见的轮播与视频组件，专门训练的识别模型准确率可达 82%，并已在双 11、聚划算等业务中应用^[9]。

识别之后还要经过图层再加工与布局计算：过滤无用图层、合并可视为整体的图层、推断相对定位布局与循环结构，并把样式类名语义化^[6][3]。逻辑层面则引入自然语言处理与图像分类等手段，例如用分词算法和朴素贝叶斯判断文案属于哪类利益点、用图像分类识别白底商品图，从而自动完成字段绑定^[10]。生成的中间结果在编辑器中可视化呈现，用户可以人工干预后再导出^[5]。

发展历程

ImgCook 由阿里巴巴淘系技术团队研发，是阿里巴巴前端智能化方向的落地产品之一^[2]。2017 年，关于图像转代码的 Pix2Code 论文引发业界讨论，随后 2018 年微软开源了手绘草图转代码的 Sketch2Code，这些工作为 D2C 方向提供了思路参考^[2]。

2019 年，阿里巴巴正式对外开放智能生成代码平台 ImgCook，同年双 11 大促中，天猫淘宝会场新增模块有 79.34% 的线上代码由前端智能化项目自动生成^[5][6]。据阿里巴巴方面统计，2020 年双 11 会场新增模块的智能生成覆盖度达到 90.4%，无人工辅助情况下生成并被保留发布的代码占 79.26%，编码效率提升约 68%^[5]。

2021 年，ImgCook 的技术团队在 GMTC 全球大前端技术大会上介绍了 AI 技术在该平台中的应用场景与落地实践^[11]。此后，ImgCook 也作为能力组件被接入大模型辅助编码的流程：有实践将 ImgCook 插件与智能体、组件库结合，把代码可用度从 40% 提升到 70%^[12]。

应用

ImgCook 的典型使用方式面向页面中的模块层级，尤其适合轻交互逻辑的模块^[2]。用户在 Sketch 或 Photoshop 中安装插件导出图层数据，或直接在编辑器中上传设计文件，随后选择目标 DSL 即可生成代码^[1]。官方提供 React、Rax、Vue、小程序等约 10 种 DSL，用户也可以自定义 DSL 以生成符合自身需求的代码^[3]。

为接入研发流程，ImgCook 提供了多种扩展方式：导出时可使用自定义 Plugin 处理代码产物，例如自动上传图片到自有图片空间或做文件目录转换；ImgCook CLI 可以把平台生成的代码产物直接放入本地工程；此外还有面向 VS Code 的编辑器插件^[3]。在物料体系上，平台支持自有组件库的可配置、可识别、可渲染与可出码^[3]。

公开的使用案例来自多个团队。毫末科技前端团队使用 Sketch 插件导出、自定义 DSL、CLI 命令行与 Plugin 等能力，从 2020 年 2 月 3 日到 2021 年 5 月 25 日在平台创建模块 2000 余个，覆盖 60 多个前端项目^[3]。优品街设计团队在 2020 年 5 月 25 日至 2021 年 6 月 3 日间创建模块 1100 余个，覆盖 20 多个前端项目^[3]。阿里妈妈联盟团队与优酷前端团队则把 ImgCook 的核心能力嵌入各自的平台链路，分别用于智能单坑制作投放和智能物料生成^[3]。

局限

ImgCook 生成的代码并非总能直接上线。按 D2C 的能力分级，它处于 L3 条件式智能生成阶段，即系统可自动生成视图代码与逻辑代码，但仍需人工做可视化干预或开发验证后才能发布^[13]。这意味着仍存在一定比例的结果需要人工修正。

在对比评测中，ImgCook 的还原能力也存在被指出的不足。美团技术团队在 2021 年发布的方案对比中提到，测试样本里 ImgCook 对图层重叠区域采用了基于根布局的绝对定位方式，与前端开发者预期的相对定位不符，代码可读性一般，并且在测试样本中未能识别出循环布局^[4]。同一份对比也指出，ImgCook 从开发者视角构建了一个 IDE，支持在 IDE 中完成样式调整与逻辑绑定，而该团队自身的方案则从产研协作视角出发^[4]。

识别模型的适用范围也受训练样本限制。组件识别模型只认识训练时给定类别的组件，例如训练样本仅包含按钮、搜索框、步进器、输入框、开关与标签栏时，模型不会识别出进度条等其他类型^[14]。此外，设计稿中静态文案的多样性会影响字段绑定的准确性，官方也曾把梳理不同业务场景的静态文案、优化自然语言处理与图像分类模型列为后续工作方向^[8]。

参见

• 设计稿转代码 —— ImgCook 所属的技术方向，指把界面设计稿自动转换为前端代码。

• 计算机视觉 —— ImgCook 用于识别设计稿中图层与组件的关键技术之一。

• 深度学习 —— ImgCook 组件识别与图像分类模型所依赖的方法。

• 目标检测 —— 用于在界面中定位特定类别组件的一类计算机视觉任务。

• 迁移学习 —— ImgCook 训练识别模型时采用的方式，以预训练网络为基础再调整。

• 阿里巴巴 —— ImgCook 的研发与运营方。