Imgcook：智能化的图像到代码转换工具

Imgcook（图像大厨）是由阿里巴巴的淘宝技术团队推出的一个平台，旨在将设计稿智能地转化为前端代码（D2C，Design to Code）。该平台能够支持通过 Sketch、PSD、静态图片等格式的视觉设计文件，通过智能化技术一键生成高质量的前端代码，包括视图代码、数据绑定、组件代码以及部分业务逻辑代码等。

Imgcook的核心功能

一键还原设计稿

将视觉设计稿转化为代码的过程，用户可以通过将设计稿的数据导入到 imgcook 可视化编辑器中进行还原，支持以下两种方式：

• 第一种方式：用户可以打开 Sketch 或 PSD 文件，并通过安装的 imgcook 插件将设计稿中的图层信息导出，粘贴到可视化编辑器中。
• 第二种方式：用户也可以直接在可视化编辑器中上传 Sketch、PSD 或图片文件，imgcook 会自动解析图层信息并还原到编辑器中。

可视化编辑

在 imgcook 的可视化编辑器中，用户可以对设计视图进行修改，例如支持动态表达式样式、设置循环、调整布局等操作。此外，还可以编写逻辑代码、绑定数据字段等，进一步实现项目需求。

生成代码

imgcook 提供了常用的 DSL（如 React/Vue/小程序 DSL 等），用户可以在下拉列表中选择其他 DSL 进行切换。如果有特殊需求，用户还可以自定义 DSL。

在生成代码之后，用户可以点击「导出」，也可以使用 VS Code imgcook 插件进行链路「导出」，这种方式可以将整个模块的代码文件生成到指定目录，方便在 VS Code 中继续开发项目。导出的代码将存储在本地文件夹中，图片资源会以相对路径的形式保存在 images 文件夹中。

Imgcook的适用场景

Imgcook 目前支持各种场景下的页面或模块高度还原，您可以根据以下应用场景决定是否使用该平台：

• 移动端细粒度模块开发场景 – 强烈推荐
• 移动端活动页面 – 强烈推荐
• 移动端全页面开发 – 推荐
• PC 端 ToC 应用 – 推荐
• PC 端 ToB 应用
• PC 端富交互应用 – 不推荐
• 游戏场景 – 不推荐

如何使用 imgcook 插件？

1. 首先确保您已经登录到 imgcook 账户。

2. 在 Figma 中，打开 Plugins 面板，选择 imgcook 插件，您会看到一个新的导出窗口。

3. 选择需要导出的文件图层组，然后点击“导出”按钮，imgcook 会弹出提示“导出成功，已复制到剪贴板！”。此时，点击“转到粘贴”进行还原操作。

4. imgcook 会在新的浏览器选项卡中打开编辑器。将复制的内容粘贴到编辑器中（按「Ctrl + V」），然后可以保存为模块。

Imgcook是否免费？

是的，Imgcook 是完全免费的。用户可以利用其提供的 Figma、Sketch、VSCode 等插件，将设计稿免费转换为代码。