利用 MasterGo AI 生成带标签页的原型时，核心不在于套用模板，而在于用结构化语言清晰描述“谁在什么位置、如何切换、呈现什么状态”。只要精确说明标签容器、默认选中项、内容联动逻辑以及视觉特征，AI 就能一次性输出可直接编辑的高保真页面，大幅减少后期调整工作量。

换言之，AI 无法自主判断你想要的是顶部 Tab 还是底部 TabBar，也不会默认“点击后内容区切换”。因此，提示词中必须将这些细节写死。接下来分几个环节详细拆解，每个环节都值得深入阐述。

明确标签页的结构与行为

这点是基石。需要在提示词里写清楚三件事：

• 位置与数量——例如“底部固定 TabBar，包含 5 个图标：首页、发现、+、消息、我的”；或“顶部可水平滑动的 Tab 标签，共 4 个：全部、新品、热销、折扣”。越具体越好，避免模棱两可。
• 默认激活态——直接写明“首页默认高亮，图标填充实心，文字加粗”，或者“‘全部’标签处于选中状态，底部有蓝色指示条”。AI 需要明确哪一项是初始高亮状态。
• 内容联动逻辑——补充说明“点击不同标签时，下方内容区显示对应模块，例如‘发现’页展示类似小红书的笔记瀑布流”。这一步决定了原型是否具备交互动态，而非静态示意图。

指定视觉样式与交互反馈

标签页是否有圆角？图标尺寸多大？选中状态颜色值多少？悬停或点击时是否有反馈效果？这些细节直接决定 AI 生成的还原度。建议采用参数化方式描述，避免使用“大概”“差不多”这类模糊词语：

• 用十六进制色值明确主色，例如“选中态颜色 #FA2549，未选中态 #999”。
• 标注尺寸规范：“Tab 图标尺寸 24×24px，文字字号 12px，行高 16px”。
• 交互反馈不可省略：“点击 Tab 时图标轻微缩放（0.95 倍），文字颜色瞬间加深”。即使是很细微的反馈，AI 也能将其绘制出来。

避免常见歧义表述

自然语言中的“类似”“大概”“差不多”等词汇，AI 无法准确解析。必须替换为确定性表达。举几个例子：

• ❌ “做一个带几个标签的页面” → ✅ “底部 TabBar，5 个等宽标签，图标居中、文字在下，间距 16px”。
• ❌ “点击标签切换内容” → ✅ “点击‘分类’标签后，下方区域展示 6 个圆形分类图标，每行排列 3 个”。
• ❌ “风格简洁” → ✅ “使用 SF Pro Display 字体，圆角 8px，背景纯白，阴影仅应用于选中状态的标签”。

生成后快速微调标签逻辑

初次生成可能只得到静态 Tab 结构，这很正常。此时无需重写整段提示词，直接输入局部优化指令即可：

• “将‘+’按钮修改为中间凸起样式，高度比其他 Tab 高 8px”。
• “为‘消息’标签右上角添加红色未读数量气泡，显示数字 3”。
• “将 TabBar 背景设置为半透明毛玻璃效果（blur: 10px, backdrop-filter: blur(10px)）”。

这些细节微调反而比从头编写提示词更高效，也更能彰显你对设计细节的把控能力。