mastergo ai生成dashboard的关键在于分步引导与精准校准。需双参考输入（设计稿链接+本地模块截图）、块状精修（框架→模块→交互）、代码级校验（class命名/css单位/变量提取）及规范提示词固化，实现高效对齐设计系统。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
MasterGo AI 生成符合设计规范的 Dashboard，关键不在“一次生成”，而在“分步引导+精准校准”。它不会自动读取你脑子里的设计标准，但能快速响应明确指令，并在结构、间距、色值、字体层级等维度严格对齐规范——前提是给对输入、用对方法。
双参考输入：让AI理解什么是“规范”
只丢一个设计稿链接，AI容易忽略细节；只贴一张截图，又容易失真模仿。真正稳定还原规范，需要同时提供：
- MasterGo 设计稿链接：作为唯一权威依据，确保所有尺寸、色值（如 #2563EB）、字号（如 H1=24px）、圆角（如 8px）、行高（如 1.5）都以该稿为准；
- 本地关键模块截图：比如头部导航栏、数据卡片、图表容器等，放进 reference 文件夹，帮 AI 建立视觉锚点，尤其强化对组件比例和留白节奏的感知。
两者协同，首版骨架还原度可达 70%，结构和整体氛围基本成立，为后续精修打下可靠基础。
块状精修：从框架到细节逐层对齐
AI 不擅长“全局优化”，但特别适合“单点攻坚”。建议按页面逻辑自上而下分块处理：
- 先调框架布局：确认栅格系统（如 12 列）、主内容区宽度（如 1200px）、侧边栏占比（如 20%），避免后期大改；
- 再修核心模块：比如数据卡片，明确指令：“卡片高度统一为 160px，内边距 16px，标题字号 14px 加粗，数值字号 20px，右上角状态标签使用 #3B82F6 背景”；
- 最后抠交互细节：如 hover 状态、loading 占位、空状态文案对齐方式，用自然语言描述行为，而非仅外观。
每次只聚焦一个区域，修改后及时保存版本（git commit -m "修复卡片间距与字体层级"），避免无效返工。
MaterialDesign风格下拉菜单jquery插件
下载
menu.js是一款Material Design风格的jquery下拉菜单插件。通过menu.js插件，你可以非常轻松的制作出Material Design风格的下拉菜单或下拉列表。 使用方法 在页面中引入样式文件menu.css和jquery.min.js、menu.js文件。
代码级校验：用导出能力反向验证规范
生成后别急着交付，直接点击「一键代码导出」查看 HTML/CSS 输出：
- 检查 class 命名是否语义化（如 .dashboard-header、.metric-card）；
- 核对 CSS 中的 rem/em 单位是否统一（如 font-size: 1rem 对应 16px）；
- 确认颜色变量是否提取（如 --primary: #2563EB），而非硬编码色值。
如果导出代码已接近团队前端规范，说明 AI 对齐成功；若存在大量内联样式或像素值，就回头补一句提示词：“请使用 CSS 变量管理主题色，所有尺寸基于 16px 基准换算”。
持续迭代：把规范写成 AI 可执行的语言
不要指望 AI 自动记住你的设计系统。每次生成前，可在提示词开头固定加入规范声明：
「遵循 Ant Design 5.0 规范：基础字号 14px，主色 #1677FF，卡片圆角 6px，间距单位 8px 倍数，禁用斜体与手写体」随着使用次数增加，AI 会逐步适应你的表达习惯。长期下来，同一套规范指令可复用于登录页、列表页、表单页，真正实现“一处定义、多处生效”。
