code
发布厂商：Imgcook
Imgcook
阿里推出的免费设计稿智能生成前端代码
5
⭐⭐⭐⭐
0 条评测
价格机制
免费+付费
开发者架构组
Imgcook
收录发布日期
工具简介与核心定位
imgcook（图像大厨）是阿里巴巴前端委员会智能化小组推出的AI驱动设计稿转代码（D2C）平台，通过计算机视觉和深度学习技术将Sketch/Figma/PSD设计稿智能转换为React、Vue、各类小程序等10+种DSL可维护前端代码，经过天猫、淘宝、双11等大规模实战验证，代码可用率最高达79%。
ADK 综合性能评测
AI 能力
0%
易用性
0%
性价比
0%
性能表现
0%
社区生态
0%
综合评分
50%
核心特色与功能亮点 (Key Features)
从视觉稿中还原生成代码需要将视觉稿中的数据导出到 imgcook 可视化编辑器中还原生成代码，支持两种方式：
第1种：打开 Sketch/PSD 文件，通过安装好的 imgcook 插件将设计稿中的图层信息导出，粘贴到可视化编辑器中。
第2种：在可视化编辑器中直接上传“导入” Sketch/PSD/图片文件，imgcook 会解析图层信息直接还原到编辑器中。
在 imgcook 可视化编辑器中，用户可以对视图编辑，比如支持动态表达式样式、设置循环、修改布局。还可以编写逻辑代码、绑定字段等。
官方有提供常用的 DSL（React/Vue/小程序 DSL等），点击下拉列表可切换使用其他 DSL。如果有特殊诉求，你也可以自定义 DSL。
代码确定后，可点击「导出」，你也可以使用 VS code imgcook 插件链路「导出」，此方式可以将整个模块代码文件生成到相应目录，直接继续使用 VS code 开发整个项目即可。导出后的代码到本地文件中，图片以相对路径的形式存放在 images 文件夹下。
典型应用场景与适用行业
软件开发
核心能力
从视觉稿中还原生成代码需要将视觉稿中的数据导出到 imgcook 可视化编辑器中还原生成代码，支持两种方式：
第1种：打开 Sketch/PSD 文件，通过安装好的 imgcook 插件将设计稿中的图层信息导出，粘贴到可视化编辑器中。
第2种：在可视化编辑器中直接上传“导入” Sketch/PSD/图片文件，imgcook 会解析图层信息直接还原到编辑器中。
在 imgcook 可视化编辑器中，用户可以对视图编辑，比如支持动态表达式样式、设置循环、修改布局。还可以编写逻辑代码、绑定字段等。
官方有提供常用的 DSL（React/Vue/小程序 DSL等），点击下拉列表可切换使用其他 DSL。如果有特殊诉求，你也可以自定义 DSL。
代码确定后，可点击「导出」，你也可以使用 VS code imgcook 插件链路「导出」，此方式可以将整个模块代码文件生成到相应目录，直接继续使用 VS code 开发整个项目即可。导出后的代码到本地文件中，图片以相对路径的形式存放在 images 文件夹下。
代码辅助
官方新手上手实操教程指南
4-STEP TUTORIAL
1
确保你已登录到 imgcook 帐户。
确保你已登录到 imgcook 帐户。
2
在 Figma 中，转到 Plugins 并选择 imgcook，你应该看到一个新的导出窗口。
在 Figma 中，转到 Plugins 并选择 imgcook，你应该看到一个新的导出窗口。
3
选择任意文件图层组，然后点击“导出”。 imgcook 将弹出“导出成功，已复制到剪贴板！” 提示弹出层，然后单击“转到粘贴”进行还原。
选择任意文件图层组，然后点击“导出”。 imgcook 将弹出“导出成功，已复制到剪贴板！” 提示弹出层，然后单击“转到粘贴”进行还原。
4
imgcook将在新的浏览器选项卡中打开编辑器。 将其粘贴并恢复到“ ctr + v”编辑器中，然后另存为模块即可。
imgcook将在新的浏览器选项卡中打开编辑器。 将其粘贴并恢复到“ ctr + v”编辑器中，然后另存为模块即可。
同类其它推荐 AI 工具
CU
Cursor AI
基于 VS Code 构建的全流程 AI 智能代码编辑器，集成 Composer 多文件协同与 Agent 模式。
GI
GitHub Copilot
GitHub Copilot是一款AI编程工具，致力于通过AI技术提升编程效率，为用户带来更优质的编程体验。
TE
TensorFlow
TensorFlow 是谷歌推出的开源机器学习框架，广泛应用在深度学习领域。框架支持多种编程语言，如 Python 和 C++，能高效处理大规模数据、构建复杂的模型。TensorFlow 提供丰富的 API 和工具，方便开发者从零开始构建模型，或用预训练模型进行迁移学习。TensorFlow 支持多种应用场景，包括计算机视觉、自然语言处理和语音识别等。TensorFlow 灵活的架构和强大的社区支持，成为全球开发者进行人工智能开发的重要工具之一。
CO
Codex
Codex 是 OpenAI 推出的AI 编程智能体，搭载GPT-5.5编程特化模型，对标Claude Code。Codex 通过可视化图形界面与开发者交互，采用「文件夹工作区 + Thread 对话线程」的双层架构管理项目，避免上下文污染。Codex 支持代码编写、复杂重构、自动化运维及定时任务执行，让非专业用户能快速进入「Vibe Coding」心流，实现从需求到代码的端到端交付。
关于 Imgcook 的常见问题
Q: imgcook支持哪些设计工具和格式？
支持Sketch插件、Figma插件、Photoshop/PSD插件以及JPG/PNG静态图片直接上传，覆盖主流设计师工作流。
Q: imgcook支持生成哪些前端框架代码？
支持React、Vue、Rax、微信小程序、支付宝小程序等超过10种DSL（领域特定语言），还支持自定义DSL扩展，满足多端开发需求。
Q: imgcook的代码质量如何？
经过阿里天猫、淘宝、双11等大规模实战检验，代码可用率最高可达79%，能显著减少前端开发者的重复还原工作量。
Q: imgcook和京东Deco有什么区别？
两者都是D2C工具，imgcook支持更多设计工具（Sketch/Figma/PSD/图片），支持更多小程序DSL；Deco目前主要支持Sketch且仅有macOS版。imgcook免费程度更高。