Imgcook

Imgcook：智能生成前端代码的平台

Imgcook是一个由阿里巴巴-大淘宝技术-导购和营销产品团队推出的设计稿智能生成前端代码（D2C，Design to Code）平台。该平台专注于将视觉稿（如Sketch、PSD、静态图片等）转换为可维护的前端代码。

主要功能

一键还原视觉稿：通过将视觉稿中的数据导出到Imgcook可视化编辑器中，可以还原生成代码。支持两种方式：打开Sketch/PSD文件，或将“导入”Sketch/PSD/图片文件直接上传到编辑器中。可视化编辑：在Imgcook可视化编辑器中，用户可以进行视图编辑、编写逻辑代码、绑定字段等操作。生成代码：官方提供了常用的DSL（React/Vue/小程序 DSL等），用户可以点击下拉列表选择其他DSL。如果需要，还可以自定义DSL。代码确定后导出：生成代码后，用户可以选择“导出”或将整个模块代码文件生成到相应目录，以便在VS Code中继续开发。

应用场景

移动端细粒度模块开发场景：特别推荐使用Imgcook进行移动端活动页和全页面开发。PC端toC应用：推荐使用Imgcook进行PC端的toC应用开发。PC端toB应用：也推荐使用Imgcook进行PC端的toB应用开发。PC端富交互应用：由于性能和兼容性问题，不建议使用Imgcook进行此类应用开发。游戏场景：同样不建议使用Imgcook进行游戏场景的开发。

如何使用Imgcook插件：

1. 确保已登录到Imgcook账户。
2. 在Figma中，转到Plugins并选择Imgcook。
3. 选择任意文件图层组，然后点击“导出”。Imgcook将弹出“导出成功，已复制到剪贴板！”提示弹出层，然后单击“转到粘贴”进行还原。
4. Imgcook将在新的浏览器选项卡中打开编辑器。将其粘贴并恢复到“ctr + v”编辑器中，然后另存为模块即可。

Imgcook是否免费：

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