先说一个核心判断：用 MasterGo AI 生成 Wireframe，真正的核心不是“画线框”，而是用结构化描述驱动 AI 理解信息层级与交互逻辑，再自动匹配设计系统规范。它不依赖手绘草图起稿，而是把需求语言直接翻译成可编辑、带语义的线框结构。

用文字精准定义线框结构

AI 生成 Wireframe 的质量，很大程度上取决于你能否把“谁在哪儿、做什么、怎么连”说清楚。不需要多强的美术功底，但得把页面骨架拆解明白：

• 明确页面类型：是移动端首页、后台数据列表页，还是表单提交页？
• 列出核心区块：顶部导航栏、搜索区、主内容区（含卡片/表格/图表）、底部操作栏。
• 说明关键交互点：“点击跳转到详情页”“下拉刷新”“输入后实时校验”。
• 标注约束条件：“所有按钮高度统一为48px”“文字行高1.5倍”“间距使用8px基准”。

让 AI 主动套用设计规范

MasterGo AI 内置对 Ant Design、Element Plus、iOS Human Interface Guidelines 等主流规范的理解。你只需在提示词中点明，AI 就会自动对齐：

• 写下“按 Ant Design 4.x 规范生成后台用户管理列表页”，AI 会用标准的 Table 组件结构、操作列宽度、分页样式。
• 写下“遵循 iOS 17 设计语言，生成设置页线框”，AI 会采用 SF Symbols 图标、圆角文本框、分组列表间距。
• 若团队已有 MasterGo 样式库，AI 可识别并优先调用已定义的字体、颜色变量和组件尺寸。

从线框到可编辑原型一步到位

生成的 Wireframe 不是静态图，而是带图层结构、命名清晰、支持后续修改的可编辑设计稿：

• 每个区块自动分组并标注语义名，如“Header / SearchBar / ProductGrid / TabBar”。
• 文字默认使用占位符（如“标题文字”“副标题”），方便后期替换真实文案。
• 点击“插入到画布”后，可直接拖拽调整位置、修改字号、切换暗色模式，或右键导出 Vue/React 代码。
• 后续想升级为高保真稿？选中任意区域，用“AI 局部重绘”功能补全图标、配色、微交互动效。

用草图辅助生成更可控

如果你已有手绘草图或竞品截图，上传后加一句指令，AI 能精准还原结构并补全规范细节：

• 上传一张白板手绘的登录流程图，输入：“按 Material Design 3 规范还原此流程，输入框用 outlined variant，错误提示放在下方”。
• 截图某电商 App 的商品筛选页，输入：“提取布局结构，替换为 Ant Design 组件，保持筛选项横向滚动，按钮统一为 primary 类型”。
• AI 会识别图中区块数量、相对位置、层级关系，并映射到对应的设计系统组件上，避免主观臆断。