Imgcook
阿里推出的免费设计稿智能生成前端代码
将设计稿一键转换为高质量前端代码,支持React/Vue/小程序等多种框架
核心功能
一键还原视觉稿
通过插件将Sketch/PSD设计稿导出或直接在编辑器中上传文件,AI自动解析图层信息生成代码。
可视化在线编辑
在网页编辑器中直接修改视图布局、设置循环表达式、调整样式,还能绑定数据字段和编写逻辑代码。
多框架代码生成
官方提供React、Vue、Rax、微信小程序等10种DSL,点一下下拉菜单就能切换,也可以自定义DSL。
CLI与插件集成
提供imgcook-cli和VS Code插件,生成的代码可一键放置到本地项目工程,无缝融入现有研发流程。
自定义物料体系
支持接入团队自己的组件库,平台可识别、可渲染、可出码,生成代码直接调用私有组件。
组件智能识别
基于深度学习自动识别设计稿中的按钮、输入框、卡片等组件,准确率达92%,减少手动调整成本。
布局语义化还原
AI生成合理的DOM嵌套结构和相对定位布局,自动识别循环结构,布局还原度达92%以上。
图片字段绑定
智能识别营销场景中可绑定的数据字段,一键生成视图代码与数据字段绑定代码,减少手工关联的工作量。
产品特色
- 01
阿里内部实战验证,不是实验室玩具
从2019年开始就在淘宝双十一等超高流量场景中反复打磨,某年大促期间承接了78.94%的新增模块代码自动生成,代码可用率做到了79.34%,这数据不是随便哪个工具敢放出来的。
- 02
完全免费,阿里没打算靠这个赚钱
平台对所有用户免费开放,核心功能和插件全部免费用,不用买会员也不用绑定信用卡。有用户调侃"阿里财大气粗做生态,没想赚小钱",对个人开发者和中小企业确实良心。
- 03
支持自定义组件和DSL,不锁死你
很多D2C工具生成的都是div+span,实际开发要用业务组件。Imgcook允许你接入自己的组件库、写自定义DSL,生成的代码直接调用团队私有组件,不用二次重构。
- 04
从设计稿到工程代码一条龙打通
不只是生成一段代码片段就完事了。配合VS Code插件和CLI工具,能把代码直接落进项目文件夹,图片自动存到images目录,开发者在IDE里接着写就行,工作流完全不断。
- 05
技术栈硬核,CV+深度学习双管齐下
底层用计算机视觉解析布局和图层,深度学习模型识别组件分类,规则算法处理循环和定位,三层技术叠加,最后用DSL转换器输出框架代码,不是简单的模板匹配。
- 06
研发效率提升看得见
有业务线使用后页面开发周期从5人天缩短到1.5人天,设计师和前端协作效率提升40%。70%的阿里前端在用它,累计创建模块数万、覆盖上千个项目。
- 07
上手门槛极低,设计师也能玩
不用懂React也不用会写JSX,设计师自己就能在可视化编辑器里调布局、改样式、绑字段,减少跟前端反复对齐的沟通成本。优品街等团队已经在用这个方式做设计物料管理。
- 08
支持多格式输入,Figma/Sketch/PSD都行
插件适配Sketch、Figma、Photoshop,不支持插件上传场景的直接在网页编辑器里上传设计文件或图片就行,一张静态图也能生成代码。
应用场景
✅ 移动端活动页开发
双十一大促、电商节日营销等高频更新页面,设计师出稿后直接生成代码,大幅缩短活动上线周期。
✅ 移动端模块化开发
适用于细粒度组件的快速生成,设计师出稿→AI出码→前端微调,适合对迭代速度要求高的业务线。
✅ PC端toC应用
电商门户、品牌官网等面向消费者场景,UI还原度要求高但重复性组件多,Imgcook能稳定出码。
✅ 设计物料管理
设计师在平台完成设计稿的同时直接产出可复用代码,建立设计与代码同步的物料库,减少前端重复劳动。
✅ 企业内部工具开发
PC端toB应用虽然交互复杂度高,但表单、列表、卡片等模块占比大,用Imgcook生成基础结构再手工完善,比从零写快得多。
✅ 小程序多端适配
一次设计稿生成微信/支付宝等多平台小程序代码,不用为每个平台单独重写一套UI。
✅ 低代码平台物料生产
优酷等团队将Imgcook集成到自己的智能物料生成平台中,非研发人员也能产出可搭建的物料,降低平台内容生产门槛。
常见问题
解答您关于"Imgcook"的常见疑问，让您更好地使用这款AI工具
-
是的,完全免费。核心代码生成功能和所有插件(Figma、Sketch、VSCode等)都免费开放使用,没有隐藏收费,也不限制导出次数。
-
通过插件支持Sketch、Figma、Photoshop,也可以在网页编辑器直接上传Sketch/PSD/图片文件,一张静态截图也能生成代码。
-
官方提供React、Rax、Vue、小程序等10种DSL,点击下拉菜单就能切换。如果都不满足,平台允许自定义DSL生成团队专属格式的代码。
-
经过阿里巴巴双十一等场景大规模验证,布局还原度达92%以上,组件识别准确率92%,代码可用率接近80%。大厂实际在用的工具,质量有基本保障。
-
在Figma里安装imgcook插件,选中画板点击"导出",把复制的内容粘贴到imgcook网页编辑器,点一下生成就能看到代码了,全程不用写一行代码。
-
能。可视化编辑器里可以直接调布局、改样式、绑字段,不需要写代码。阿里内部已有设计师用Imgcook直接处理设计物料,减少跟前端反复沟通的成本。
-
阿里自研,经过淘宝双十一等高强度业务场景反复锤炼,组件识别、布局还原、代码质量都有实实在在的数据支撑,不是实验室里的Demo。最大特色是支持自定义组件库和DSL,生成的代码可以直接复用团队已有的业务组件。
-
可以。平台完全免费,生成的代码版权归用户所有,可直接用于商业项目开发和产品上线。
立即体验 Imgcook
Imgcook(图像大厨)是阿里巴巴大淘宝技术团队推出的设计稿转代码(D2C)平台,通过计算机视觉和深度学习将Sketch、Figma、PSD等设计稿一键生成可维护的前端代码。官方支持React、Vue、Rax、小程序等10种DSL,代码质量在淘宝双十一等大规模场景中已验证,代码可用率接近80%。提供可视化编辑器和CLI工具完全免费使用,帮助开发者大幅提升UI开发效率。