imgcook 是由阿里巴巴推出的一款“设计稿转代码”（Design to Code, D2C）平台。

它旨在填补设计师与开发者之间的鸿沟。

核心功能

• 多类型设计稿支持：支持通过插件（Plugin）从 Sketch、Figma、Photoshop 等主流设计工具导出设计稿。
• 智能化代码生成：AI 引擎会深度分析设计稿的布局、文字、图片和重复结构：
  • 合理的 DOM 嵌套结构
  • 基于 Flexbox 的相对定位布局
  • 语义化的 ClassName 命名
  • 自动识别并处理循环列表
• 多端多框架代码输出：官方内置支持生成 10 种 不同类型的代码（DSL），覆盖主流前端技术栈：
  • 框架：React, Vue, Rax
  • 平台：微信小程序、支付宝小程序等
  • 用户也可以自定义 DSL，以生成符合特定团队规范的代码。
• 无缝集成研发流程：提供了多种方式，将代码生成无缝融入现有工作流。
  • imgcook-cli：命令行工具，可将生成的代码一键放置到本地项目中。
  • VS Code 插件：可在编辑器中直接使用 imgcook 功能。
  • 自定义 Plugin：允许在代码导出时进行处理，如自动上传图片至自己的 CDN 等。
• 开放的物料体系：支持开发者配置和使用自定义组件库，让生成的代码能直接调用团队内部的组件，进一步提高代码的可用性和一致性。

主要用途

imgcook 主要面向希望提升前端开发效率的团队和个人，其核心用途包括：

• 加速 UI 开发：将设计师的视觉稿快速转化为前端代码，大幅减少手动编写样式和静态结构的时间。
• 提升协作效率：作为设计师与开发者之间的桥梁，减少因设计还原度产生的沟通成本和返工。
• 保证代码质量：通过 AI 生成结构清晰、符合规范的代码，有助于提升代码的可维护性和一致性。
• 应用于大型项目：其能力已被验证可用于如淘宝、天猫等超大型项目的开发中。

如何使用

使用 imgcook 的基本流程如下：

1. 导入设计稿：
   • 通过插件：为 Sketch、Figma 或 Photoshop 安装 imgcook 插件，在工具中选中设计稿并导出。
   • 直接上传：在 imgcook 网页编辑器中直接上传设计文件或图片。
2. 智能处理：imgcook 的 AI 引擎会自动分析设计稿，将其转换为结构化的数据（Schema）。
3. 可视化编辑与优化：你可以在 imgcook 的在线编辑器中，对生成的 Schema 进行预览和微调，例如修正组件识别、调整样式等。
4. 选择目标框架并导出：选择你想要的目标框架（如 React, Vue），点击导出。imgcook 会生成对应的前端代码。
5. 集成到项目：可以使用 imgcook-cli 将代码直接拉取到本地项目中，或通过 VS Code 插件 在 IDE 内完成集成。

版本与定价

• 定价模式：imgcook 目前采用 免费增值（Freemium） 模式，基础功能可免费使用。
• 商业应用：其核心能力已在阿里巴巴内部大规模商业项目中得到验证。

总结

imgcook (图像大厨) 是阿里巴巴推出的设计稿智能生成代码平台。它利用 AI 技术，将 Sketch、Figma、PSD 等设计稿高效转化为高质量、可维护的 React、Vue 等多端代码。