Imgcook

产品介绍

Imgcook由阿里巴巴淘系技术部研发，专注于通过AI技术将设计稿转化为可维护的前端代码。自2019年发布以来，已服务于闲鱼、飞猪、有赞等企业，覆盖双11大促等高并发场景，帮助团队提效40%以上。作为“图像大厨”，它支持Sketch、PSD、静态图片等多种输入，输出React、Vue、小程序等代码，被誉为“P5级前端工程师”。

适用人群

• 前端开发者：快速生成高还原度代码，减少重复劳动。
• 设计师：直接参与代码生成，降低沟通成本。
• 测试工程师：自动适配样式，减少兼容性问题。

核心功能与技术实现

Imgcook通过多模态生成技术（视觉+语义分析）实现设计稿的智能化解析，核心能力如下：

技术亮点：

1. 布局算法层：将绝对定位转换为Flex/Grid布局，解决多端适配问题。
2. 语义化处理：通过图层特征分析生成语义化类名（如.button-primary）。
3. 数据绑定：识别设计稿文本，自动映射接口字段（如{{price}}）。

工具使用技巧

1. 插件高效联动：
   • 安装Sketch/PS插件导出设计稿，搭配VS Code插件实现代码实时预览。
   • 使用imgcook-cli批量导出模块代码，无缝接入工程化流程。
2. 设计规范建议：
   • 图层分组：按模块划分设计稿图层，提升布局识别准确率。
   • 命名约束：为高频组件（如按钮）添加data-role标签，优化组件替换。
3. 自定义开发：
   • 通过DSL插件生成企业专属代码规范（如Vue3 + TypeScript）。
   • 使用@imgcook/plugin-images自动压缩图片并上传CDN。