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