MasterGo AI生成Dashboard原型的核心是“分步引导+块状精修”，先搭70%还原度骨架，再逐块人工优化细节（字号、间距、色值、组件状态、图表逻辑等）。

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

MasterGo AI 生成高保真 Dashboard 原型，核心不是“一次生成”，而是“分步引导+块状精修”。它能快速搭出结构骨架（约70%还原度），但真正贴近设计稿的细节（字号、间距、色值、组件状态、数据图表逻辑等）需要人工介入调整。关键在方法——不贪全，一块一块来。

明确输入：用结构化描述替代模糊需求

AI 理解“后台看板”太宽泛，需拆解为可执行要素：

• 页面类型：选“网页”模式，勾选“暗色模式”或指定背景色（如 #121212）
• 核心模块：明确列出“顶部导航栏（含用户头像、通知图标）”、“左侧菜单（折叠/展开状态）”、“主内容区（含销售趋势图、订单统计卡片、实时数据表格）”
• 关键细节指令：直接写“卡片圆角8px”、“图表使用 Ant Design 风格”、“表格行高48px”、“所有按钮文字大小14px”
• 双参考并用：上传一张你手绘的 Dashboard 草图（标注重点区域），同时粘贴 MasterGo 设计稿链接——AI 同时看到“长什么样”和“该按什么标准对齐”

生成后不急着导出：先做块状精修

首轮生成结果通常框架正确但细节松散。别整体重来，按视觉动线从上到下逐块优化：

MaterialDesign风格下拉菜单jquery插件

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

下载

• 头部区域：单独选中导航栏，输入“将 Logo 字体加粗、字号调至18px，右侧图标统一尺寸24×24，间距20px”
• 数据卡片：框选单张卡片，提示“保持阴影深度一致，标题文字颜色#666，数值字体#222且加粗”
• 图表区域：不依赖 AI 自动生成图表样式，改为插入 MasterGo 内置的 ECharts 组件，再用 AI 补充图例文案和坐标轴标签
• 表格与操作列：选中整张表，输入“启用斑马纹，操作按钮使用 primary 色，悬停时显示 Tooltip 文案‘编辑’‘删除’”

用 Git 留住每一步修改，不怕试错

Dashboard 往往反复调整，没 Git 就像没备份：

• 在 MasterGo 项目根目录执行 git init 初始化版本控制
• 每次完成一块精修后，运行 git add . && git commit -m "精修-订单统计卡片间距与配色"
• 若某次调整把布局搞乱，一句 git reset --hard HEAD~1 就退回上一版——AI 是加速器，Git 是安全带

导出前检查三处易漏点

很多 Dashboard 原型卡在交付前，问题常出在这几个地方：

• 响应式断点：AI 默认生成桌面端，需手动添加「平板」和「移动端」画板，并用 MasterGo 的自适应布局工具调整栅格
• 交互状态缺失：比如“筛选下拉菜单”只生成了默认态，要补全“展开态”图层，并设置点击触发切换
• 图标资源未替换：AI 可能用占位图标，务必检查所有 icon 是否已换成团队图标库中的 SVG，避免导出后失真