Imgcook

让设计稿一键变为可维护代码 ✨

Imgcook（图像大厨）帮助开发团队将 Sketch、PSD、静态图片等视觉稿智能转换为 React、Vue、小程序等多端代码。通过 AI 驱动的设计稿识别技术，自动完成图层解析、布局还原与代码生成，让前端开发更专注于业务逻辑而非重复性视图搭建。

💡 核心价值：从设计到代码的无缝衔接，大幅提升移动端页面与模块的开发效率。

---

🎯 核心能力

Imgcook 支持两种便捷的设计稿导入方式，灵活适配不同工作流：

• 插件导出：在 Sketch 或 Figma 中安装 Imgcook 插件，选中图层组一键导出图层信息，粘贴至可视化编辑器即可还原
• 直接上传：在编辑器中直接导入 Sketch、PSD 或静态图片文件，系统自动解析图层结构并还原

✨ 功能亮点

可视化编辑

在直观的编辑器中，你可以对生成的视图进行精细化调整：

• 设置动态表达式样式与循环渲染
• 修改布局结构，适配不同屏幕尺寸
• 绑定数据字段，编写业务逻辑代码

多 DSL 支持

官方提供 React、Vue、小程序等常用 DSL 模板，一键切换目标技术栈。如有特殊需求，也支持自定义 DSL 配置。

无缝开发集成

确认代码后，可通过网页直接导出，或使用 VS Code Imgcook 插件将模块代码直接生成到项目目录。图片资源将以相对路径自动归档至 images 文件夹，保持项目结构清晰。

---

📱 适用场景建议

根据项目类型，Imgcook 的适配程度有所不同：

• 特别推荐：移动端细粒度模块开发、移动端活动页
• 推荐：移动端全页面开发、PC 端 toC 应用
• 可用：PC 端 toB 应用
• 不推荐：PC 端富交互应用、游戏场景

---

🚀 快速开始

通过 Figma 或 Sketch 插件开始，只需四步：

1. 确保已登录 Imgcook 账户
2. 在设计工具中打开 Plugins 选择 Imgcook，唤起导出窗口
3. 选中目标图层组点击"导出"，看到"导出成功，已复制到剪贴板"提示
4. 在浏览器中打开 Imgcook 编辑器，按 Ctrl+V 粘贴还原，保存为模块即可

---

💎 费用说明

Imgcook 对所有用户完全免费。无论是 Figma、Sketch 插件，还是 VS Code 扩展，均可无限制使用，将设计稿免费转化为生产级代码。