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 框架代码，代码选项，可根据需要选中某项就会生成的框架代码，也可点击代码图标，预览代码和复制代码。框架代码生成：在设计图右下方点击选项框，会出现 vue 框架 + 常用组件库,还有React 框架代码，代码选项，可根据需要选中某项就会生成的框架代码，也可点击代码图标，预览代码和复制代码。

通过以上步骤，体验了 MasterGo AI 工具快速生成网页设计图的流程。该工具能够将您的产品想法迅速转化为设计图，显著提升工作效率。如果您对 MasterGo AI 感兴趣，不妨亲自尝试，感受它的强大功能！