MasterGo AI 是一款网页在线设计工具，融合了 AI + 设计系统，能够根据网页产品描述快速生成网页设计图。它为产品经理、设计师和开发团队提供了从概念到产品的完整解决方案，显著提升设计效率、激发创意灵感、优化设计流程并促进团队协作。
本文将带你全面了解如何使用 MasterGo AI 工具快速生成 UI 设计图，让设计和开发更高效！
1. 新建文件
- 点击 MasterGo 主页，登录或注册账号。
- 点击页面右上角 “新建文件” ，创建一个新的设计文件
2. 启用 AI 功能
- 在页面顶部工具栏中，点击 AI 图标，展开下拉菜单。
- 选择 “AI 生成界面” 选项，进入AI生成页面。
3. 输入需求描述
- 根据需求选择 网页版 或 移动端 模式。
- 输入网页需求描述，并根据需要调整主题颜色、圆角样式、模式（亮/暗色）等。
案例一： 设计一个售卖健身器材 APP
1. 需求描述：
设计一个售卖健身器材 APP：
- 顶部含搜索栏、购物车图标和 Logo ;
- 首页展示促销轮播图、分类导航（如跑步机、哑铃等）和热门产品网格卡片（包含图片、名称、价格、评分、“加入购物车”按钮）;
- 支持价格、品类、评分和促销商品的智能筛选功能 ;
- 底部固定导航栏提供：首页、分类、购物车、个人中心等功能入口。
2. 设置颜色：
- 输入主题色代码：
#FA2549
3. 生成网页设计图：
- 在输入框中填写完页面描述后按回车键，然后等待10秒左右，AI会帮我们生成详情的页面描述，确定需求后，点击 “开始生成” 按钮，即可生成网页设计图 ;
- 若生成结果不满意，可调整描述，例如 “将整体文字放大 1.5 倍” 或 “优化间距” 。
生成结果：（APP首页）
注：生成好的页面，可以点击下方的插入到画布按钮，进入画布页，会显示页面图层信息，可再次进行编辑
4. 生成商品详情页
- 在左侧菜单栏中，点击 复制图标，将页面复制并重命名为 “商品详情页” 。复制后的页面将保留原页面的生成记录，你可以在此基础上继续编辑 ;
- 输入提示词 “生成跑步机商品详情页” ，然后按回车键重新生成商品详情页。
生成结果：（APP商品详情页）
案例二： 健身器材后台管理系统
1. 需求描述：
设计一个健身器材管理后台，包含以下功能：
- 用户登录页 ;
- 订单管理（搜索、筛选、查看订单状态等）;
- 产品管理（支持新增、删除、修改商品信息）;
- 数据统计模块（销售趋势图、热销商品排行榜等）。
生成结果：（订单管理模块）
- 进一步在订单管理页面添加功能，如添加新建订单弹窗。
2. 生成数据看板模块
需求描述：
设计数据看板页面，展示以下内容：
- 销售额趋势图： 支持按日、周、月显示数据变化 ;
- 热销商品排行： 列表显示商品名称与销量;
- 客户分析： 饼图展示客户消费分布、活跃度等 ;
- 库存预警： 高亮显示低库存商品。
生成结果：（数据看板模块）
案例三： 根据原型图生成UI设计图
- 在 AI 生成界面中，点击右下角上传图片按钮，导入你的原型图。
上传的原型图如下：
需求描述：根据这张原型图，生成一个新闻网站的首页包括导航栏、头条新闻、新闻分类、热门推荐和搜索模块。
生成结果：（基于原型图）
功能扩展与特色
目前 MasterGo AI 工具还支持这些功能：
- 支持输入英文提示词，自动生成英文版页面。
- 框架代码生成：在设计图右下方点击选项框，会出现 vue + 常用组件库，代码选项，可根据需要选中某项就会生成的框架代码，也可点击代码图标，预览代码和复制代码。
在开发中的功能：
- 根据已有页面生成新页面 ;
- 生成前端开发框架代码，如：React代码，该功能两周内会上;
通过以上步骤，体验了 MasterGo AI 工具快速生成网页设计图的流程。该工具能够将您的产品想法迅速转化为设计图，显著提升工作效率。如果您对 MasterGo AI 感兴趣，不妨亲自尝试，感受它的强大功能！
