暗色模式
AI 快搭
AI 快搭提供两种使用方式：文件内快搭和新快搭。你可以根据要完成的是一个单页还是一套多页面产品原型，选择合适的方式开始。
选择适合你的快搭方式
| 使用方式 | 适用场景 | 主要特点 |
|---|---|---|
| 文件内快搭 | 在当前设计文件中快速补充或生成一个单页 | 在编辑器内完成描述、生成、预览和修改，适合快速验证页面方向或补充页面内容。 |
| 新快搭 | 从产品想法出发搭建一套多页面产品原型 | 以独立项目为单位，支持持续迭代、版本管理、局部修改和复制到 MasterGo 画布。 |
文件内快搭
文件内快搭适合在正在编辑的设计文件中快速完成一个单页。通过自然语言描述需求，即可生成页面方案，并在当前文件中继续调整和交付。
新快搭
新快搭适合从 0 到 1 探索完整产品方案。它以项目为单位生成和迭代多页面原型，支持根据需要补充页面、查看版本、进行局部修改，并将结果复制到 MasterGo 画布继续设计协作。
新快搭已接入前后端库 MCP。在生成和迭代产品方案时，AI 可以结合已接入的前后端库作为参考，使方案更贴近团队已有的实现和协作方式。
更多使用方式请参阅新快搭。
文件内快搭入口
- 工作台：左侧导航栏 → 点击「AI 快搭」
- 编辑器：左侧面板 → 点击「AI 快搭」
文件内快搭核心能力
| 能力 | 说明 |
|---|---|
| 对话式生成页面 | 自然语言描述需求，AI 理解意图并生成完整页面 |
| 同步生成代码 | 支持 Vue/React 框架、Element Plus/Ant Design 组件库，代码还原度高 |
| 截图参考生成 | 上传参考截图，AI 结合截图布局和视觉结构仿制页面 |
| 设计系统匹配 | 自动匹配或手动选择 design.md，控制颜色、字体、间距、圆角等 |
文件内快搭生成模式
速度优先
快速生成，灵活选择技术框架（Vue/React），支持引用组件库。
质量优先
采用「先理解，再生成」方式，生成前先进行需求分析和设计规范匹配，生成更完整、稳定的页面。
核心流程：
- 需求分析：识别页面类型、目标用户、核心任务、主要模块和信息优先级
- design.md 匹配：让 AI 按项目规范生成，支持选择或定向匹配 design.md
- 截图参考：上传竞品截图、旧页面截图或参考图
- 质量保障：结构质量（信息层级清晰）、视觉质量（风格统一）、场景质量（业务表达准确）
操作步骤
- 点击左侧导航栏「AI 快搭」
- 选择页面类型（网页端/移动端）
- 用自然语言描述想要的页面效果
- 选择生成模式（速度优先/质量优先）
- 可选：上传参考截图、指定 design.md 设计规范
- 点击生成，等待约 10-30 秒
- 实时预览效果，通过对话修改细节
- 确认后插入画布或导出代码
适用场景
- 产品经理/设计师：快速制作单页原型、验证交互方案；如需搭建多页面产品原型，可使用新快搭
- 研发同学：提前理解页面结构、导出前端代码
- 运营人员：活动页面、营销落地页、H5 互动页面
- 市场人员：品牌宣传页、产品介绍页、官网更新
与 AI 设计助手的区别
| AI 快搭 | AI 设计助手 | |
|---|---|---|
| 入口 | 左侧导航栏 | 右侧面板（Option + 3） |
| 生成方式 | 输入需求 → 生成完整多区块页面 + 代码 | 对话式，Agent 模式逐块生成和精细修改 |
| 代码输出 | ✅ Vue/React 代码 | — |
| 截图参考 | ✅ 上传截图仿制 | — |
| 设计规范 | 支持 design.md、预置组件库 | 支持指定团队库 |
常见问题
| 问题 | 解决方法 |
|---|---|
| 生成的页面结构混乱 | 尝试分步骤描述；使用质量优先模式 |
| 生成速度慢 | 复杂页面需要更多处理时间；避开使用高峰期 |
| 代码不匹配设计规范 | 配置 design.md 或指定组件库 |