Design-draft to code plugins
Use the Sketch plugin or Photoshop plugin to extract layout and style information from design drafts and generate code from layered elements.
图像大厨imgcook
图像大厨imgcook 是一款设计转代码工具，可将设计稿转换为前端代码，支持 Sketch、Photoshop、VS Code 和 CLI 工作流。
Overview
imgcook is a design-to-code product that turns design drafts into front-end code. Its homepage positions it as a tool for converting image-based or design-tool assets into code, and its documentation explains that it extracts layout and style information from design layers before generating code.
The product is built around plugin and developer workflows rather than a single export button. The source pages describe Sketch and Photoshop plugins, an imgcook editor, a VS Code plugin, and imgcook CLI support so teams can move generated code into local projects and existing R&D processes.
Features
Multiple input and export paths
Export generated code through plugin workflows, or upload a design file into the imgcook editor and continue from there.
CLI-based project integration
Use the imgcook CLI to bring generated code products into a local project and fit them into an engineering workflow.
VS Code editor workflow
Use the VS Code plugin to paste design-tool output into the editor, generate code, and export it to a target folder.
Official DSL support and customization
Work with official DSL support for 10 code types, including react, rax, Vue, and applet, with custom DSL support for other outputs.
Custom export processing
Apply custom plugins during export to process code products, such as moving images to a personal asset space or converting file directories.
Use cases
Design handoff from mockups
A designer can install the Sketch or Photoshop plugin, extract layer information from a draft, and hand off generated code instead of a static mockup.
Local development integration
A frontend team can use the CLI or VS Code plugin to pull generated code into a local repository and continue implementation inside their normal tooling.
Framework-specific code generation
A team that needs framework-specific output can choose from the official DSLs, including react, rax, Vue, and applet, or customize a DSL for its own target stack.
Export-time code processing
An engineering team can apply a custom plugin during export to move images, reorganize folders, or otherwise post-process generated code before it enters the project.
Platform workflow for repeated production
A product or platform team can adopt imgcook as part of an internal workflow, combining design material management, code export, and plugin-based editing for repeated production use.
Pros and Cons
Pros
- Supports multiple creation and delivery paths, including plugins, an editor, CLI, and VS Code workflow.
- Documents both Sketch and Photoshop plugin installation paths, which helps teams using different design tools.
- Officially provides 10 DSLs and allows custom DSL generation for other code outputs.
- Shows a code-generation workflow that preserves layout and style information from design layers rather than treating the design as a flat image.
- Includes custom plugins for post-processing generated code products during export.
Cons
- Pricing information is not available in the collected sources because the pricing page returned a not-found page.
- The available sources do not clearly verify the full set of supported design-tool or target-framework integrations beyond the documented plugin and DSL mentions.
- Some documentation pages in the collected evidence are sparse or inaccessible, so a few workflow details remain partially verified.
FAQ
How does imgcook turn designs into code?
Imgcook provides a workflow for turning design drafts into front-end code through its plugin tools and editor. The documentation describes Sketch and Photoshop plugins, plus an imgcook editor workflow for exporting generated code.
What platforms or workflows does imgcook support?
The source documents show Sketch plugin support on Mac and a Photoshop plugin for both Mac and Windows. The docs also mention an imgcook VS Code plugin and an imgcook CLI for fitting generated code into local development workflows.
What kind of output does imgcook generate?
The install guide says imgcook extracts information such as position and style from design drafts and generates front-end code through layer-by-layer processing. The homepage also says generated code can be exported, uploaded, or integrated into a local project.
Can imgcook generate code for different frameworks?
The homepage describes official support for 10 DSLs, including react, rax, Vue, and applet, and says users can also customize DSLs to generate other code formats.
What does imgcook cost?
The pricing page in the collected sources returns a not-found page, so pricing details are not verified from the available evidence.
Quick Facts
- Category
- Design Tool / Developer Tool
- Source domain
- imgcook.com
- Primary workflow
- Design draft to front-end code
- Supported design tools
- Sketch and Photoshop plugins
- Developer workflows
- imgcook CLI and VS Code plugin
- Pricing
- Not verified from collected sources
图像大厨imgcook Alternatives
ByteAsk
ByteAsk is a terminal-first AI coding agent for C and C++ that edits repos and verifies changes with compilers, debuggers, sanitizers, and tests.
Ghost
Ghost is a terminal-based AI assistant for chatting, code generation, and CLI tasks. Includes free models, supports Linux, macOS, Windows, and is open source.
Devin
Devin is an AI coding agent and software engineer for planning and executing complex software tasks, with desktop, cloud, JetBrains, and CLI access.
Pi Coding Agent
Pi Coding Agent is a terminal-based coding agent for developers who want a minimal, extensible harness for interactive work and automation. It supports model switching, session branching, and TUI, print/JSON, RPC, and SDK modes.
CreateOS Sandbox
CreateOS Sandbox is an isolated compute environment for running code and agent workloads in Firecracker micro-VMs with private networking and SDK, CLI, or MCP control.
hob
hob is an independent workspace for coding agents, with local control over sessions, terminals, history, routing, and follow-up work.