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 is a design-to-code tool that converts design drafts into front-end code. It supports plugin-based and developer workflows for Sketch, Photoshop, VS Code, and CLI usage.
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
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 that helps developers and engineering teams plan and execute complex software tasks. It is available through desktop, cloud, JetBrains, and CLI surfaces, with plans for individuals, teams, and enterprises.
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 multiple run modes including TUI, print/JSON, RPC, and SDK.
Assemble
Assemble by Cohesium AI is an open-source prompt orchestration system for AI coding tools. It generates native config files that turn one project into a structured multi-agent setup across 21 platforms.
Ably Chat
Ably Chat is a chat API platform for building custom realtime chat applications. It supports room-based messaging, typing indicators, presence, reactions, and message updates, with usage-based pricing options for different deployment stages.
AakarDev AI
AakarDev AI helps teams manage AI provider access, project-level setups, logs, and analytics from one dashboard. It supports BYOK workflows and lists providers including OpenAI, Google Gemini, Anthropic, Groq, Mistral AI, and Perplexity AI.