明确告诉AI：这是多标签页Dashboard

如果你的提示词只是模糊地写一句“做一个后台Dashboard”，AI大概率会给你一个单页布局。那怎么做？必须把导航结构和页面关系明明白白地告诉它。

• 用“顶部/左侧含标签导航栏，包含【概览】【订单管理】【用户列表】【数据报表】4个可切换标签页”来替代那种模糊的描述。
• 把切换逻辑讲清楚：“点击标签页时，下方主内容区动态切换对应模块，保持头部和侧边栏不变”。
• 为每个标签页补充一句核心内容，比如：“概览页展示卡片式KPI；订单页含搜索栏+表格+操作按钮；用户页带筛选器和分页”。

把话说透了，AI才能明白你的需求，而不是靠猜。

用MasterGo的「页面层级」功能承载标签页

MasterGo里的“页面”（Page）这个概念，天生就是用来对应标签页的。AI生成之后，剩下的就是人工（或半自动）去做结构映射。

• AI首轮输出通常只生成单页。这时候需要手动新建多个Page，比如「Dashboard_Overview」「Dashboard_Orders」，把它们当作各个标签页的容器。
• 把AI生成的对应模块拖进去。比如KPI卡片组就放在「Overview」页，表格组件就放在「Orders」页。
• 最后，一定要统一设计公共区域（顶部导航栏、左侧菜单），然后复制到所有页面，确保视觉上的一致性。这一步很关键，不然切换起来会感觉很割裂。

标签交互靠组件+手动配置，非AI自动生成

MasterGo AI目前还不支持自动生成可交互的Tab切换逻辑。比如点击一个标签，内容区跟着变，这部分还是得设计师手动来完成。

• 可以用MasterGo内置的「组件变体（Variant）」功能：把标签栏做成一个组件，不同的状态（选中/未选中）设为变体，再绑定交互事件。
• 或者用「链接跳转」来模拟：给每个标签设置“跳转到对应页面”的交互，实现页面级别的切换。这个方式在原型演示时效果不错。
• 如果最终需要真实前端效果，导出时选择「Vue/React 代码」。AI会生成带路由结构的基础代码，但具体的Tab切换逻辑，还是需要前端开发来补全。

配合Cursor做块状精修，提升标签页还原精度

如果你发现AI输出的某个标签页（比如「报表」页）图表错位、间距不对，千万别重新跑整页。正确的做法是聚焦到这个有问题的区块，做块状精修。

• 先截图这个标签页的局部（比如折线图区域），放进reference文件夹。
• 在Cursor中上传MasterGo设计稿链接 + 这张截图，然后给出明确的指令：“修正报表页图表容器宽度、Y轴标签字号、图例对齐方式，严格对齐设计稿”。
• 逐页、逐模块地推进，这样能避免跨页干扰，效率反而更高。