Imgcook

Imgcook详细介绍

设计师交付一张图，前端要花半天切图写结构，这种扯皮在每个团队都发生过。Imgcook 想干掉这一步：把 Sketch、Figma 或 PSD 的设计稿传上去，平台解析图层、智能识别组件，直接吐出 React、Vue 这类前端代码。

Imgcook 不是单纯截图转代码，而是真的读设计稿的布局关系。上传后能看到识别出的模块、循环列表、动态字段，开发者再决定哪些接真实接口、哪些留占位。配合自定义的 Plugin，产物能自动传图到自己的图床、按项目目录归位，无缝接进研发流程。

我们组接一个中后台项目时试过这套工具。表单和列表这类规整页面，生成的代码能直接用个七八成，剩下的改字段名和接接口就行，比从零手写快不少。最明显的收益是设计改一版，重新出码后差异一目了然，不用再对着标注稿逐像素对。

代价是复杂视觉和强交互页面仍要人工收尾，比如动画、特殊布局、业务校验逻辑，平台给的只是骨架。组件识别偶尔会误判嵌套，需要手动矫正。另外要真正顺手，得花时间配物料体系和插件，前期投入不小，小需求直接手写可能更省事。

Imgcook的核心功能

• 设计稿解析：上传 Sketch、Figma、PSD，自动识别图层、布局与组件关系，输出结构化代码。
• 多框架出码：支持生成 React、Vue 等主流前端代码，适配中后台与活动页场景。
• 智能组件识别：把设计里的列表、循环、动态字段识别出来，方便后续接真实数据。
• VS Code 插件：在编辑器里粘贴设计数据即可生成代码并导出到项目目录。
• 命令行工具：imgcook-cli 一键把平台产物拉到本地工程，融入研发流程。
• 自定义 Plugin：编写插件处理产物，如自动传图到图床、转换文件目录。
• 开放物料体系：可配置自有组件库，让平台识别并使用团队现有组件出码。

Imgcook的价格详情

免费权益：

Imgcook 完全免费使用，设计稿解析、代码生成、插件与命令行工具均不收费。价格可能随官方调整。

Imgcook的应用场景

• 中后台页面落地：表单、列表等规整页面上传设计稿，直接产出可运行前端代码。
• 营销活动页：临时活动页用设计稿转代码快速搭出结构，再补业务逻辑。
• 设计改版同步：设计更新一版，重新出码后对比差异，减少人工对齐成本。
• 团队物料接入：把自有组件库接进平台，让产出代码贴合团队规范。
• 研发流程集成：用 CLI 和插件把产物自动归位到工程目录，减少手动搬运。
• 原型验证：产品用设计稿快速生成可点击页面，提前验证交互流程。

Imgcook的适用人群

• 前端开发者：把规整页面的切图与结构编写交给平台，专注业务逻辑与交互。
• 产品经理：用设计稿快速生成可点击原型，提前和团队对齐需求。
• 研发团队负责人：通过插件与命令行把出码接入流程，缩短设计到上线的周期。
• UI 设计协作方：交付设计稿后查看识别出的组件与字段，和开发对齐结构。

同类工具对比

Imgcook的同类竞品

蓝湖蓝湖是北京尽微致广信息技术有限公司推出的…MasterGoMasterGo是蓝湖团队在2020年推…FigmaFigma 是一个在线协作设计平台，把界…LocofyLocofy是一款把设计稿转成前端代码的…