图像大厨imgcook

图像大厨imgcook是一款设计转代码工具，可将设计稿转换为前端代码，支持Sketch、Photoshop、VS Code及CLI等插件化与开发者工作流。

AI设计助手

AI开发者工具

AI编程助手

访问网站

概述

imgcook 是一款设计转代码产品，可将设计稿转换为前端代码。其首页将其定位为用于将基于图片或设计工具的素材转换为代码的工具，而文档则说明它会先从设计图层中提取布局和样式信息，再生成代码。

该产品围绕插件和开发者工作流构建，而不是单一的导出按钮。来源页面描述了 Sketch 和 Photoshop 插件、imgcook 编辑器、VS Code 插件以及 imgcook CLI 支持，使团队能够将生成的代码带入本地项目和现有研发流程。

功能

设计稿转代码插件

通过 Sketch 插件或 Photoshop 插件，从设计稿中提取布局和样式信息，并从分层元素生成代码。

多种输入与导出路径

可通过插件工作流导出生成的代码，或将设计文件上传到 imgcook 编辑器后继续处理。

基于 CLI 的项目集成

使用 imgcook CLI 将生成的代码产品引入本地项目，并融入工程化工作流。

VS Code 编辑器工作流

使用 VS Code 插件将设计工具输出粘贴到编辑器中，生成代码并导出到目标文件夹。

官方 DSL 支持与自定义

支持 10 种代码类型的官方 DSL，包括 react、rax、Vue 和 applet，并为其他输出提供自定义 DSL 支持。

自定义导出处理

在导出过程中应用自定义插件来处理代码产品，例如将图片移动到个人素材空间或转换文件目录。

使用场景

从原型图进行设计交付
设计师可以安装 Sketch 或 Photoshop 插件，提取设计稿中的图层信息，并交付生成的代码，而不是静态原型图。
本地开发集成
前端团队可以使用 CLI 或 VS Code 插件将生成的代码拉取到本地仓库，并在常用工具链中继续实现。
面向特定框架的代码生成
需要特定框架输出的团队可以在官方 DSL 中进行选择，包括 react、rax、Vue 和 applet，或为自己的目标技术栈自定义 DSL。
导出时的代码处理
工程团队可以在导出过程中应用自定义插件来移动图片、重组文件夹，或在代码进入项目之前进行其他后处理。
用于重复生产的平台工作流
产品团队或平台团队可以将 imgcook 作为内部工作流的一部分，结合设计素材管理、代码导出和基于插件的编辑，实现重复性生产使用。

Pros and Cons

Pros

支持多种创建和交付路径，包括插件、编辑器、CLI 和 VS Code 工作流。
同时提供 Sketch 和 Photoshop 的插件安装路径，有助于使用不同设计工具的团队。
官方提供 10 种 DSL，并允许为其他代码输出生成自定义 DSL。
展示了保留设计图层布局和样式信息的代码生成流程，而不是将设计当作扁平图片处理。
包含用于在导出时对生成代码产品进行后处理的自定义插件。

Cons

在收集到的来源中无法获取定价信息，因为定价页面返回了未找到页面。
可用来源并未清楚核实除已文档化的插件和 DSL 提及之外，是否完整支持所有设计工具或目标框架集成。
收集到的证据中有些文档页面较为简略或无法访问，因此部分工作流细节仍只能部分核实。

FAQ

imgcook 如何将设计转为代码？

Imgcook 提供了一套通过其插件工具和编辑器将设计稿转换为前端代码的工作流。文档描述了 Sketch 和 Photoshop 插件，以及用于导出生成代码的 imgcook 编辑器工作流。

imgcook 支持哪些平台或工作流？

源文档显示，Sketch 插件支持 Mac，Photoshop 插件支持 Mac 和 Windows。文档还提到了 imgcook VS Code 插件以及 imgcook CLI，可将生成的代码融入本地开发工作流。

imgcook 会生成什么类型的输出？

安装指南说明，imgcook 会通过逐层处理，从设计稿中提取位置和样式等信息，并生成前端代码。主页还说明，生成的代码可以导出、上传或集成到本地项目中。

imgcook 可以为不同框架生成代码吗？

主页描述其官方支持 10 种 DSL，包括 react、rax、Vue 和 applet，并且用户还可以自定义 DSL 来生成其他代码格式。

imgcook 的价格是多少？

所收集来源中的定价页面返回了未找到页面，因此无法从现有证据中核实定价详情。

Quick Facts

类别: 设计工具 / 开发者工具
来源域名: imgcook.com
主要工作流: 设计稿转前端代码
支持的设计工具: Sketch 和 Photoshop 插件
开发者工作流: imgcook CLI 和 VS Code 插件
定价: 未从收集到的来源中核实