MasterGo AI 生成 Dashboard 导航组件的关键是结构化描述与分步引导：明确导航类型（如左侧垂直栏或顶部Tab）、绑定设计系统参数（主题色、图标风格、间距圆角）、双参考提升精度（截图+设计稿链接），并块状精修+Git版本管理。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
MasterGo AI 生成 Dashboard 导航组件，关键不是“一键生成完整导航”，而是用结构化描述+分步引导，让 AI 精准输出可编辑、符合后台规范的导航区块。
明确导航类型和位置
AI 需要区分是顶部全局导航（如 Logo + 搜索 + 用户头像）、左侧垂直菜单（含折叠/展开），还是顶部二级 Tab 标签栏。在提示词中直接点明：
- 写清楚：“左侧固定垂直导航栏，包含图标+文字，支持收起状态”
- 或：“顶部水平导航，含首页、订单管理、产品库、数据看板四个主入口，当前‘数据看板’高亮”
- 避免模糊表述，比如“做一个导航”——AI 无法判断上下文和交互逻辑
绑定设计系统参数
导航不是孤立元素，需对齐整个 Dashboard 的视觉规范。输入时同步指定：
MaterialDesign风格下拉菜单jquery插件
下载
menu.js是一款Material Design风格的jquery下拉菜单插件。通过menu.js插件，你可以非常轻松的制作出Material Design风格的下拉菜单或下拉列表。 使用方法 在页面中引入样式文件menu.css和jquery.min.js、menu.js文件。
- 主题色：例如“主色调 #1677FF，选中态背景为 #E6F7FF，文字默认 #595959”
- 图标风格：写明“使用 Ant Design 图标集，线性风格，20px 尺寸”或“自定义 SVG 图标，与 MasterGo 设计稿中一致”
- 间距与圆角：例如“菜单项高度 48px，内边距 16px，未选中项圆角 4px，选中项左侧蓝条宽度 4px”
用双参考提升还原精度
单靠文字描述容易失真。推荐组合使用：
- 本地截图参考：把目标导航区域单独截图，放入 reference 文件夹，命名如 “nav-left-collapsed.png”
- MasterGo 设计稿链接：提供完整 Dashboard 页面链接，让 AI 获取字号、行高、层级关系等隐性规范
- 两者并用后，导航的结构准确率明显提升，图标对齐、文字截断、hover 状态等细节更可控
生成后立即做块状精修
首版导航常存在框架错位、图标尺寸不一、文字溢出等问题。不要整体重来，按块处理：
- 选中 Logo 区域 → 输入指令：“Logo 宽度固定 120px，右侧留白 24px”
- 选中单个菜单项 → 输入：“图标统一 20×20，文字字号 14px，行高 22px，左侧间距 24px”
- 选中收起状态 → 输入：“仅显示图标，宽度收缩为 64px，图标居中，悬停时显示 Tooltip”
不复杂但容易忽略：导航组件一旦生成，立刻用 Git 提交一次（git add . && git commit -m "init nav component"），后续每调一块就 commit 一次，改错了也能快速回退。
