不少用户在使用 MasterGo AI 制作 Landing Page 时，常会遇到一个困惑：“为什么我详细描述了一堆需求，AI 却没法自动弹出一个模态框？” 其实关键在于——MasterGo AI 本身并不直接生成“模态框”这类独立的交互组件，它更擅长依据自然语言描述来触发页面级的结构生成。换句话说，模态框是作为 Landing Page 的一部分被“附带”构建出来的，前提是你必须在需求描述里明确告诉 AI：谁来触发、何时出现、显示什么内容。下面我们来具体拆解操作步骤。
MasterGo AI 无法凭空猜测弹窗意图。你必须在输入描述里把“触发场景、内容、样式”这三要素一次性讲清楚。例如：
- “首页点击‘免费试用’按钮后弹出模态框，包含邮箱输入框、提交按钮以及隐私条款勾选选项”
- “当用户滚动至页面底部时自动浮现订阅弹窗，背景采用半透明遮罩，居中显示标题‘获取更新通知’和邮箱输入区域”
- “点击导航栏中的‘联系我们’，弹出带表单的模态框：包含姓名、电话、留言字段，底部放置‘发送’按钮”
绑定交互逻辑关键词提升识别率
MasterGo AI 对行为动词尤其敏感。想要提高模态框的生成准确率，用词要精准：用“弹出”“浮现”“显示”替代“有”或“包含”；标注触发元素时写“点击【立即体验】按钮后”“悬停在‘服务详情’图标上时”；别忘了强调层级关系：“带遮罩层”“浮于主内容上方”“关闭按钮位于右上角”。这些关键词一旦用上，AI 的理解能力立刻提升一个层级。
生成后快速调整模态框细节
首次生成的模态框往往只是基础布局，别急着叹气——直接在画布中选中该区域，通过 AI 聊天框追加指令就能进行微调。例如：“将模态框圆角改为 12px，阴影加深”“把取消按钮改为文字链接，颜色 #666”“增加点击遮罩层关闭弹窗的示意箭头”“让表单字段间距统一为 24px”。你会发现，AI 对这种局部调整的响应速度远快于重新生成。
导出时保留交互示意（供开发参考）
MasterGo AI 生成的设计稿默认是静态高保真图。如果你需要向开发同学传递模态框的行为逻辑，有两种方式：一是在图层命名中直接注明，比如“Modal-Subscribe / Trigger: Click CTA Button”；二是导出时同步生成 Vue/React 代码——代码里会自动带上基础结构（）和显隐控制类名，开发拿到手就能快速接入事件逻辑，省去手动编写样式和联调的麻烦。