MasterGo AI 不连接数据库，仅生成高保真可视化设计稿；需提供结构化指令、双参考输入、分块迭代生成，并导出匹配技术栈的代码框架。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
MasterGo AI 本身不直接连接数据库或实时数据源，它不做后端渲染，也不执行图表计算。所谓“Dashboard 数据可视化设计”，本质是用 AI 快速生成符合业务逻辑、视觉规范、交互意图的高保真界面稿——也就是把数据看板的结构、组件布局、图表占位、状态样式等，精准还原到设计画布上。关键不在“配置 AI”，而在如何给 AI 提供足够清晰、结构化、可对齐的设计指令。
明确 Dashboard 的核心模块与数据语义
AI 不理解“销售额环比增长”这种抽象表述，但能识别“折线图展示近30天日销售额，Y轴单位为万元，带同比箭头标识”。描述时要拆解为视觉元素+数据含义：
- 把“销售趋势图”写成：“顶部横向折线图，X轴为日期（最近7天），Y轴数值范围0–50万，曲线颜色#3B82F6，带今日数值气泡标注”
- 把“热销商品榜”写成：“左侧竖排排行榜卡片，共5项，每项含商品缩略图、名称（14px）、销量数字（加粗）、‘↑12%’绿色上升箭头”
- 避免模糊词如“美观”“专业”，改用“采用 Ant Design 风格卡片，圆角8px，阴影为 0 2px 8px rgba(0,0,0,0.08)”
用双参考输入锚定设计一致性
单靠文字描述容易失真。实测中效果最好的方式是组合使用：
- 本地截图参考：提前截取你团队已有的标准图表组件（比如统一使用的柱状图模板、指标卡样式），放入 reference 文件夹上传
- MasterGo 设计稿链接：提供完整 Dashboard 规范文档或主页面链接，让 AI 明确知道字号/色值/间距的唯一依据
- 两者并行输入后，AI 对“指标卡高度=120px”“图表标题用 16px SemiBold”这类细节的还原准确率明显提升
分块生成 + 层级迭代，别指望一稿到位
整个 Dashboard 拆成 3–5 个逻辑区块分别生成，比一次性描述整页更可控：
- 先生成「顶部概览区」：包含 4 个 KPI 卡片（营收、订单量、转化率、复购率），注明每个卡片图标、数值格式、变化趋势色
- 再生成「中部趋势图区」：指定图表类型（折线/柱状/面积）、维度（日/周/月）、交互提示（悬停显示明细）
- 最后生成「底部明细表格」：列名（订单号、客户、金额、状态）、状态标签样式（待发货=橙底白字）、操作列按钮（查看、导出）
- 每块生成后插入画布，用 MasterGo 的图层管理功能单独调整位置与对齐，再统一检查间距和字体层级
导出时选对框架，避免前端返工
生成完成后，别只导出图片。在“插入画布”后，点击右上角「代码生成」按钮，选择匹配你技术栈的输出：
- 若前端用 React + Ant Design，选「React + AntD」，会生成带 Card、Statistic、LineChart 占位的 JSX 结构
- 若用 Vue3 + Element Plus，选对应组合，图表区域会预留 ECharts 容器 ID 和响应式类名
- 生成的代码不含真实数据逻辑，但 DOM 结构、class 命名、嵌套关系与设计稿严格一致，开发可直接填充数据接口
