| 基本信息 | 详情 |
|---|---|
| 开发公司 | 阿里巴巴（大淘宝技术·导购和营销产品团队） |
| 上线时间 | 2019年 |
| 官网 | https://www.imgcook.com/ |
| 支持平台 | Web（在线编辑器）、Figma/Sketch/Photoshop 插件、VS Code 插件、CLI |
| 价格 | 完全免费 |
| 核心定位 | 设计稿智能生成前端代码（D2C，Design to Code）平台 |
Imgcook 是阿里巴巴淘宝技术团队在 2019 年推出的设计稿转代码工具。你把 Sketch、PSD、Figma 设计稿或者一张静态图片丢进去，它用计算机视觉加深度学习自动解析图层，输出结构清晰、可维护的前端代码。不是 div 堆砌的那种——生成的 DOM 嵌套合理，CSS 类名带业务语义，循环结构能自动识别。
这个工具的核心卖点很简单：免费、阿里内部实战验证、支持自定义组件和 DSL。2019 年天猫双十一期间，Imgcook 承接了 78.94% 的新增模块代码自动生成，生成代码上线后的可用率做到 79.34%。这些数字是阿里自己放出来的，但考虑到 70% 的阿里前端在用它，覆盖上千个项目，数据可信度不低。
对于个人开发者和中小企业来说，Imgcook 最实在的价值在于零成本。不用买会员，不绑信用卡，核心功能和所有插件免费开放。
核心功能
一键还原视觉稿
通过 Figma、Sketch、Photoshop 插件导出设计稿数据，或者直接在编辑器中上传文件。AI 自动解析图层信息、间距、色值，还原到可视化编辑器中。一张 jpg/png 静态图也能生成代码。
多框架代码生成
官方提供 10 种 DSL：React、Vue、Rax、微信小程序、支付宝小程序等。点一下下拉菜单切换，也可以自定义 DSL 生成任何你需要的代码格式。
可视化在线编辑
在网页编辑器中直接修改视图布局、设置循环表达式、调整样式，还能绑定数据字段和编写逻辑代码。设计师不写 JSX 也能调布局。
组件智能识别
基于深度学习自动识别设计稿中的按钮、输入框、卡片等组件，准确率约 92%。布局还原度同样在 92% 以上。
自定义物料体系
支持接入团队自己的组件库，平台可识别、可渲染、可出码。生成代码直接调用你的私有组件，不用二次重构。
CLI 与插件集成
imgcook-cli 可以把生成的代码直接放到本地项目工程目录，图片自动存到 images 文件夹。配合 VS Code 插件，在 IDE 里接着写业务逻辑，工作流不断。
适合谁
适合的： 移动端活动页开发（双十一大促、电商节日营销），移动端模块化开发，PC 端 toC 应用，小程序多端适配，设计物料管理。前端工程师、UI 设计师、全栈开发者、互联网创业公司都能用。
不适合的： PC 端富交互应用（复杂拖拽、动画），游戏场景，超大体积设计文件（超过 10M 可能解析出错），2020 年前的旧版 PSD 文件（解析错误率偏高）。
同类竞品对比
| 能力 | Imgcook | Figma Dev Mode | Anima | Zeplin |
|---|---|---|---|---|
| 中文组件支持 | ⭐⭐⭐⭐⭐（小程序/钉钉） | ⭐⭐（基础 HTML） | ⭐⭐⭐（仅 Vue/React） | ⭐（纯标注工具） |
| 代码可维护性 | ⭐⭐⭐⭐（语义化+低嵌套） | ⭐（生成冗余 div） | ⭐⭐⭐ | ❌（无代码生成） |
| 自定义扩展 | ⭐⭐⭐⭐（插件/DSL 开放） | ⭐（依赖 Figma 生态） | ⭐⭐（仅付费版） | ❌ |
| 价格 | 完全免费 | $15/编辑/月 | $99/月 | $99/月 |
FAQ
Imgcook 是完全免费的吗？
是的。核心代码生成功能和所有官方插件（Figma、Sketch、VS Code 等）全部免费，没有使用次数、项目数量或功能限制，也不需要绑定信用卡。
生成的代码质量怎么样？
阿里官方公布的数据是代码可用率 79.34%（上线后保留的代码行数占总代码行数的比例）。组件识别准确率约 92%，布局还原度 92% 以上。但复杂交互、动画类设计稿的支持有限，生成的代码仍需人工调整。
支持哪些设计稿格式？
Sketch、PSD、Figma、以及 jpg/png 静态图片。通过插件导出或直接上传文件两种方式。
可以接入自己公司的组件库吗？
可以。Imgcook 提供开放的物料系统，支持组件库的可配置、可识别、可渲染、可出码。生成代码直接调用你的私有组件。
Windows 能用吗？
Web 编辑器在浏览器中运行，跨平台。Sketch 插件仅限 macOS，Figma 和 Photoshop 插件跨平台。VS Code 插件和 CLI 工具都支持 Windows。
和 Figma Dev Mode 比有什么优势？
Figma Dev Mode 更适合查看代码片段和标注，但生成可运行文件的能力弱。Imgcook 在中文组件支持（小程序/钉钉生态）、自定义 DSL、私有组件接入方面明显更强，而且免费。
更新动态
客户评论
综合评分：4.9/5（基于 46 人评价，数据来源：airukou.cn）
"产品经理改第八版设计时，我喝着咖啡等 AI 重生成——真香。" — 前端开发者
"设计师标注交互逻辑，前端直接生成 React TSX 代码，需求交付提速 3 倍。" — 跨境电商优品街团队
"阿里妈妈 Boom 平台集成 Imgcook 引擎后，单坑广告开发周期从 3 天缩至 1 小时。" — 阿里妈妈团队案例
参考来源
- ▸Imgcook 官网 | Convert Your Design to Code，阿里官方产品页面，含功能介绍、案例和文档
- ▸airukou.cn | Imgcook 工具详情页，第三方 AI 工具导航站，含用户评分和使用分析
- ▸ai.fly63.com | Imgcook 工具介绍，AI 工具导航，含功能详解和应用场景
- ▸aiproducthub.cn | 文心智能体平台，AI 产品库收录页