mastergo ai 重构 dashboard 的核心是“分层引导+系统约束+迭代精修”：先校准骨架（双参考锁定布局），再精修卡片（拆解嵌套逐块喂参），最后连数据逻辑（理解字段语义），最终直出可落地的生产级代码。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
MasterGo AI 重构复杂 Dashboard 界面，核心不是“一键生成”，而是“分层引导 + 系统约束 + 迭代精修”。它不靠单次指令猜对全部细节，而是依托设计系统理解业务逻辑，在结构、样式、数据表达三个层面逐级推进。
先校准骨架：用双参考锁定布局逻辑
Dashboard 的成败首先取决于布局框架是否准确。AI 容易在栅格系统、响应断点、模块优先级上出错——比如把统计卡片排成单列而非三栏，或误判侧边导航与主内容区的宽度比。
- 必须同时提供：本地截图（含关键模块局部图）+ MasterGo 设计稿链接。截图帮 AI 快速识别视觉节奏，链接则强制其读取企业级设计规范（如 Ant Design 的间距 token、色值变量）
- 首轮生成后，立刻检查顶部导航、侧边栏、主内容区三大区域的容器层级和占比关系。哪怕只差 5px，后续所有卡片对齐都会偏移
- 若骨架错误，不要微调，直接重输指令：“请严格按设计稿链接中的 Layout Grid 生成基础容器结构，忽略所有图标和文字内容”
再精修卡片：拆解嵌套结构，逐块喂参
Dashboard 最易翻车的是顶部统计卡片组——它们常含图标、数值、趋势箭头、单位、刷新时间等多层元素，且彼此间距、对齐方式、交互态（悬停/点击）高度敏感。
MaterialDesign风格下拉菜单jquery插件
下载
menu.js是一款Material Design风格的jquery下拉菜单插件。通过menu.js插件，你可以非常轻松的制作出Material Design风格的下拉菜单或下拉列表。 使用方法 在页面中引入样式文件menu.css和jquery.min.js、menu.js文件。
- 避免整页截图输入。把每张卡片单独截图，命名如 card-sales-today.png，并配文字说明：“销售今日达成，数值右对齐，箭头为绿色↑，单位‘万元’，字体大小 14px”
- 对图标类元素，明确标注来源：“使用 Ant Design 的 rise 图标，尺寸 16×16，颜色 #1677FF”
- 遇到数值动态变化场景（如实时订单数），可追加提示：“数值区域预留 80px 宽度，支持 4 位数字自动缩进”
最后连数据逻辑：让 AI 理解字段语义，不止画框
真正专业的 Dashboard 不只是像素还原，还要匹配真实数据维度。AI 若只认样式，会把“转化率 92.3%”和“用户数 1,247”当成纯文本处理，丢失指标类型差异。
- 在描述中加入字段定义：“‘近7日活跃用户’是 DAU 指标，需带折线图；‘跳出率’是百分比型指标，需显示小数点后一位”
- 利用 MasterGo AI 设计助手已学习的企业 Design Tokens，直接调用变量名：“图表标题使用 text-title 字号，数值标签使用 text-body，背景色取 bg-card”
- 对筛选控件，强调行为逻辑：“日期范围选择器默认展开，支持‘最近7天’‘本月’快捷选项，选中态背景为 primary-light”
导出即可用：从设计稿直通前端代码
重构完成的设计稿，可直接触发 D2C Pro 功能生成生产级代码。这不是静态 HTML，而是带状态管理、响应式适配、组件化结构的真实工程文件。
- 选择目标框架（React / Vue），指定组件库（Ant Design / Element Plus），AI 会自动映射设计层组件为对应库的 Card、Statistic、LineChart 等
- 视觉还原度达 85%-90%，尤其在间距、圆角、阴影、禁用态等细节上保持高一致性
- 生成的代码自带 TypeScript 类型定义和基础 Props 接口，前端工程师只需填充数据源，无需重写 UI 结构
