GUI-AI-DESIGN-JSON
9
无穷369
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。 剩下的，交给它。

标签

  • 版本 1: 2026年7月17日

最后更新时间：7/17/2026

技术支持：17610086895

标签

AI
JSON
DesignToken
Design

最后更新时间：7/17/2026

技术支持：17610086895