imgcook

Imgcook（图像大厨），由阿里巴巴-大淘宝技术部导购与营销产品团队研发推出，是一个致力于将设计稿智能转换为前端代码（D2C，Design to Code）的平台。它专注于接收Sketch、PSD或静态图片等形式的设计稿件，并通过智能化的技术手段一键自动生成易于维护的前端代码。这些生成的代码涵盖了视图层面、数据字段绑定、组件实现以及部分业务逻辑等核心内容。

Imgcook的核心特性主要包括：

快速恢复设计原型

在根据视觉设计图恢复生成相应的代码时，可以通过将设计元素的数据导入至imgcook可视化编辑工具来实现这一过程。此操作提供两种不同的方法：

第一种方法是先打开Sketch或PSD文件，然后利用已安装的imgcook插件提取设计稿内的图层数据，并将其内容复制并粘贴至可视化编辑器中。
第二种方法是在可视化工作者工具内直接加载和上传“引入”的Sketch、PSD或图像文件，系统将自动识别并导出这些图层至工作环境中。

图形化编辑工具

在 imgcook 的可视化编辑工具里，用户能够进行视图的调整与定制，例如应用动态表达式的样式设定、配置循环操作以及优化版面设计。此外，还支持编写逻辑脚本和关联特定数据字段等功能。

编写程序代码

官方提供了常见的 DSL 支持（如 React/Vue/小程序 DSL 等），通过点击下拉菜单可以轻松切换至其他 DSL 选项。若需特殊定制，则也可自定义自己的 DSL。

确定代码后，可以选择「导出」按钮进行操作；同样地，您还可以借助 VS Code imgcook 插件完成此步骤。这种方式会将整个模块的代码文件生成到指定目录中，并可直接在 VS Code 中继续开发项目。导出后的代码存于本地文件夹内，图片则以相对路径的形式保存在 images 文件夹下。

Imgcook的适用情景

目前，imgcook 能够精确复现各类页面及模块的设计稿尺寸。您可根据下面提供的应用场景类别来决定是否采用 imgcook 服务。

特别推荐：针对移动设备的精细模块化开发情境
特别推荐 – 移动端专享活动页面
推荐：全方位覆盖手机端的页面设计与开发
针对个人用户的 PC 端应用推荐
面向企业的 PC 端应用
不建议使用 PC 端富交互应用程序
游戏环境 – 建议避免使用

怎样操作imgcook插件呢？

请确认你已经成功登录至 imgcook 账号。
在 Figma 中导航至插件选项，然后选取 imgcook。这时，你会发现一个额外的导出界面出现。
挑选任一文件图层组后，点击“导出自定义选项”。此时，imgcook会显示一个提示框：“导出完成并已保存至剪切板!” ，接着，请点击“前往粘贴”以完成操作。
ImgCook将会在新浏览器标签页内启动编辑器，请将其复制并在该编辑器中进行粘贴操作（快捷键为”Ctrl+V”），最后保存为一个模块文件。

Imgcook是否提供免费服务呢？

Imgcook提供全方位的免费服务，允许用户通过其中集成的Figma、Sketch和VSCode等工具轻松地将设计方案转换为实际代码。