明确描述移动端场景和核心功能
AI对模糊表达几乎“零容忍”。需要你用自然语言交代三件事:
- 页面类型——比如“iOS风格的健身APP首页”或“微信小程序登录页”,越具体越好
- 必含模块——像“顶部搜索栏、轮播图、3个图标导航栏、商品卡片列表”,把骨架列清楚
- 关键交互与视觉要求——比如“主色#FF6B35,圆角12px,底部Tab栏固定,加入购物车按钮高亮”
举个例子:
“设计一个二手书交易小程序首页:顶部搜索框 + 分类标签栏(教材/小说/教辅),中间推荐书单(封面图+书名+价格+‘立即购买’按钮),底部固定四Tab(首页/发现/发布/我的),整体风格简洁清爽。”
在正确入口启动AI生成
这一步别轻视——必须走对路径,才能触发移动端专属设计逻辑:
- 登录MasterGo后新建空白文件
- 点击顶部工具栏的AI图标 → 选择“AI生成界面”
- 进入页面后,先点选“移动端”模式(不是网页也不是后台),再输入需求描述
- 主题色、明暗模式、圆角等参数可以提前设置好(不是必须,但建议顺手填上)
生成后快速验证与轻量调整
MVP原型核心是验证可用性,不需要像素级完美。生成后做三件事:
- 点击“插入到画布”,检查布局是否贴合用户动线——关键按钮是不是在拇指热区
- 用自然语言指令即时优化:“把‘立即购买’按钮放大20%”、“让分类标签横向滚动”或“隐藏用户头像占位图”
- 添加基础交互:选中按钮 → 右侧属性面板勾选“添加点击跳转” → 关联对应页面(比如跳转到详情页)
导出即用,衔接开发
原型确认无误后,不再需要手动切图或从头写代码:
- 点击右上角【导出】→ 选择框架(Vue / React / 小程序)
- 支持Ant Design Mobile、Vant、WeUI等主流移动端组件库
- 下载ZIP包解压即可运行,关键交互(如Tab切换、按钮跳转)已内置
- 开发者拿到的是带样式、结构、基础逻辑的可执行代码,而非静态图片
