事实上，MasterGo AI 目前无法直接生成可交互的动态图表，也无法连接后端数据接口。然而，如果您的目标只是精确还原 Dashboard 中图表区域的 UI 布局与视觉风格，这款工具表现相当出色。核心技巧在于：不要期望 AI 凭空创造出动态功能，而应将其视为一个普通的设计模块来使用。
清晰指定图表类型与布局参数
AI 对“折线图”“饼图”“数据表格”这类常见术语有一定的理解，但仅靠单一词汇容易导致偏差，需要提供充分的上下文信息。例如：
- 不要只说“加个折线图”，而应描述为“顶部放置一个销售额折线图，横轴为日期，纵轴单位为万元，附带图例和网格线”。描述越具体，生成结果越准确。
- 尺寸参数同样需要明确指定：“折线图区域宽 600px，高 320px，右侧搭配一个同高度的饼图，占比 35%”。这样能显著减少布局错位。
- 视觉特征也需详细说明：“使用主色 #FA2549 绘制折线，背景采用浅灰 #F8F9FA，坐标轴文字设置为 12px”。这些细节直接影响还原精度。
采用双参考策略稳定图表区域输出
仅依赖文字描述，AI 容易过度发挥，导致图表容器比例失调、标签位置偏移。建议采用双管齐下的方法：
- 本地截图：截取设计稿中图表模块的部分，包含标题、图例、刻度等元素，放入 reference 文件夹，让 AI 直观了解真实样貌。
- MasterGo 设计稿链接：所有间距、字体、圆角、阴影等参数严格参照源设计，特别是图例对齐方式、坐标轴粗细等细节，此方法至关重要。
两者结合使用，图表容器的框架、层级、留白通常能得到有效控制。第一轮输出后，结构一致性可达到 70% 以上。
分块精修图表区域，避免整体重绘
当 AI 处理一整页 Dashboard 时，往往难以兼顾全局，图表区域尤为突出。图例错位、标题偏移、网格线缺失等问题频发。正确做法是：
- 首先划定图表模块的边界，例如使用矩形框标注折线图区域。
- 随后针对该区域单独下达指令：“将图例位置调整至右上角，字号统一为 11px，横轴标签垂直居中”。
- 应避免使用“重做整个图表”这类模糊指令，而应采用“将饼图第三区块颜色改为 #5A86E8”这种具体且指向明确的修改方式。
每次只修改一个区块，减少干扰，验证也更快，整体效率反而更高。
导出后补充图表逻辑，不依赖 AI 渲染
MasterGo AI 生成的是静态 UI 图层，图表仅作为占位图形存在。在实际开发中：
- 利用其一键导出 HTML + CSS 的功能，先获取容器结构、尺寸、类名和基础样式。
- 在对应的 div 中接入 ECharts 或 Chart.js 等图表库，使用真实数据替换占位图形。
- 若需实现响应式设计，可启用 MasterGo 的「AI 白板」功能，上传带有标注的原型图，AI 将自动适配多端布局，并保留图表区域的语义化结构。
简而言之，AI 负责“画框”，你负责“填充内容”。分工明确，工作效率自然提升。
