Imgcook

概述

Imgcook（图像大厨）是阿里巴巴推出的一款 Design to Code（D2C） 工具，面向前端开发与设计协作场景，支持将 Sketch、PSD、Figma 以及静态图片等设计稿 智能还原为前端代码。
它的核心目标是帮助团队缩短设计稿到可维护代码的转换流程，提高页面搭建和模块开发效率。

与简单的切图工具不同，Imgcook 不仅能生成视图结构代码，还支持一定程度的 数据字段绑定、组件生成、样式调整和部分业务逻辑编排，更适合用于活动页、移动端页面模块等标准化程度较高的开发任务。

主要功能

• 设计稿一键还原为代码

  • 支持通过插件或导入方式解析 Sketch、PSD、图片等设计稿内容
  • 可将图层信息还原到可视化编辑器中，再进一步生成代码

• 可视化编辑能力

  • 在编辑器中调整布局、样式与结构
  • 支持设置循环、动态表达式样式等
  • 可进行字段绑定与部分逻辑配置

• 多种代码生成方式

  • 官方提供常见 DSL，可用于生成 React、Vue、小程序 等前端代码
  • 支持切换不同 DSL
  • 有特殊需求时可自定义 DSL 方案

• 插件与开发工具协同

  • 可配合 Figma、Sketch、VS Code 等插件使用
  • 支持从设计工具导出图层信息，到编辑器中粘贴还原
  • 支持将生成后的模块代码导出到本地目录，便于继续在工程中开发

• 适合页面与模块还原场景

  • 较适合移动端细粒度模块开发
  • 适合移动端活动页与部分整页开发
  • 可用于部分 PC 端 ToC 页面场景
  • 对高复杂度富交互应用或游戏类场景支持相对有限

产品定价

根据公开信息，Imgcook 目前可免费使用。
用户可通过其提供的 Figma、Sketch、VS Code 等插件，将设计稿转换为代码而无需额外付费。实际功能和可用范围建议以官网最新说明为准。

常见问题

Imgcook 支持哪些输入格式？

目前公开资料显示，Imgcook 支持 Sketch、PSD、Figma 以及静态图片 等形式的设计稿输入，具体方式包括插件导出和编辑器导入。

Imgcook 能生成哪些代码？

Imgcook 可生成前端页面或模块代码，常见包括 React、Vue、小程序 等 DSL 对应的代码，同时可能包含视图结构、样式、字段绑定和部分逻辑代码。

Imgcook 适合什么场景？

更适合 移动端模块开发、活动页搭建、标准化页面还原 等场景。如果项目包含大量复杂交互、自定义动画或高自由度逻辑，通常仍需要开发者进行较多二次调整。

Imgcook 是否完全替代前端开发？

不能。Imgcook 更适合作为 提效工具，帮助完成设计还原与基础代码生成，但在工程集成、复杂交互、业务逻辑完善和性能优化等方面，仍需要前端开发者继续处理。