Imgcook

推荐指数这方面，★★★☆☆ 至于最佳使用场景，

Imgcook是由阿里巴巴-大淘宝技术-导购和营销产品团队推出的设计稿智能生成前端代码的网站。专注以 Sketch、PSD、静态图片等形式的视觉稿作为输入，可维护的前端代码，包含视图代码、数据字段绑定、组件代码、部分业务逻辑代码等。按理说，

Imgcook的主要功能

一键还原视觉稿

从视觉稿中还原生成代码需要将视觉稿中的数据导出到 imgcook 可视化编辑器中还原生成代码。支持两种方式：

• 第1种的观点是，打开 Sketch/PSD 文件，通过安装好的 imgcook 插件将设计稿中的图层信息导出，粘贴到可视化编辑器中。
• 第2种的观点是。在可视化编辑器中直接上传“导入” Sketch/PSD/图片文件，imgcook 会解析图层信息直接还原到编辑器中。

可视化编辑

在 imgcook 可视化编辑器中。使用者可以对视图编辑，比如支持动态表达式样式、设置循环、修改布局。话说回来，还可以编写逻辑代码、绑定字段等。

生成代码

官方有提供常用的 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等插件来进行将设计稿免费转化为代码。老实说，