Imgcook 是什么
Imgcook（图像大厨）是由阿里巴巴大淘宝技术团队推出的设计稿智能生成前端代码（D2C，Design to Code）平台，专注以 Sketch、PSD、静态图片等形式的视觉稿作为输入，通过智能化技术一键生成可维护的前端代码，包含视图代码、数据字段绑定、组件代码、部分业务逻辑代码等。该产品经过淘宝前端团队内部近2年的打磨，旨在提高前端开发效率，助力开发、设计师、测试的高效协作。
Imgcook 的主要功能
一键还原视觉稿：从视觉稿中还原生成代码，支持两种方式：通过安装好的 imgcook 插件将设计稿中的图层信息导出，或在可视化编辑器中直接上传 Sketch/PSD/图片文件，imgcook 会解析图层信息直接还原到编辑器中。
可视化编辑：在 imgcook 可视化编辑器中，用户可以对视图进行编辑，支持动态表达式样式、设置循环、修改布局，还可以编写逻辑代码、绑定字段等。
智能代码生成：官方提供常用的 DSL（React/Vue/小程序 DSL等），点击下拉列表可切换使用其他 DSL。支持生成 React、Rax、Vue 和小程序等10种 DSL 的代码，同时允许用户自定义 DSL。生成的代码具有合理的 DOM 嵌套、相对定位布局、语义化类名和循环自动识别，确保代码的可维护性。
集成到研发流程：提供多种集成方式，使代码生成后能够无缝对接研发环节。支持自定义插件处理生成的代码，例如图片上传和文件目录转换。提供 Imgcook CLI 命令行工具，支持将平台生成的代码集成到本地项目，并集成到 R&D 流程。还提供 VS Code 插件，允许用户在 VS Code 中生成并导出代码。
自定义组件：提供开放的材料系统，支持组件库的配置、识别、干预、渲染和代码输出，让开发者在 Imgcook 平台上使用自己的组件。
Imgcook 的使用方法
访问方式：
- 访问 Imgcook 官网 https://www.imgcook.com/
- 注册登录后即可开始使用
- 支持浏览器端使用，无需安装
核心使用步骤：
- 导入设计稿：打开 Sketch/PSD 文件，通过安装好的 imgcook 插件将设计稿中的图层信息导出，粘贴到可视化编辑器中；或在可视化编辑器中直接上传"导入" Sketch/PSD/图片文件
- 可视化编辑：在编辑器中调整样式、属性、事件、数据等
- 生成代码：选择需要的 DSL（如 React、Vue、小程序等），点击"导出"生成代码
- 导出代码：导出后的代码到本地文件中，图片以相对路径的形式存放在 images 文件夹下，可直接继续使用 VS Code 开发整个项目
插件安装：
- Sketch/PSD 插件：从官网下载安装，用于导出设计稿数据
- VS Code 插件：在 VS Code 插件市场中搜索"imgcook"并安装，支持在 VS Code 中生成并导出代码
特色功能：
- 支持动态表达式样式配置
- 支持设置循环和修改布局
- 支持绑定字段和编写逻辑代码
- 支持自定义 DSL 生成满足特定需求的代码
Imgcook 的产品价格
Imgcook 完全免费使用，无需付费即可使用所有功能。用户可以免费创建和发布网站，支持免费绑定自定义域名。目前没有付费计划，所有基础功能对个人用户和企业用户都免费开放。
Imgcook 的适用人群
前端开发者：需要快速将设计稿转换为可维护的前端代码，减少手动编码工作量，提高开发效率。
设计师：通过插件将 Sketch 设计导出为代码，与前端紧密协作，减少沟通成本。
开发团队：支持多人协作和代码分享，提高团队项目的效率，使团队协作更加高效。
企业用户：希望提高前端开发效率和优化设计与开发协作流程的企业和团队，通过 Imgcook 可以显著提升开发效率，降低人力成本。
编程学习者：通过 AI 辅助快速掌握编程语法，理解代码逻辑和结构，降低学习门槛。
总而言之，Imgcook 是一款功能强大且实用的 AI 编程助手，基于先进的深度学习模型，能够显著提高开发者的编码效率和代码质量。产品支持多种主流编程语言，并且可以无缝集成到主流开发环境中，适合个人开发者、企业团队以及教育机构等多种用户群体。
