订阅 AI123 精选资讯,每周获取最新动态

立即订阅
Imgcook

阿里推出的免费设计稿智能生成前端代码

ToolDetail.web
5.0评分
188浏览量
Imgcook screenshot 1
1 / 1

产品介绍

产品是什么

NoneImgcook(图像大厨)是由阿里巴巴-大淘宝技术-导购和营销产品团队推出的设计稿智能生成前端代码(D2C,DesigntoCode)的平台,专注以Sketch、PSD、静态图片等形式的视觉稿作为输入,通过智能化技术一键生成可维护的前端代码,包含视图代码、数据字段绑定、组件代码、部分业务逻辑代码等。

如何使用

1
1. 访问官网并上传设计稿打开 https://www.imgcook.com,通过拖拽或点击上传您的 Sketch、PSD、静态图片或截图等设计文件。
2
2. 编辑与调整代码在平台界面中检查生成的代码结构,您可以根据需要编辑图层、修改组件命名、绑定逻辑字段或调整样式。
3
3. 导出与使用代码确认代码无误后,选择目标框架(如 React、Vue、微信小程序等),一键导出高质量的可用前端代码至本地或直接复制使用。

核心功能

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

目标用户

前端开发工程师UI/UX设计师产品经理全栈开发者

使用场景

将设计稿快速转换为前端代码
为移动端应用生成UI界面代码
将Sketch或PSD文件自动生成网页
从图片中提取设计元素并生成代码
加速设计师与开发者的协作流程