MasterGo AI生成Dashboard侧边栏的关键是让AI理解结构逻辑并提供明确视觉参考：先文字定义功能层级与视觉特征，再叠加截图和设计稿链接双输入，最后用区域工具框定范围精准生成。

☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜

MaterialDesign风格下拉菜单jquery插件

menu.js是一款Material Design风格的jquery下拉菜单插件。通过menu.js插件，你可以非常轻松的制作出Material Design风格的下拉菜单或下拉列表。 使用方法 在页面中引入样式文件menu.css和jquery.min.js、menu.js文件。

下载

直接用 MasterGo AI 生成 Dashboard 侧边栏，关键不是“一键出图”，而是让 AI 理解结构逻辑 + 提供明确视觉参考。实测下来，最稳的方式是：**先用文字描述定义功能与层级，再叠加截图+设计稿链接双输入，最后用区域工具框定范围精准生成**。

明确描述侧边栏的核心结构

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 目前不生成交互态
• 验证响应逻辑：收起态切换时，确认图标居中且文字隐藏，用「自动布局」+「条件可见性」实现，而非手调位置

MasterGo AI 是加速器，不是替代者。侧边栏这类强规范组件，AI 负责搭结构、填内容、保比例，人负责控规范、调交互、验逻辑。配合 Git 备份（git add . && git commit -m "sidebar v1"），改错成本极低。