• 请不要在回答技术问题时复制粘贴 AI 生成的内容
fdong26
V2EX  ›  程序员

怎么让 AI 把页面设计美观好看的

  •  
  •   fdong26 · 1 day ago · 2427 views

    使用 AI 生成界面有没有遇到过这种情况:功能布局都已经确定,界面效果又总是达不到自己想要的效果,让 AI “更美观一点”,它又会给你一套全新的风格,一直都达不到期望

    最近正好碰到了这个问题,就分享几幅图来请大家讨论下。

    这是我正在进行的开源抓包工具 Sniffy 中的根证书安装向导的界面,它的作用是让用户选择自己的设备,并按照页面提供的文字与截图进行操作。这是使用 gpt 画图生成的几版不同的设计方案:

    几版不同的设计方案

    不同方案都有一些值得使用的部分,但整体感觉有点过于强推:标题与图标、按钮、内容区都想突出表达出来,放到实际的软件中并不符合我的预期,我更希望整体看起来比较清爽,信息的优先级更加明确,能够与整体软件保持一致的风格

    后来也用过设计相关的 Skills ,像 frontend-design 和 impeccable 等,给出了现有页面的图片,但“我觉得不好看”到底如何向 AI 表达才能让 AI 理解并输出符合期待的结果仍然存在比较大的不确定性,具体的要求需要详细给出,如字体字号、间距、高度和宽度比例,宽泛要求的情况下,则比较看运气

    我最终参考如下自己先画出大致草稿的版本来做布局:

    根据自己草稿做出的界面

    在顶部选择平台,然后左侧为当前步骤,右侧为操作截图。感觉更接近我的预期了,用户也可以直接看到应该操作什么内容,同时也欢迎大家看看几版方案中,哪版会更喜欢一些?

    也很好奇大家使用 AI 生成 UI 时,一般会把设计要求明确到什么程度?

    • 参考图如何提供比较有效?是给完整的一张页面,还是分别给出布局、配色和控件风格?
    • 怎样描述“不好看”?有没有比“更好看一点”更好的描述?
    • 有什么实际使用中有好用的工具或者 Skills ?特别是信息密集的桌面工具类型界面

    另外介绍下 Sniffy 支持 Windows 、macOS 和 Linux 系统,可以查看 HTTP/HTTPS/WebSocket 流量,可以做请求和响应修改、Mock 以及断点等调试操作。有抓包、调试接口等需求的,也可以试试,欢迎体验下,欢迎分享使用感受

    21 replies  •  2026-11-04 18:19:53 +08:00
    superdavidchuang
    1
    好不好看是主观的,然后要多看多积累一些名词,主要是我们程序员做设计时候,没有词典去描述想要的 UI ,达到什么样的 UX
    Pters
    Pters
    1 day ago
    2
    帮我设计 XXX,要美观好看优雅现代化。。。
    xixi1412
    xixi1412
    1 day ago
    3
    小技巧:换模型。
    google argon 和 claude opus 同样的提示词,他们能更接近你心中所想。
    fdong26
    fdong26
    OP
    1 day ago
    4
    @superdavidchuang #1 是的,就是心中的想法没法用语言表达出来,只能像一个无能的丈夫一样一直重复不好看,你这个太丑🤣

    @Pters #2 出来的都不忍直视

    @xixi1412 #3 opus 也试过,效果也不是很好,argon 倒是没试过,可以试试,我一般习惯 gpt 画图先出效果,不然的话直接让模型设计 tokens 有点撑不住
    sn0wdr1am
    sn0wdr1am
    1 day ago
    5
    最简单的方法就是:

    找一个漂亮的网站做模版,让 AI 对着抄。

    抄写配色,抄风格。

    复杂的方法:

    让设计师设计好网站模版,让 AI 去复刻。
    superdavidchuang
    6
    @fdong26 还是需要沉下心来去学习,我直接联系了一个做设计的朋友,我就和他聊天,学会了很多东西。他有给我实操,他主要帮助了我怎么解决配色,因为配色是最难的!
    但是呢,竞争对手永远是最好的老师!直接对着竞品,返着来抄
    fdong26
    fdong26
    OP
    1 day ago
    7
    @sn0wdr1am #5 这个确实,他能抄的一模一样甚至可能还略好,这就是 ai 最擅长的,但是一个创新应用就很乏力,没有什么可以借鉴的内容,让 ai 创新太难了,只能拿 gpt 画图不断的抽卡,有时候抽大半天都抽不到满意的
    superkite
    superkite
    1 day ago
    8
    找几个妹子,让她们来看看哪些好看哪些不好看,审美这块程序员差太远了
    qfdk
    qfdk
    PRO
    1 day ago❤️1
    9
    其实有一个简单的方法,你让这个 AI 给你设计不同风格的几版, 然后找到一个方向。

    然后再优化小组件, 当然每个版本得小组件都有可取的地方, 然后给他讲 版本 A 组件 A 的可取处, 版本 B 组件 A 的可取之处, 然后让他再来一版

    在 Voilà Pro, UI 重构的时候,建 ui 重构的时候是用了这个方式,跟您分享下

    https://claude.ai/artifact/GJdJ8K4UeFAtweq7fefwoT
    netdisco
    netdisco
    1 day ago❤️1
    10
    kkss198x
    kkss198x
    1 day ago
    11
    我现在是找一个自己想要的 ui 然后让 ai 复刻 然后让他把复刻的经验存下来 其实还是根据图片生成 skill 了
    ivershuo
    ivershuo
    1 day ago
    12
    可以来试试这个 https://h5shuo.com
    让 AI 基于其他网站的 DESIGN.md 来做参考实现,主要解决咱们自己不会配色和给 AI 描述设计需求的问题,因为直接开干很容易做出 AI 味的页面
    securityCoding
    securityCoding
    23h 55m ago via Android
    13
    原型设计唯一真神是 stitch
    Jensond
    Jensond
    18h 46m ago via iPhone
    14
    这的确是个问题,tokens 上计算的话 vibe 的设计成本远大于编码成本
    mengdodo
    mengdodo
    12h 1m ago
    15
    整体看着好看,但不知道为什么用的时候看的眼睛很累,能不能像 reqable 一样暗黑模式时把字的亮度调上去
    fdong26
    fdong26
    OP
    11h 51m ago
    16
    @mengdodo #15 是的,这就是难受的点,反正就是感觉很不对劲,但是就是说不清楚哪里不对,看来还是要多学习啊
    peisongo
    peisongo
    11h 8m ago
    17
    让它多出几个设计,要求风格迥异,然后选一个最顺眼的。我这个就是这么搞出来的 https://lingoak.com
    fdong26
    fdong26
    OP
    10h 2m ago
    18
    @peisongo #17 哈哈哈,跟我这个简直一个模子刻出来的 https://gosniffy.com ,看来还是要自己学学设计啊,ai 这块还是短板
    changlin1024
    changlin1024
    9h 24m ago
    19
    @ivershuo 这个我看了下,挺好的,还不收费~
    ExeterMinne
    ExeterMinne
    7h 22m ago❤️1
    20
    先去网上找一个觉得好的界面或者 app ,扔给 ai ,让他生成一套美术规范,根据规范重新生成所有界面。
    这种规范网上有现成的。
    另外生成后,在一周内不要提出诸如我觉得感觉不对这种问题。
    使用一周后再提具体的界面改动需求。

    我搞换皮的时候是这样的。(庆幸我们公司还留着美术,他告诉我这个方法)
    peisongo
    peisongo
    3h 4m ago
    21
    @fdong26 哈哈 我觉得还可以 独特性如果能赚钱再找设计师 免费的要求就不高了
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   2894 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 98ms · UTC 13:24 · PVG 21:24 · LAX 05:24 · JFK 08:24
    ♥ Do have faith in what you're doing.