Imgcook

Imgcook（图像大厨）是由阿里巴巴的技术团队推出现的一个平台，用于智能生成前端代码（D2C，Design to Code），专注于从 Sketch、PSD、静态图片等视觉稿中，通过智能化技术一键生成可维护的前端代码，包罗视图代码、数据字段绑定、组件代码以及部分业务逻辑代码等。

Imgcook的核心功能

一键恢复视觉稿

要将视觉稿转换为代码，需要将视觉稿中的数据导入 imgcook 可视化编辑器，支持以下两种方式：

• 第一种：通过安装的 imgcook 插件打开 Sketch/PSD 文件，导出设计稿中的图层信息，并粘贴到可视化编辑器。
• 第二种：直接在可视化编辑器中上传 “导入” Sketch/PSD/图像文件，imgcook 会解析图层信息并恢复到编辑器中。

可视化编辑功能

在 imgcook 可视化编辑器内，用户可以对视图进行编辑，例如支持动态表达式样式、设置循环以及修改布局。同时，还可以编写逻辑代码、绑定数据字段等。

代码生成

官方提供了多种常用的 DSL（如 React、Vue、小程序 DSL 等），用户可以通过下拉列表切换使用不同的 DSL。如有特别需求，还可自定义 DSL。

确定代码后，点击“导出”，也可以使用 VS code imgcook 插件进行“导出”，此方式能够将整个模块代码文件生成到指定目录，用户可以直接继续使用 VS code 开发整个项目。导出后的代码保存在本地文件中，图像以相对路径的方式存放在 images 文件夹中。

Imgcook的使用场景

目前，imgcook 支持各种场景下页面或模块的高度还原，用户可根据以下场景分类选择是否使用 imgcook。

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

如何使用 imgcook 插件？

1. 确保你已经登录到 imgcook 账户。

2. 在 Figma 中，前往 Plugins 并选择 imgcook，应该会弹出一个新的导出窗口。

3. 选择任意文件图层组，点击“导出”。 ImgCook 将会弹出“导出成功，已复制到剪贴板！”的提示，接着点击“转到粘贴”进行恢复。

4. imgcook 会在新的浏览器选项卡中打开编辑器。 将内容粘贴到“ ctr + v”编辑器中，然后另存为模块即可。

Imgcook是免费的吗？

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