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
Alternatives à 图像大厨imgcook
JetBrains
JetBrains makes developer tools for individuals, teams, and businesses, including IntelliJ IDEA, PyCharm, DataGrip, WebStorm, Rider, and CLion. Its IDEs combine code-aware navigation, suggestions, and built-in run/debug/test workflows, with additional tools for CI/CD, project management, code quality, and documentation.
Perchance
Perchance is a browser-based random generator editor for creating and managing custom generators. It supports code editing, account-based saving, and revision recovery, but the provided sources do not confirm pricing or integrations.
Tabnine
Tabnine is an AI code assistant for developers and engineering teams, with code completions, in-IDE chat, and enterprise deployment options. It emphasizes code privacy, governance, and context-aware AI grounded in the user’s codebase.
OpenAI
OpenAI is an AI research and deployment company centered on ChatGPT, the API, Platform tools, and Codex. The site helps individuals, developers, and businesses explore conversational AI, build with models, and follow product and research updates.
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.
DDS Hub
DDS Hub is an AI API platform for Claude and OpenAI-family model workflows, with token-based pricing, model selection, and Claude Code setup guidance. It is aimed at developers who want API access, usage-based billing, and basic troubleshooting in one place.