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

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

  •  
  •   fdong26 · 9h 17m ago · 1205 views

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

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

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

    几版不同的设计方案

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

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

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

    根据自己草稿做出的界面

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

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

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

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

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

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

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

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

    抄写配色,抄风格。

    复杂的方法:

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

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

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

    https://claude.ai/artifact/GJdJ8K4UeFAtweq7fefwoT
    netdisco
    netdisco
    7h 17m ago❤️1
    10
    kkss198x
    kkss198x
    6h 11m ago
    11
    我现在是找一个自己想要的 ui 然后让 ai 复刻 然后让他把复刻的经验存下来 其实还是根据图片生成 skill 了
    ivershuo
    ivershuo
    6h 0m ago
    12
    可以来试试这个 https://h5shuo.com
    让 AI 基于其他网站的 DESIGN.md 来做参考实现,主要解决咱们自己不会配色和给 AI 描述设计需求的问题,因为直接开干很容易做出 AI 味的页面
    securityCoding
    securityCoding
    5h 50m ago via Android
    13
    原型设计唯一真神是 stitch
    Jensond
    Jensond
    42 mins ago via iPhone
    14
    这的确是个问题,tokens 上计算的话 vibe 的设计成本远大于编码成本
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   1337 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 59ms · UTC 19:20 · PVG 03:20 · LAX 11:20 · JFK 14:20
    ♥ Do have faith in what you're doing.