MasterGo AI:快速生成网页设计图AI工具(实践方法)

7,253 阅读4分钟

MasterGo AI 是一款网页在线设计工具,融合了 AI + 设计系统,能够根据网页产品描述快速生成网页设计图。它为产品经理、设计师和开发团队提供了从概念到产品的完整解决方案,显著提升设计效率、激发创意灵感、优化设计流程并促进团队协作。

本文将带你全面了解如何使用 MasterGo AI 工具快速生成 UI 设计图,让设计和开发更高效!

1. 新建文件

  • 点击 MasterGo 主页,登录或注册账号。
  • 点击页面右上角 “新建文件” ,创建一个新的设计文件 image.png

2. 启用 AI 功能

  • 在页面顶部工具栏中,点击 AI 图标,展开下拉菜单。
  • 选择 “AI 生成界面” 选项,进入AI生成页面。

image.png

3. 输入需求描述

  • 根据需求选择 网页版移动端 模式。
  • 输入网页需求描述,并根据需要调整主题颜色、圆角样式、模式(亮/暗色)等。
image.png

案例一: 设计一个售卖健身器材 APP

1. 需求描述:

设计一个售卖健身器材 APP:

  • 顶部含搜索栏、购物车图标和 Logo ;
  • 首页展示促销轮播图、分类导航(如跑步机、哑铃等)和热门产品网格卡片(包含图片、名称、价格、评分、“加入购物车”按钮);
  • 支持价格、品类、评分和促销商品的智能筛选功能 ;
  • 底部固定导航栏提供:首页、分类、购物车、个人中心等功能入口。
2. 设置颜色:
  • 输入主题色代码:#FA2549
image.png
3. 生成网页设计图:
  • 在输入框中填写完页面描述后按回车键,然后等待10秒左右,AI会帮我们生成详情的页面描述,确定需求后,点击 “开始生成” 按钮,即可生成网页设计图 ;
  • 若生成结果不满意,可调整描述,例如 “将整体文字放大 1.5 倍”“优化间距”
生成结果:(APP首页)

BODY-222372@1x.png

:生成好的页面,可以点击下方的插入到画布按钮,进入画布页,会显示页面图层信息,可再次进行编辑


4. 生成商品详情页
  • 在左侧菜单栏中,点击 复制图标,将页面复制并重命名为 “商品详情页” 。复制后的页面将保留原页面的生成记录,你可以在此基础上继续编辑 ;
  • 输入提示词 “生成跑步机商品详情页” ,然后按回车键重新生成商品详情页。
image.png
生成结果:(APP商品详情页)

BODY-175791@1x.png


案例二: 健身器材后台管理系统

1. 需求描述:

设计一个健身器材管理后台,包含以下功能:

  • 用户登录页 ;
  • 订单管理(搜索、筛选、查看订单状态等);
  • 产品管理(支持新增、删除、修改商品信息);
  • 数据统计模块(销售趋势图、热销商品排行榜等)。
生成结果:(订单管理模块)

BODY-196548@1x.png

  • 进一步在订单管理页面添加功能,如添加新建订单弹窗

BODY-196567@1x.png

2. 生成数据看板模块

需求描述:

设计数据看板页面,展示以下内容:

  • 销售额趋势图: 支持按日、周、月显示数据变化 ;
  • 热销商品排行: 列表显示商品名称与销量;
  • 客户分析: 饼图展示客户消费分布、活跃度等 ;
  • 库存预警: 高亮显示低库存商品。
生成结果:(数据看板模块)

BODY-208419@1x.png


案例三: 根据原型图生成UI设计图

  • 在 AI 生成界面中,点击右下角上传图片按钮,导入你的原型图。
image.png

上传的原型图如下:

1732506101412.jpg

需求描述:根据这张原型图,生成一个新闻网站的首页包括导航栏、头条新闻、新闻分类、热门推荐和搜索模块。

生成结果:(基于原型图)

BODY-197502@1x.png


功能扩展与特色

目前 MasterGo AI 工具还支持这些功能:

  • 支持输入英文提示词,自动生成英文版页面
  • 框架代码生成:在设计图右下方点击选项框,会出现 vue + 常用组件库,代码选项,可根据需要选中某项就会生成的框架代码,也可点击代码图标,预览代码和复制代码。

image.png

在开发中的功能:

  • 根据已有页面生成新页面 ;
  • 生成前端开发框架代码,如:React代码,该功能两周内会上;

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