使用 MasterGo AI 生成 Dashboard 卡片布局时，关键在于“分步引导”与“结构优先”，而非追求“一步到位”。虽然该工具能快速搭建基础雏形，但若要生成真正可用的布局，仍需您明确告知其方向、数量、对齐方式及间距逻辑——仅凭一句“做个数据卡片”远远不够。

先定骨架：用自然语言锁定基础结构

切勿一开始就陷入细节。应优先搭建整体框架。打开 MasterGo AI，选择“AI 生成界面”功能，然后输入类似以下描述：

• “后台 Dashboard 页面，顶部横向排列 6 张统计卡片，每张卡片宽高比 1:1，等宽等距且左对齐，每张卡片内包含图标、标题、数值及趋势箭头”
• 添加约束条件：“使用系统默认字体，主色 #2563EB，卡片圆角 8px，阴影柔和”
• 避免使用模糊表述，例如“看起来专业一点”或“风格现代”，AI 无法解析此类主观词汇

用双参考提升还原稳定性

仅依赖文字描述，AI 容易产生偏差。因此，建议同步提供两种参考：

• 本地截图：将设计稿中的卡片区域单独截取，放入 reference 文件夹，让 AI 直观看到真实的比例与视觉节奏。
• MasterGo 设计稿链接：确保 AI 能读取原始设计系统中的间距值（如卡片间 gap=24px）、字体层级（H3 标题 16px/20px）以及颜色变量名（如 --color-primary）。
• 两者结合使用，结构还原率可从 50% 提升至 70% 以上，尤其在卡片行列数与对齐基准线上表现更为可靠。

生成后立刻做三件事：校验骨架、启用自动布局、分块精修

第一版生成后，不要急于调整颜色或图标——先稳住布局逻辑：

• 检查卡片是否确实按 6 列横向排列；若错误显示为 3×2 或堆叠，说明方向指令未生效，需重新输入“水平排列 6 张”。
• 选中所有卡片容器，按 Shift+A 添加垂直自动布局（适用于卡片组整体），再对单张卡片内部添加水平自动布局（图标、文字、数值自动对齐）。
• 使用画布上的手柄拖动调节卡片间距，在右侧面板输入精确数值（如 spacing=16px），避免目测误差。

避开高频翻车点：文字图标不切图、背景定位写数值

顶部卡片区域最容易出现问题的地方，往往隐藏在细节中：

• 图标避免使用 PNG 截图：AI 会将其当作静态图拉伸，导致失真。应输入“使用 IconPark 的 trend-up 图标，尺寸 20px，颜色与文字一致”。
• 背景图或渐变需附带定位参数：例如“卡片背景为线性渐变，角度 135deg，起始色 #3B82F6，终止色 #1D4ED8，背景位置 center”。
• 数值单位必须显式声明：写“当前销售额：¥128,450”比“销售额：128450”更容易被识别为数字格式，有利于后续导出代码时保留千分位。