好不好看是主观的,然后要多看多积累一些名词,主要是我们程序员做设计时候,没有词典去描述想要的 UI ,达到什么样的 UX
使用 AI 生成界面有没有遇到过这种情况:功能布局都已经确定,界面效果又总是达不到自己想要的效果,让 AI “更美观一点”,它又会给你一套全新的风格,一直都达不到期望
最近正好碰到了这个问题,就分享几幅图来请大家讨论下。
这是我正在进行的开源抓包工具 [url=https://github.com/mintfog/sniffy]Sniffy[/url] 中的根证书安装向导的界面,它的作用是让用户选择自己的设备,并按照页面提供的文字与截图进行操作。这是使用 gpt 画图生成的几版不同的设计方案:
[img]https://cdn.gosniffy.com/v2ex/2026-11-03/10-%E5%9B%9B%E7%A7%8D%E5%B8%83%E5%B1%80%E6%96%B9%E6%A1%88%E5%AF%B9%E7%85%A7.png[/img]
不同方案都有一些值得使用的部分,但整体感觉有点过于强推:标题与图标、按钮、内容区都想突出表达出来,放到实际的软件中并不符合我的预期,我更希望整体看起来比较清爽,信息的优先级更加明确,能够与整体软件保持一致的风格
后来也用过设计相关的 Skills ,像 frontend-design 和 impeccable 等,给出了现有页面的图片,但“我觉得不好看”到底如何向 AI 表达才能让 AI 理解并输出符合期待的结果仍然存在比较大的不确定性,具体的要求需要详细给出,如字体字号、间距、高度和宽度比例,宽泛要求的情况下,则比较看运气
我最终参考如下自己先画出大致草稿的版本来做布局:
[img]https://cdn.gosniffy.com/v2ex/2026-11-03/08-%E6%9C%80%E7%BB%88%E7%89%88iOS%E5%AE%89%E8%A3%85%E5%BC%95%E5%AF%BC.png[/img]
在顶部选择平台,然后左侧为当前步骤,右侧为操作截图。感觉更接近我的预期了,用户也可以直接看到应该操作什么内容,同时也欢迎大家看看几版方案中,哪版会更喜欢一些?
也很好奇大家使用 AI 生成 UI 时,一般会把设计要求明确到什么程度?
[list]
[*]参考图如何提供比较有效?是给完整的一张页面,还是分别给出布局、配色和控件风格?
[*]怎样描述“不好看”?有没有比“更好看一点”更好的描述?
[*]有什么实际使用中有好用的工具或者 Skills ?特别是信息密集的桌面工具类型界面
[/list]另外介绍下 [url=https://gosniffy.com/download/]Sniffy[/url] 支持 Windows 、macOS 和 Linux 系统,可以查看 HTTP/HTTPS/WebSocket 流量,可以做请求和响应修改、Mock 以及断点等调试操作。有抓包、调试接口等需求的,也可以试试,欢迎体验下,欢迎分享使用感受
⚠️内容来自互联网,如有侵权请点击反馈![url=source/plugin/aljreport/index.html]侵权投诉[/url]
4# SYS宇晖 确实,说“再美观一点”AI只会重新洗牌。我觉得得先自己定好视觉层级和留白规则,把AI当执行工具而不是设计师。你那个草图是先手绘还是在工具里搭的?
[这只是一个小尾巴]
小技巧:换模型。google argon 和 claude opus 同样的提示词,他们能更接近你心中所想。
@superdavidchuang #1 是的,就是心中的想法没法用语言表达出来,只能像一个无能的丈夫一样一直重复不好看,你这个太丑🤣@Pters #2 出来的都不忍直视@xixi1412 #3 opus 也试过,效果也不是很好,argon 倒是没试过,可以试试,我一般习惯 gpt 画图先出效果,不然的话直接让模型设计 tokens 有点撑不住
7# 江户川柯南 最简单的方法就是:找一个漂亮的网站做模版,让 AI 对着抄。抄写配色,抄风格。复杂的方法:让设计师设计好网站模版,让 AI 去复刻。
@fdong26 还是需要沉下心来去学习,我直接联系了一个做设计的朋友,我就和他聊天,学会了很多东西。他有给我实操,他主要帮助了我怎么解决配色,因为配色是最难的!但是呢,竞争对手永远是最好的老师!直接对着竞品,返着来抄
@sn0wdr1am #5 这个确实,他能抄的一模一样甚至可能还略好,这就是 ai 最擅长的,但是一个创新应用就很乏力,没有什么可以借鉴的内容,让 ai 创新太难了,只能拿 gpt 画图不断的抽卡,有时候抽大半天都抽不到满意的