mastergo ai 不直接导出 word/pdf 设计文档,但可自动生成设计规范、组件说明、交互注释、样式映射等结构化内容,并支持导出 markdown,再转 pdf 或联动工具链完成完整交付。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜

MasterGo AI 本身不直接导出“UI 设计文档”这类 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,可设置每次设计稿更新后自动推送新版文档到协作平台











