# imgcook imgcook 将 Sketch、Photoshop 等视觉设计导入编辑器，让用户调整布局、绑定数据和添加逻辑，再通过可配置 DSL 生成并导出前端代码。 - Findings24: - 网站: - 价格: Freemium - 分类: 开发者工具 ## 什么是 imgcook？ imgcook 可将视觉设计转换为前端代码。你可以通过 Sketch 或 Photoshop 插件导出设计，或将支持的设计素材上传至编辑器。随后，你可以调整视图、绑定数据、添加逻辑，并通过选定的 DSL 生成代码。DSL 是一种代码生成器，可将设计的结构化描述转换为输出代码。 这一流程包含手动编辑，以及导出前的代码确认。请在项目中检查生成的布局和交互行为，不要将转换结果视为完整且经过测试的应用。 ## imgcook 能做什么？ ### 设计导入 Sketch 和 Photoshop 插件可导出设计描述，供可视化编辑器使用。在文档介绍的 Sketch 工作流程中，先选中一个区域，导出其 JSON，再将其粘贴到 imgcook 中。 ### 可视化布局与逻辑编辑 在生成代码前，可以修改布局和样式、配置重复元素、绑定数据字段，以及添加事件或自定义方法。 ### 可配置的代码生成器 使用内置的 React、Rax 和 Vue 等 DSL 生成代码，也可以编写自定义 DSL，以满足所需的输出要求。 ### 代码包导出 保存更改、检查生成的代码，并导出所选语言的代码包。示例中导出的图片存放在 images 文件夹中。 ### 开发流程集成 使用 imgcook-cli 或 VS Code 插件将生成的代码导入项目。自定义插件可以处理输出内容，包括上传图片或转换目录结构。 ## 使用场景 ### 为设计落地做好准备 将相关图层分组，导出选定的设计区域，并在将代码交给前端开发者之前，在编辑器中检查设计还原效果。 ### 构建重复内容模块 通过配置布局和数据绑定，将视觉模块转换为重复内容，然后预览事件效果并确认生成的代码。 ### 让生成结果适配项目 选择或自定义代码生成器及导出处理流程，使输出符合项目的代码和资源结构。 ## 常见问题 ### 设计稿需要做特殊准备吗？ 教程说明，设计稿没有严格限制，但建议做一些简单准备，例如将属于同一模块的图层分组，以及合并图形。教程中的完整示例使用 Sketch 插件导出结构化 JSON，并将其导入编辑器。 ### imgcook 能将普通图片转换为代码吗？ 官网首页将 JPG、PNG 等格式的图片转代码功能标为测试版。它与文档中介绍的 Sketch 和 Photoshop 插件流程有所不同；不要假定所有来源都能提供相同程度的输入细节或得到相同结果。 ### 生成的代码无需检查就能直接部署吗？ 教程包含编辑布局、绑定字段、添加逻辑和预览行为等步骤，并要求用户在导出前保存更改、确认代码。请在项目中检查输出结果；视觉还原并不能证明应用行为完整或兼容性符合要求。 ### 官方指南推荐用于哪些项目？ 官方代码仓库推荐用于移动端模块和活动页面，也列出了移动端整页和面向消费者的桌面端应用。不推荐用于复杂交互的桌面端应用或游戏开发。请使用具有代表性的设计稿，评估生成结果是否适合你的项目。 ## 快速信息 - **主要用途**: 将设计转换为代码 - **文档列出的输入**: Sketch 和 Photoshop 设计稿；图片转代码功能处于测试阶段 - **编辑内容**: 视图、样式、数据绑定和逻辑 - **输出方式**: 通过内置或自定义 DSL 生成代码包 - **集成方式**: CLI、VS Code 和自定义导出插件