从CodeBuddy翻车到MasterGo救场,我的小程序UI终于焕然一新

前言

前两天我雄心勃勃地想要使用 CodeBuddy 一口气生成一个完整的小程序,结果,UI 简陋得好像十年前的风格,让我甚至想要直接放弃 CodeBuddy。

《多次尝试用 CodeBuddy 做小程序,最终我放弃了 - 掘金》

昨天反思了一下,也许对 CodeBuddy 的要求过高了?设计这种事情,还是给专业的设计 AI 去做吧。

于是就去找了下,发现 MasterGo 设计效果不错,今天咱就尝试一下。

关于 MasterGo

MasterGo 是一款可在线写作的产品设计工具,主要用于 UI/UX 设计、原型制作和界面设计。

类似于 Figma,设计师可以在浏览器中直接进行设计,无需安装。

日常的原型、设计功能免费版即可使用,AI 设计功能则是每月提供 100 积分,用完后本月只能另想他法了。

100 积分用于移动界面设计,大概可以生成4个页面 ,如果仅仅用于调整,大概可以微调 10 个页面。

实操记录

注册、登录之后,进入工作台。

点击右上角的"设计文件",会自动打开一个新的文件,文件相当于编程中"项目"的概念。

这是一个标准的工作空间布局。

  • 左侧
    • 全部页面列表
    • 单个页面的元素结构
    • 各类资源
  • 中间
    • 上部是各种元素
    • 中间是画布
  • 右侧
    • 属性面板
    • 工具面板

今天,我们主要是利用 AI 生成功能帮我们设计个 UI 效果。

如下图,点击"AI生成页面"。

就会打开我们 AI 模式最常见的对话框。

粘贴上次的需求,并选择"HTML"。

在消耗掉几个账号的 100 积分后,我发现,还是 HTML 生成的效果最好。

MasterGO 比 AI 编程工具好的一点是它会先给你文字描述页面布局,你可以通过文字沟通、优化,直至效果满意。

这个过程是不消耗积分的。

我看返回的结果中没有特别说明风格,就让它调整了下。

调整完成后,点击"开始生成",稍等片刻就能看到对应的界面效果了。

点击下方的"插入到画布",即可在最开始打开的工作空间中进行手动修改。

针对小细节的优化,非常建议手动调整,避免 AI 用力过猛。

全部优化完成后,可以在右侧"导出"部分直接导出一个图片。

来,给大家看下我最终的设计成果。

好了,到这里,我们就拿到了一个比较漂亮的 UI 设计图,后续,我会将其作为参考图交给 AI 编程工具,尝试提升一下生成结果的美观度。

结语

果然,专业的事还得用专业的工具去做,想要一个 AI 搞定全部工作,估计得等到真正的 AGI 到来了。

你有什么私藏的 AI 编程小妙招,可以留言告诉我,我帮大家免费测试哈~

相关推荐
乌恩大侠1 小时前
从 5G 通信到厘米级感知:基于 NVIDIA Aerial、SRS 与 UL-TDOA 构建 6G 无线定位实验平台
人工智能·5g·电信大模型
云和数据.ChenGuang8 小时前
Python 重写(Override)深度解析:从 MRO 到 super() 的完整机制
java·开发语言·人工智能·python·langchain·1024程序员节
西西木科技丨Shopify开发机构8 小时前
CalDigit TS4案例:AI产品图的Shopify整站接入与验收
人工智能·shopify·独立站
2601_965448879 小时前
AI视频制作:做系列节气民俗视频音色不统一,AI 音色克隆省事的方法
人工智能·机器学习·音视频
美狐美颜SDK开放平台9 小时前
视频美颜SDK试用DEMO阶段应该测试什么?直播APP接入实操指南
开发语言·人工智能·深度学习·音视频·美颜sdk·直播美颜sdk·第三方美颜sdk
HRaitest9 小时前
秋招技术岗招聘提效:三类 AI 招聘方案的技术底层与选型逻辑
大数据·人工智能·求职招聘·ai-native
天远数科9 小时前
零信任架构实战:基于天远企业股权变更构建自动化商业银行对公授信存续期股权异动与资产抽逃预警网关
运维·人工智能·架构·自动化
车软学堂9 小时前
从测试转开发,到底要补什么
网络·人工智能·python·功能测试·单片机·车载系统·自动化
海盗123410 小时前
AI 新闻日报 10-28:Atria Dawn 完整版开源、Cursor Agent SDK 转正、Genie 4 实时世界模型
人工智能·机器人·开源·人工智能aigc
志尊宝10 小时前
AI原生前端开发(035):AI时代的工程化最佳实践总结
人工智能·ai-native