小而美的插件让“创造”更有想象

Codify MCP - Vibe Design

Codify MCP 是一个用于连接智能体操控你画布的 Agent。 预告：网页转设计稿功能即将上线。 功能特性 一键安装：使用 npx 无需手动下载 MCP 协议：完美集成 Cursor 等支持 MCP 的 IDE 安全认证：支持 access_key 认证 全能工具箱：包含代码获取、设计稿生成、双向同步等 10+ 个专业工具 资源访问：通过 URI Codify://get_code/{content_id} 访问代码 快速开始 1. 配置 MCP 例如：编辑 ~/.cursor/mcp.json（如果文件不存在则创建）： { "mcpServers": { "codify": { "command": "npx", "args": [ "-y", "@codify-ai/mcp-client", "--url=https://mcp.codify-api.com" ], "env": { "CODIFY_ACCESS_KEY": "sk-your-access-key" } } } } 2. 重启IDE / CLI 重启Cursor、VSCode、Trae 等 IDE 或者 CLI 工具，或重新加载 MCP 服务器配置。 3. 开始使用 在IDE / CLI 中，您可以： 方式 1：使用 AI 工具进行设计稿与代码的双向交互 直接在对话框输入指令，AI 会自动识别并调用工具： "获取 MasterGo 中选中的图层代码" "使用Codify MCP 工具设计一个深色模式的统计仪表盘" "修改设计稿选中的图层，改为红色背景" "将我选中的图层删除" "将我选中的图层，同步到本地代码" "对比本地代码与设计稿的差异" 方式 2：将设计稿给其他人（研发）拉取代码到本地 在 MasterGo 中选中一个元素，复制的指令然后给到其他人来获取代码。 无需启动 MasterGo，直接在 IDE 中输入该指令即可获取代码。 codify://getCode/{contentId}

DesignToAI

从设计稿提取布局与样式，生成 AI Prompt / JSON / CSS，可同步导出设计截图，辅助 AI 精准还原页面

HTML 转 MasterGo

超级无敌好用！ 将 AI 生成的网页与代码项目，高还原转换为可编辑的 MasterGo 设计稿。完整保留文本、图片、SVG、字体与布局结构，让设计结果能够继续修改、协作与迭代。

mastergo-api-bridge

提供给MasterGo MCP调用mastergo plugin api的能力，让AI能够直接控制mastergo操作/生成设计稿。 MCP地址：https://github.com/burnice-cn/mastergo-mcp-server

GUI-AI-DESIGN-JSON

Design → JSON 一键将设计稿转换为 AI 可读的结构化 JSON 让设计稿“会说代码”。 Design → JSON 是一款面向 AI 编程场景的设计稿导出插件。它可以将 MasterGo 中的设计图层、布局结构、样式属性、文本信息、组件语义以及图片和 SVG 资源，转换为一份结构清晰、贴合 CSS / Flex 语义的 JSON 数据。 将导出的 JSON 交给 Claude Code、Cursor 等 AI 编程工具，AI 不再只是“看图猜结构”，而是可以直接读取设计稿中的真实布局和样式信息，从而更准确地还原成前端代码。 为什么需要 Design → JSON？ 直接把设计稿截图交给 AI，AI 通常需要通过视觉识别来推测： 元素之间的间距是多少？ 这是 Flex 布局还是绝对定位？ 容器是固定宽度还是自适应？ 按钮的圆角、边框和阴影具体是多少？ 这个图标到底是什么 SVG？ 这个设计元素是否对应一个组件？ 而设计工具中其实已经包含了这些精确的信息。 Design → JSON 将设计稿中的视觉信息转换为结构化数据，让 AI 获得一份可以直接理解和翻译的“施工图”。 核心功能 🎯 语义化布局 自动布局会尽可能转换为符合 CSS 语义的结构： Flex 方向 间距 Gap 内边距 Padding 主轴 / 交叉轴对齐 固定尺寸 内容撑开（Hug） 撑满父容器（Fill） 只有不适合使用流式布局的节点，才会保留相对位置和绝对坐标，帮助 AI 正确判断页面结构。 🎨 完整导出视觉样式 尽可能完整地保留设计稿中的样式信息，包括： 背景颜色 渐变 圆角 边框 阴影 透明度 旋转 Overflow 裁剪 字体 字号 字重 行高 字间距 文本对齐 文本装饰 大小写转换 让 AI 不只是“生成一个类似的页面”，而是能够根据真实的设计参数进行还原。 🖼 自动导出图片与 SVG 资源 设计稿中的资源可以随结构一起导出： SVG 图标直接导出 SVG 源码 位图资源导出为 Base64 Data URL 无需额外切图 资源与设计结构一起交付给 AI 🏷 保留设计变量与 Token 如果颜色等样式绑定了设计系统中的样式或变量，导出的 JSON 会尽可能保留对应的名称。 例如： color/brand/primary 这样 AI 在生成代码时，可以更方便地映射到项目中的设计 Token、CSS Variables 或主题系统。 🧩 识别组件语义 对于组件实例，可以保留： 组件名称 母组件信息 组件变体 组件属性 帮助 AI 理解设计稿中的组件关系，并结合项目现有的组件库生成更合理的代码。 📐 支持选中导出与整页导出 根据不同使用场景灵活选择： 选中图层：适合还原局部组件或页面区域 整个页面：适合完整还原整个页面结构 🌗 支持浅色与深色模式 简洁易用的插件面板，支持浅色 / 深色模式自适应。 导出后可以直接： 复制 JSON 下载 JSON 文件 然后交给 AI 编程工具使用。 使用方法 在 MasterGo 画布中选中需要导出的图层。 打开 Design → JSON 插件。 点击“导出 JSON”。 复制或下载生成的 JSON 文件。 将 JSON 提供给 Claude Code、Cursor 等 AI 编程工具。 例如： 这是我的设计稿 JSON，请根据其中的布局结构、样式和组件信息，使用 React + Tailwind CSS 还原成前端页面。 AI 获得的不再只是一张截图，而是一份包含真实设计结构和样式参数的完整说明。 适合谁使用？ 👨‍💻 前端 / 全栈开发者 减少手动测量间距、抄写样式和还原布局的工作，快速获得高质量的代码实现基础。 🤖 AI 编程用户 为 Claude Code、Cursor 等 AI 工具提供更加准确、结构化的设计上下文。 🎨 设计系统团队 通过组件语义和设计 Token 输出，让 AI 生成的代码更容易融入现有组件库和设计系统。 典型工作流 MasterGo 设计稿 ↓ Design → JSON ↓ 结构化设计数据 ↓ Claude Code / Cursor / AI ↓ React / Vue / HTML 页面 让设计稿“会说代码” 选中 → 导出 → 交给 AI。 剩下的，交给它。

Hydee D2C Agent

由海典软件推出的 AI D2C 设计转代码工具，一键把设计稿转成前端代码，让UI验收轻轻松松。 🎉目前在公测，新用户赠送「10次」体验额度。 支持自定义配置大模型API Keys：已支持Deepseek、kimi、Qwen智谱等。 欢迎添加 boysoman 拉你进D2C插件用户群 使用教程：https://mastergo.com/goto/Okr3v6mU?page_id=12:257&layer_id=122:23691&file=175952035035154 插件官网：https://design.ydjia.cn 注：目前仅支持团队版本的文件，个人文件的支持转化暂时还在规划中。

mastergo-mcp-plugin

提供一组语义明确、参数可校验、对 AI 友好的 MasterGo 设计编辑MCP工具，将AI接入你的设计流程 使用教程 https://github.com/whwanyt/mastergo-mcp-plugin/blob/master/README.md

一键改色相

MasterGo 插件 — 对选中的矢量图层、文字批量改色。 功能 - 色轮拖拽：实时调整所有选中图层的色相 - 亮度/饱和度滑块：精细调整明暗和鲜艳程度 - 去饱和：一键变灰 - 重置：恢复原始颜色 - 支持递归处理嵌套图层（Frame、Group、Component 等） - 同时处理填充色（fills）和描边色（strokes）

橘皮社区版

D2C插件

Pixel2XML

Pixel2XML — MasterGo to Android 资源转换插件 Pixel2XML 是一款 MasterGo 插件，专为 Android 开发设计，一键将设计稿转换为可用的 Android 开发资源。 核心功能 插件通过解析 MasterGo 画布中的节点树，自动生成四项核心资源：Android XML 布局文件、Java UI 控制类（继承 BaseXml）、Activity 壳类（分层架构）、以及 drawable 资源包（含 PNG 切图和圆角 Shape XML）。导出时五个按钮各司其职——XML、Java 类、Activity、drawable 分别独立导出，也可一键全部下载（按 xml / Java类 / Activity / drawable 四目录分类打包）。 智能处理 插件内置中文→英文命名转换字典，自动将"拨号""通讯录"等中文图层名转为规范的 Android 资源命名。遇到路径、圆形、线条等非标准控件时，自动将整个容器 flatten 为图片导出，避免 XML 中出现无法渲染的非法嵌套。圆角数据直接从 MasterGo 读取，同步生成带 corners 的 shape drawable。TextView 字号通过 textStyles API 准确获取，不出现偏差。 使用方式 在 MasterGo 中选中根容器，点击"提取"预览生成的 XML 和 Java 代码，确认无误后按需导出即可。所有代码均为纯文本文件，直接复制到 Android Studio 中即可使用。

批量选择图层

按名称 / 文本快速搜索，一键批量选中，告别手动点选，提升图层操作效率 核心功能 双维度搜索：支持按「图层名称」「文本内容」双重条件检索图层，定位更精准 多维度筛选：类型过滤 + 状态过滤 + AND/OR 逻辑组合，精确锁定目标图层 指定范围搜索：可在选中的范围内筛选，避免全图干扰 精准 / 模糊匹配：支持精确匹配搜索，结果更可控 快速批量选择：提供全选、框选多种交互方式，一键选中目标图层 使用场景 快速定位元素：在海量图标、组件中精准搜索查找，省去逐层翻阅的麻烦 批量统一样式：搜索后一键全选目标图层，批量修改颜色、字体等样式 清理锁定/隐藏图层：筛选出锁定或隐藏图层，一键批量处理 导出项收集：快速筛选所有带导出设置的图层，批量导出

CodeWave

导出设计稿中的任意部分到 CodeWave，秒级生成视图界面，搭配 CodeWave 强大的编辑器能力完成后续全链路开发部署。

uiToolsetV2_1

快速导出图片和生成json文件

图片及样式导出工具

一款面向 **游戏 UI / Cocos** 等研发流程的 MasterGo 插件：把设计稿里**父级容器下的子图层**，一键导出为 **布局数据（JSON）+ 切图（PNG）**，并打成 **ZIP** 下载，方便在引擎侧还原界面或生成 Prefab。 --- ## 适用场景 - 需要把画板上的 **多个同级子图层** 批量导出为 **图片资源 + 坐标信息**，再交给 Cocos Creator、自研编辑器等工具使用。 - 希望 **JSON 结构简单**（节点名、位置、旋转、图片路径），便于脚本解析或与现有管线对接。 ---

批量重命名

一站式多行编辑神器：告别逐一双击修改，像编辑表格一样批量、差异化地管理图层名称与文本内容。 核心功能 集中多行映射： 一行对应一个对象，支持把外部文案直接“粘贴”进去批量替换 图层/文本双效编辑： 既是图层重命名工具，也是文本内容批量修改器 规则一键生成： 支持前后缀、数字递增、查找替换，实时预览修改结果 自带精准搜索： 批量编辑时不迷路，快速检索出特定对象 使用场景 整理图层： 快速为凌乱的多图层分配独立名称，构建清晰的文件结构 填充数据： 将外部文案整列复制粘贴，快速完成数据填充

D2LC

设计稿转布局代码，丢弃传统DSL直接转出来的代码，而是通过算法转出来开发代码

GaiaXConverter

通过插件将图层节点导出为支持 Gaia Studio DSL 的数据，包含描述节点层级关系的 json、描述样式的 css 和描述填充数据的 mock data。

Export to ICO

导出容器为ICO格式图标

zcy-dsl-analyze

zcy交互稿标记及解析

smart-d2c

JSON获取