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 感兴趣,不妨亲自尝试,感受它的强大功能!