Imgcook

Imgcook是什么？

Imgcook又称图像大厨，是围绕设计资料识别、界面还原和代码生成组织工作的设计转代码平台。用户可以按实际支持方式导入设计稿或图像，检查识别后的图层、布局与样式，再继续编辑生成结果。当前产品资源还包含组件、设计规范、物料与DSL扩展等方向，适合需要衔接设计和前端实现的团队。它的重点是建立可继续开发的界面起点，而不是代替完整应用开发；交互、数据、业务逻辑、依赖和可维护性仍需要开发人员补充与验证。输入格式、插件、项目与代码输出条件应查看当前入口，不沿用早期教程推断所有功能都相同。

设计转代码的价值在于建立可继续维护的起点。界面看起来相似之后，还要检查结构、交互和真实运行行为。

Imgcook的主要功能

• 设计输入：按当前支持方式整理Sketch、PSD或图像等设计资料。
• 布局与图层：检查结构、位置、文字和图片是否正确还原。
• 可视化调整：围绕页面元素和样式继续修正生成结果。
• 代码生成：将设计结构转成可继续使用的界面代码。
• 规范与复用：结合组件、物料和设计要求整理重复部分。
• DSL扩展：根据项目需要理解结构化结果与代码生成方式的定制方向。

如何使用Imgcook？

1. 整理设计输入：确认设计稿、图像与所用素材，明确组件和页面目标。
2. 选择支持入口：核对格式、插件与实际项目条件，先用小页面验证。
3. 检查还原结果：观察层级、布局、文字、图片与样式是否合理。
4. 完善结构与逻辑：补充交互、数据、组件规范与业务处理，保留可维护的代码。
5. 在项目中验证：检查不同尺寸、浏览器、依赖与实际行为后继续开发。

适合哪些人使用？

希望把设计资料转换为可继续开发界面的设计师与前端团队。

使用示例：前端团队实现一个已有设计方案的展示页时，可以先用小范围页面比较识别结果，再修正布局和样式，补齐响应式、交互与业务代码，最后放回实际项目验证。

官网与相关入口

• 访问Imgcook官方入口

常见问题

生成的界面代码就是完整应用吗？

还需要业务逻辑、数据、交互与运行环境，不能仅按静态画面判断完成。

设计稿中的全部元素都能准确识别吗？

字体、图层、复杂效果与素材会影响识别，应逐项比较还原结果。

什么是DSL方向的扩展？

它用于按结构化设计结果定制代码生成方式，具体能力与接入方法应查看当前官方资料。

设计修改后可以直接覆盖项目吗？

应先检查差异，保护已经补充的业务代码、组件与手工修改。