mastergo ai生成dashboard侧边栏的关键是让ai理解结构逻辑并提供明确视觉参考：先文字定义功能层级与视觉特征，再叠加截图和设计稿链接双输入，最后用区域工具框定范围精准生成。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
menu.js是一款Material Design风格的jquery下拉菜单插件。通过menu.js插件，你可以非常轻松的制作出Material Design风格的下拉菜单或下拉列表。 使用方法 在页面中引入样式文件menu.css和jquery.min.js、menu.js文件。
明确描述侧边栏的核心结构
AI 不懂“后台常用侧边栏”这种模糊概念，必须拆解成它能执行的指令：• 功能入口数量：比如“共7个一级菜单项，含首页、数据看板、用户管理、订单中心、商品库、系统设置、帮助中心”
• 层级关系：注明哪些有二级菜单（如“订单中心下展开‘待处理’‘已完成’‘退款管理’”）
• 视觉特征：写清“顶部固定 Logo 区域，菜单项带图标+文字，选中态高亮蓝色（#1890FF），未选中为灰字（#666），收起态仅显示图标”
• 布局约束：“宽度固定200px，顶部留白48px，菜单项垂直间距12px，图标尺寸20×20px”
双参考输入提升还原稳定性
单靠文字容易跑偏，务必配合两种参考：• 本地截图：截一张你认可的同类侧边栏（比如 Ant Design 或内部已有系统），放进 reference 文件夹，让 AI 快速建立视觉锚点
• MasterGo 设计稿链接：提供完整 Dashboard 页面链接，强调“侧边栏须严格对齐该稿中的字号（14px）、行高（22px）、缩进逻辑（二级菜单缩进24px）”
• 注意：不要切文字或图标图——AI 会失真；背景图需注明“背景色 #FFFFFF，无纹理”
用「区域工具」限定生成范围
避免 AI 把整个页面重绘，聚焦侧边栏本身：• 在画布上用区域工具（快捷键 Q）拖出一个 200×800px 的矩形框
• 双击区域标题，命名为“Sidebar_AI_Gen”
• 选中该区域 → 点击右侧面板「开启可开发状态」→ 再触发 AI 生成
• 这样 AI 会把输出严格限制在区域内，且后续研发模式能直接提取该区块代码
生成后必做的三步精修
首版通常只完成骨架（约70%），细节要人工介入：• 检查图标一致性：统一替换为 MasterGo 内置 Iconfont 图标库，别用 AI 生成的矢量小图
• 校验交互反馈：手动添加 hover/active 状态样式，AI 目前不生成交互态
• 验证响应逻辑：收起态切换时，确认图标居中且文字隐藏，用「自动布局」+「条件可见性」实现，而非手调位置
