使用 AI 生成界面有没有遇到过这种情况:功能布局都已经确定,界面效果又总是达不到自己想要的效果,让 AI “更美观一点”,它又会给你一套全新的风格,一直都达不到期望
最近正好碰到了这个问题,就分享几幅图来请大家讨论下。
这是我正在进行的开源抓包工具 Sniffy 中的根证书安装向导的界面,它的作用是让用户选择自己的设备,并按照页面提供的文字与截图进行操作。这是使用 gpt 画图生成的几版不同的设计方案:

不同方案都有一些值得使用的部分,但整体感觉有点过于强推:标题与图标、按钮、内容区都想突出表达出来,放到实际的软件中并不符合我的预期,我更希望整体看起来比较清爽,信息的优先级更加明确,能够与整体软件保持一致的风格
后来也用过设计相关的 Skills ,像 frontend-design 和 impeccable 等,给出了现有页面的图片,但“我觉得不好看”到底如何向 AI 表达才能让 AI 理解并输出符合期待的结果仍然存在比较大的不确定性,具体的要求需要详细给出,如字体字号、间距、高度和宽度比例,宽泛要求的情况下,则比较看运气
我最终参考如下自己先画出大致草稿的版本来做布局:

在顶部选择平台,然后左侧为当前步骤,右侧为操作截图。感觉更接近我的预期了,用户也可以直接看到应该操作什么内容,同时也欢迎大家看看几版方案中,哪版会更喜欢一些?
也很好奇大家使用 AI 生成 UI 时,一般会把设计要求明确到什么程度?
- 参考图如何提供比较有效?是给完整的一张页面,还是分别给出布局、配色和控件风格?
- 怎样描述“不好看”?有没有比“更好看一点”更好的描述?
- 有什么实际使用中有好用的工具或者 Skills ?特别是信息密集的桌面工具类型界面
另外介绍下 Sniffy 支持 Windows 、macOS 和 Linux 系统,可以查看 HTTP/HTTPS/WebSocket 流量,可以做请求和响应修改、Mock 以及断点等调试操作。有抓包、调试接口等需求的,也可以试试,欢迎体验下,欢迎分享使用感受