MasterGo AI 生成线框图的核心是用结构化文字描述驱动AI理解信息层级与交互逻辑，自动匹配设计规范；需明确页面类型、核心区块、关键交互及约束条件，支持Ant Design等主流规范，输出可编辑、带语义的原型稿。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
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 会识别图中区块数量、相对位置、层级关系，并映射到对应的设计系统组件上，避免主观臆断
