MasterGo AI 如何实现 AI 自动生成 Landing Page 模态框？

MasterGo AI不直接生成模态框，需在需求描述中明确触发方式、内容与样式；使用“弹出”“点击后”等关键词提升识别率；生成后可追加指令调整细节；导出时可通过命名或代码传递交互逻辑。

MasterGo AI 本身不直接生成“模态框（Modal）”这种独立交互组件，而是通过自然语言描述触发页面级结构生成——模态框作为 Landing Page 的一部分，需在需求描述中明确指定其触发场景、内容和样式，AI 才会将其作为完整页面逻辑的一部分自动构建。

明确写出模态框的触发与结构

AI 无法凭空猜测弹窗意图。必须在输入描述中说明“谁触发、何时出现、显示什么”。例如：

• “首页点击‘免费试用’按钮后弹出模态框，包含邮箱输入框、提交按钮和隐私条款勾选”
• “用户滚动至页面底部时自动浮现订阅弹窗，背景半透明遮罩，居中显示标题‘获取更新通知’和邮箱输入区”
• “点击导航栏‘联系我们’，弹出带表单的模态框：姓名、电话、留言字段，底部有‘发送’按钮”

绑定交互逻辑关键词提升识别率

MasterGo AI 对行为动词敏感。使用以下表达能显著提高模态框生成准确度：

• 用“弹出”“浮现”“显示”代替“有”或“包含”
• 标注触发元素：“点击【立即体验】按钮后”“悬停在‘服务详情’图标上时”
• 强调层级关系：“带遮罩层”“浮于主内容上方”“关闭按钮位于右上角”

生成后快速调整模态框细节

首次生成可能仅呈现基础布局。可直接在画布中选中模态框区域，用 AI 聊天框追加指令优化：

• “把模态框圆角改为 12px，阴影加深”
• “将取消按钮改为文字链接，颜色 #666”
• “增加点击遮罩层关闭弹窗的示意箭头”
• “让表单字段间距统一为 24px”

导出时保留交互示意（供开发参考）

MasterGo AI 生成的设计稿默认是静态高保真图。如需向开发传递模态框行为逻辑，可在图层命名中注明（如 “Modal-Subscribe / Trigger: Click CTA Button”），或导出时同步生成 Vue/React 代码——代码中会包含基础结构（<div class="modal">）及显隐控制类名，开发可据此快速接入事件逻辑。