MasterGo_AI_怎么实现_AI_自动生成原型侧边栏导航逻辑？

MasterGo AI 做的，是生成一个带侧边栏的静态界面原型，但交互逻辑这块，它确实不会自动帮你搞定。所以，你需要手动来配置。具体来说，分几个步骤来走：先让 AI 画出展开和收起两种状态，再通过画板切换或覆盖层把交互加上，然后为每个菜单项设置跳转，最后别忘了复用组件、规范命名，提前把页面流程搭好。

说白了，MasterGo AI 不直接“实现”侧边栏的交互逻辑，它负责的是

换个说法：AI 帮你把“有侧边栏的页面”画出来了，但要让页面动起来，还得你来动手连接。

让 AI 生成带侧边栏的页面（基础结构）

输入清晰、结构化的提示词是关键。举个例子：

• “生成一个后台管理系统首页，左侧为固定宽度侧边栏导航，包含‘仪表盘’‘用户管理’‘订单列表’‘设置’四个菜单项，当前‘用户管理’高亮；右侧为主内容区，显示空白卡片”
• 或者更进一步：“……侧边栏支持收起/展开状态，收起时只显示图标，展开时显示文字和图标”

AI 会据此生成至少两个视觉状态（展开版 + 收起版），或者一个默认展开的版本。如果你没提“收起”，它大概率只给一个展开态——所以提示词里明确写上“支持收起/展开”，很有必要。

手动添加侧边栏展开/收起交互（关键步骤）

AI 生成后，你需要在 MasterGo 中补上交互逻辑。常用两种方式：

• 方式1：双状态画板切换（推荐新手）
  • 把 AI 生成的“展开态侧边栏”放在画板A，“收起态侧边栏”放在画板B
  • 在画板A中，选中“收起按钮”（或汉堡图标）→ 右侧「原型」面板 → 添加交互 → 触发：点击 → 动作：跳转到画板B
  • 在画板B中，选中“展开按钮”（或任意区域）→ 同样设置跳转回画板A
  • 可以加上滑动或淡入转场，增强真实感

• 方式2：覆盖层（Overlay）实现悬浮展开
  • 将收起态的主界面作为底图（画板A）
  • 单独建一个Frame，只画出展开后的侧边栏内容（无背景、透明底）→ 命名为“侧边栏弹层”
  • 在画板A中，选中触发图标 → 添加交互 → 动作选“打开覆盖层” → 目标选“侧边栏弹层”
  • 再为弹层内的“关闭X”添加交互 → 动作选“关闭覆盖层”
  • 这种方式更接近真实App体验，且不打断主流程

让侧边栏菜单支持页面跳转（进阶交互）

AI 生成的菜单项只是静态文本或组件，点击无效。你需要逐个配置：

• 选中“用户管理”文字或容器 → 添加交互
• 触发：点击
• 动作：跳转到对应页面（如“用户列表页”画板）
• 如果该页面尚未存在，MasterGo 会自动把它加入当前流程

需要警惕的是：所有目标页面必须已纳入同一个「流程」，否则跳转会失败。建议先搭好页面骨架（仪表盘、用户页、订单页……），再让 AI 生成各页的侧边栏，最后统一连线。

小技巧提升效率

• 复用组件
  ：把侧边栏做成「组件」，在不同页面中插入。修改一处，全部同步更新

• 命名规范
  ：给画板起名如 Sider_Open / Sider_Collapsed，避免后期找不到

• 状态标注
  ：在画布角落加小字说明“此为展开态”，方便协作评审

• 结合AI迭代
  ：第一次生成不满意？复制提示词，加一句“把菜单图标换成线性风格，增加二级菜单箭头”，再生成对比优化

不复杂，但容易忽略。