mastergo ai 不直接生成设计说明文档，但通过结构化设计稿、mcp协议解析dsl数据、大模型提示词生成及ai反向代码验证四步闭环，高效支撑ui规范、组件库等文档产出。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
MasterGo AI 本身不直接生成标准设计说明文档（如 UI 规范、组件库文档或交互说明），但它能通过“设计稿理解 + 多工具协同”的方式，高效支撑设计说明文档的产出——关键在于把设计稿变成可被 AI 解读的结构化输入，再结合外部 AI 工具完成文本组织与输出。
设计稿需具备可解析的基础结构
AI 要生成准确的设计说明，前提是设计稿本身有清晰的图层命名、组件嵌套和状态标注。MasterGo 支持手动规范命名（如“Header / Primary / Active”），也支持用 AI 辅助批量重命名和归类。没有结构的设计稿，AI 只能做模糊描述，无法提炼出“按钮禁用态的灰度值为 #999、圆角统一为 8px”这类精确规则。
- 建议在 AI 生成初稿后，人工补全图层语义：比如把“Group 12”改为“SearchBar / WithIcon / Focus”
- 使用 MasterGo 的「组件库」功能提前定义原子组件（Button、Card、Input），AI 后续识别时才能对应到统一规范
- 对交互状态（hover/click/disabled）用 MasterGo 内置的「交互标注」功能标记，这是生成交互说明的关键依据
借助 MCP 协议让 AI “读懂”画布数据
MasterGo 推出的 MCP（Model Context Protocol）服务，能让 Cursor 等支持 MCP 的 IDE 直接读取设计稿的 DSL（Domain Specific Language）结构——这不是截图，而是包含层级、尺寸、颜色值、字体样式、约束关系的原始数据。有了这个，AI 就不是在“看图说话”，而是在“读代码式地分析设计”。
统一LLM网关 - 一个API对接70+AI模型，使用单一API密钥即可调用GPT、Claude、Gemini、Qwen、Deepseek、Grok等主流模型。
- 在 Cursor 中配置 MasterGo MCP Server 并获取 Token 后，选中画布中的某个模块，粘贴其容器链接，AI 就能提取出该模块所有 CSS 属性和嵌套逻辑
- 例如：AI 可自动识别出“顶部导航栏高度为 64px，内含 Logo（宽高比 1:3）、搜索框（宽度占 60%）、用户头像（右对齐，距右边界 16px）”
- 这种结构化输出，可直接作为设计说明文档中“布局规范”“间距系统”“组件参数”章节的数据源
用提示词驱动生成结构化文档内容
拿到 DSL 数据或界面描述后，下一步是用大模型（如 GPT-4、Claude 或文心一言）按模板生成正式文档。MasterGo 不内置此功能，但可无缝对接。核心是写好提示词，明确要求格式、粒度和术语一致性。
- 示例提示词开头：“你是一名资深 UI 设计师，请基于以下 MasterGo 设计稿 DSL 数据，输出一份面向前端开发团队的设计说明文档。要求：分‘全局规范’‘组件说明’‘交互规则’三部分；组件说明需包含尺寸、颜色、字体、状态变体；所有数值单位统一为 px；禁止使用模糊表述如‘差不多’‘看起来合适’。”
- 可将多个页面 DSL 合并输入，让 AI 自动对比并总结共性规范（如“所有卡片圆角均为 12px，阴影统一为 box-shadow: 0 2px 8px rgba(0,0,0,0.08)”）
- 生成后建议用 MasterGo 的「评论」功能，在对应图层上附加说明原文，实现文档与设计稿双向锚定
补充验证：用 AI 反向生成代码来校验说明准确性
一个实用技巧：把刚生成的设计说明文档，再喂给 v0、Galileo AI 或 Cursor，让它生成对应页面的 React/Tailwind 代码。如果代码渲染效果与 MasterGo 原稿一致，说明文档描述足够精确；若出现偏差，则反向定位是哪条说明不清晰，快速迭代修正。
- 比如 AI 生成的按钮代码用了 rounded-lg，但设计稿实际是 rounded-md，就能立刻发现“圆角规范”条款存在歧义
- 这种闭环验证，比纯人工校对更高效，也避免了“以为写清楚了，其实开发看不懂”的常见问题
