先说一个直接结论:MasterGo AI 本身并不能直接导出 Word 或 PDF 格式的设计文档,但它的自动化能力足以让你绕过手动撰写文档的繁琐过程。它能够自动生成设计规范、组件库、样式变量、交互说明等这些结构化交付物,再通过一些组合操作,就能实现接近"设计文档"的完整输出。关键在于用对模式、选准出口、衔接工具链。

明确可自动化的交付内容
所谓的"UI 设计文档",在 MasterGo AI 的能力范围内,主要覆盖这些核心模块的自动生成:
- 设计规范(Design System):一键生成包含颜色、文字、间距、圆角、阴影等变量定义的 JSON 或 Markdown 文件
- 组件说明卡片:为每个命名组件(比如 Button、Card)自动生成含状态、属性、使用示例的描述块
- 交互逻辑注释:对带状态切换的图层(比如 hover / disabled / loading),AI 自动标注触发条件与跳转关系
- 代码级样式映射表:导出 Tailwind 类名或 CSS 变量与设计值的对应关系,供开发直接引用
配置 AI 自动生成规范与说明
在 MasterGo 编辑界面里,操作并不复杂:
- 首先确保画布中已经建立起清晰的命名体系,比如 "Color/Primary"、"Text/H1"、"Component/Button/Default" 这样的命名规则
- 然后点击顶部菜单栏的 AI 图标 → Chat 模式,输入指令,例如:"生成一份完整的 UI 设计规范文档,包含颜色系统、文字层级、间距规则和按钮组件说明,输出为 Markdown"
- AI 会分析当前画布中的样式定义与组件结构,实时生成结构化文本,支持直接复制或导出为 .md 文件
- 如果需要更正式的 PDF 版本,把生成的 Markdown 粘贴到 Typora 或者 VS Code 配合 Markdown PDF 插件,一键就能转成 PDF
联动导出提升文档完整性
单靠 AI 生成的文本还不够?那可以结合 MasterGo 的原生能力来补全视觉部分:
- 用 「导出为 PDF」 功能批量导出所有画板,勾选"仅导出可见画板",作为视觉参考附录
- 对关键页面启用 「AI 生成代码」→ 选择 Vue/React → 导出 ZIP,里面的 README.md 和 component.docs.tsx 天然就包含了组件用途与 Props 说明
- 使用 「智能组件库」功能 把高频组件发布为团队共享资产,系统会自动生成带预览和参数说明的在线组件页,链接可以直接嵌入文档
进阶:用 MCP 实现文档自动化组装
如果你在使用 Cursor 配合 MasterGo MCP,那还能进一步打通整个流程:
- 配置好 MCP 后,在 Cursor 中运行 Agent,指令可以参考这样写:"获取当前画布的 DSL 数据,提取所有颜色变量和组件结构,生成一份含表格与截图的设计文档 Markdown"
- AI 会调用
getDSL获取底层结构,再结合截图链接(getComponentLink)插入可视化示例,输出一份即用的文档 - 甚至可以配合 GitHub Actions 或 Notion API,设置每次设计稿更新后自动推送新版文档到协作平台
