MasterGo AI 生成 Dashboard 头部组件的关键是精准引导与分块打磨。需截图+设计稿链接双输入，明确字体、间距、颜色等参数；统计卡片文字须独立可编辑，图标用矢量；生成后及时刷新资源、替换占位图、锁定主容器；通过自然语言逐项迭代优化。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
MasterGo AI 生成 Dashboard 头部组件，关键不在“一次全出”，而在“精准引导+分块打磨”。头部看似简单，实则包含导航栏、搜索框、用户头像、通知图标、统计卡片群等多层嵌套结构，AI 容易错位、失比例或忽略响应逻辑。直接丢一句“生成后台头部”效果通常很弱。
先喂对参考：截图 + 设计稿链接双输入
只给 MasterGo 链接，AI 可能抓不准字号层级；只放截图，又容易忽略间距规范和交互状态（比如 hover 下拉菜单）。必须两者并用：
- 把目标 Dashboard 的头部区域单独截成高清图，存入 reference 文件夹，命名如 header_full.png；
- 在 AI 输入页粘贴 MasterGo 原始设计稿链接，并明确写：“以该链接中 Header 区域为准，严格对齐字体大小（14px）、行高（20px）、图标尺寸（20×20）、各元素间距（左侧 logo 到搜索框 24px，右侧头像到边距 16px）”；
- 避免模糊描述，例如不说“看起来清爽”，而说“背景色 #FFFFFF，顶部细边框 #F0F0F0，文字颜色 #333333”。
避开高频翻车点：卡片与图标别切图
头部若含统计卡片（如“总订单数”“待审核”等），千万别让 AI 把文字+图标一起当图处理——这会导致缩放失真、无法编辑、适配性差。正确做法是：
MaterialDesign风格下拉菜单jquery插件
下载
menu.js是一款Material Design风格的jquery下拉菜单插件。通过menu.js插件，你可以非常轻松的制作出Material Design风格的下拉菜单或下拉列表。 使用方法 在页面中引入样式文件menu.css和jquery.min.js、menu.js文件。
- 在提示词中强调：“所有卡片内文字独立可编辑，图标使用矢量 icon（如 Ant Design 的 icon-user），不合并为位图”；
- 若已有 MasterGo 组件库（如 Ant Design for MasterGo），可追加指令：“优先调用组件库中的 Avatar、Badge、Dropdown 组件”；
- 背景图若存在（如渐变横幅），务必指定定位方式，例如：“背景线性渐变从 #1890FF 到 #40A9FF，覆盖整个 header 高度，不重复，居中垂直铺满”。
生成后立即做三件事：刷新、替换、锁定骨架
首版出来后，别急着改细节。先稳住结构再优化：
- 刷新资源：如果替换了图标或上传了新 logo，必须点击右上角“刷新引用资源”，否则 AI 仍按旧图理解；
- 手动替换占位图：AI 生成的 placeholder 图片先删掉，拖入真实 logo 或头像 SVG，再选中图层 → 右键 → “设为智能对象”，保持缩放清晰；
- 锁定主容器：选中 header 整体 Frame，右键 → “锁定图层”，防止后续调整时误拖动整体结构，确保所有子元素在固定区域内精修。
小步迭代：用自然语言指令逐项修正
不要写“把头部做得更好”，要用可执行的短指令，每次只改一个点：
- “把搜索框宽度设为 280px，圆角 6px，左侧加放大镜图标”；
- “用户头像右上角添加红色未读角标，数字为 3”；
- “六个统计卡片改为两行三列，每张卡片宽 180px，间距 16px”；
- “通知图标 hover 时显示下拉面板，高度 240px，含 4 条消息项”。
不复杂但容易忽略：头部是 Dashboard 的视觉锚点，结构稳了，后面内容区才好对齐。块状精修法在这里特别管用——先保框架，再填内容，最后调交互态。
