Imgcook（图像大厨）是由阿里巴巴-大淘宝技术-导购和营销产品团队推出的设计稿智能生成前端代码（D2CDesigntoCode）的平台专注以Sketch、PSD、静态图片等形式的视觉稿作为输入通过智能化技术一键生成可维护的前端代码包含视图代码、数据字段绑定、组件代码、部分业务逻辑代码等。
Imgcook的主要功能
一键还原视觉稿
从视觉稿中还原生成代码需要将视觉稿中的数据导出到imgcook可视化编辑器中还原生成代码支持两种方式：
第1种：打开Sketch/PSD文件通过安装好的imgcook插件将设计稿中的图层信息导出粘贴到可视化编辑器中。
第2种：在可视化编辑器中直接上传“导入”Sketch/PSD/图片文件imgcook会解析图层信息直接还原到编辑器中。
可视化编辑
在imgcook可视化编辑器中用户可以对视图编辑比如支持动态表达式样式、设置循环、修改布局。还可以编写逻辑代码、绑定字段等。
生成代码
官方有提供常用的DSL（React/Vue/小程序DSL等）点击下拉列表可切换使用其他DSL。如果有特殊诉求你也可以自定义DSL。
代码确定后可点击「导出」你也可以使用VScodeimgcook插件链路「导出」此方式可以将整个模块代码文件生成到相应目录直接继续使用VScode开发整个项目即可。导出后的代码到本地文件中图片以相对路径的形式存放在images文件夹下。
Imgcook的应用场景
imgcook目前支持各种场景的页面或模块的高度还原您可以根据以下场景分类选择是否使用imgcook。
移动端细粒度模块开发场景-特别推荐
移动端活动页-特别推荐
移动端全页面开发-推荐
PC端toC应用-推荐
PC端toB应用
PC端富交互应用-不推荐
游戏场景-不推荐
如何使用imgcook插件？
确保你已登录到imgcook帐户。
在Figma中转到Plugins并选择imgcook你应该看到一个新的导出窗口。
选择任意文件图层组然后点击“导出”。imgcook将弹出“导出成功已复制到剪贴板！”提示弹出层然后单击“转到粘贴”进行还原。
imgcook将在新的浏览器选项卡中打开编辑器。将其粘贴并恢复到“ctr+v”编辑器中然后另存为模块即可。
Imgcook是免费的吗？
Imgcook是完全免费的用户可以使用其提供的Figma、Sketch、VSCode等插件来进行将设计稿免费转化为代码。
