Imgcook

Imgcook：智能设计稿生成前端代码平台

Imgcook（图像大厨）是由阿里巴巴大淘宝技术导购和营销产品团队推出的设计稿智能生成前端代码（D2C，Design to Code）平台。该工具专注以Sketch、PSD、静态图片等形式的视觉稿作为输入，通过智能化技术一键生成可维护的前端代码，内容涵盖视图代码、数据字段绑定、组件代码以及部分业务逻辑代码。

核心功能介绍

• 一键还原视觉稿：支持将视觉稿数据导出至imgcook可视化编辑器中还原生成代码，具体提供两种操作方式：
  • 插件导出：打开Sketch或PSD文件，通过imgcook插件导出设计稿图层信息，粘贴至可视化编辑器。
  • 直接导入：在可视化编辑器中直接上传导入Sketch、PSD或图片文件，系统会自动解析图层信息并还原。
• 可视化编辑：在imgcook可视化编辑器内，用户不仅可以对视图进行编辑，如设置动态表达式样式、修改布局和设置循环，还能直接编写逻辑代码以及绑定字段。
• 代码生成与导出：官方提供React、Vue、小程序等常用DSL，支持下拉切换或根据特殊诉求自定义DSL。代码确认后可直接点击导出，也可使用VS Code imgcook插件将整个模块代码文件生成到相应目录，方便继续开发。导出到本地的代码中，图片会以相对路径形式存放在images文件夹下。

应用场景与推荐度

imgcook目前支持各种场景的页面或模块的高度还原，不同场景的适用程度如下：

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

Figma插件使用指南

1. 确保已登录imgcook账户。
2. 在Figma中进入Plugins并选择imgcook，此时会弹出一个新的导出窗口。
3. 选择任意文件图层组后点击“导出”，系统会提示“导出成功，已复制到剪贴板！”，接着单击“转到粘贴”进行还原。
4. imgcook会在新的浏览器选项卡中打开编辑器，使用“Ctrl+V”将内容粘贴并恢复，最后另存为模块即可。

费用说明

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