mastergo ai 不支持运行时交互编程，仅提供视觉交互示意、交互说明文档和预置交互组件的代码导出。它通过状态组件表达意图、chat 输出逻辑描述、导出含基础交互的框架代码实现分层交付。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
MasterGo AI 本身不直接支持「交互逻辑编程」或运行时事件绑定（比如点击跳转、表单验证、状态切换），它定位是高保真 UI 设计生成与规范协同工具，不是前端开发环境。所谓“Landing Page 交互设计”，在 MasterGo AI 中实际指：视觉层的交互示意 + 可交付的交互说明 + 后续导出为带基础交互的代码，而非在画布里写 JS 或跑动效。
明确交互设计的三类实现层级
MasterGo AI 支持的是分层落地，不是一步到位：
- 视觉交互示意：用状态组件（如按钮 Hover/Pressed、Tab 切换前后、弹窗展开）表达交互意图；AI 可根据提示词生成多状态图层，但需手动切换或标注
- 交互说明文档：通过 Chat 模式让 AI 输出交互逻辑描述（例如：“点击‘免费试用’按钮后，弹出表单模态框，聚焦邮箱输入框，提交失败时显示红色提示”）
- 代码级交互还原：生成 Vue/React 代码时，AI 已预置常见交互结构（如 Ant Design 的 Modal、Tabs、Form），可直接运行基础交互，无需手写事件绑定
配置步骤：从需求到可交互交付
以生成一个带「订阅表单+滚动锚点导航」的 Landing Page 为例：
- 第一步：输入带交互意图的描述 不要只写“首页有导航栏和邮箱输入框”，改写为： “生成科技感 Landing Page：顶部固定导航栏含 4 个锚点链接（首页/功能/客户/联系），点击平滑滚动；主标题区下方嵌入订阅表单，含邮箱输入框、‘立即订阅’按钮；按钮悬停变色，点击后显示‘已提交’Toast 提示；页面底部有页脚版权信息。”
- 第二步：启用多状态生成（关键动作） 在 AI 生成结果插入画布后，选中按钮 → 点击右上角「+ 状态」→ 添加 Hover / Pressed / Disabled 状态图层； 对 Tab 或导航菜单，复制图层并手动标注「当前激活项」样式（AI 不自动识别逻辑状态，但能帮你批量生成不同状态视觉稿）
- 第三步：用 Chat 模式补全交互规则 切换到 Chat 模式，上传当前画布截图，提问： “请根据此 Landing Page 设计稿，输出完整交互说明文档，包括：1）导航栏锚点跳转行为与动效要求；2）订阅表单的校验规则（邮箱格式、必填）、成功/失败反馈方式；3）Toast 提示的出现位置、持续时长、关闭方式。” AI 会返回结构化文本，可直接贴入协作备注或交付给前端
-
第四步：导出带交互能力的代码
右键画布 →「导出代码」→ 选择框架（如 React + Ant Design）→ 勾选「包含交互组件」；
生成的代码中，
Button自带loading和onClick占位，Modal和Message已引入，只需补少量业务逻辑
哪些交互它做不了？提前规避预期偏差
以下需开发介入，MasterGo AI 不处理：
- 表单真实 API 请求与后端联调（AI 只模拟 Toast，不发请求）
- 复杂状态管理（如用户登录态影响导航栏文案）
- 自定义动画曲线（如贝塞尔缓动滚动，仅支持浏览器默认 smooth）
- 响应式断点下的交互逻辑变化（如移动端汉堡菜单展开逻辑，AI 可生成视觉，但 JS 控制需手写）
真正高效的 Landing Page 交互工作流，是把 MasterGo AI 当作交互视觉原型机 + 交互说明书生成器 + 代码脚手架，而不是替代开发。配置重点不在“开启某个开关”，而在于用精准语言描述行为、分状态构建图层、借 Chat 补逻辑、靠导出代码省重复劳动。
