vibe coding 时，怎么设计出自己满意的前端 UI？

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

我现在设计前端，都是找到自己喜欢的目标网站/app 参考设计，如果没有现成的网站或者 app 可以参考，就去小红书上看别人分享的设计图;然后让大模型参考着去实现，当然了大模型只能实现个大概，很多细节还是需要自己一点点去打磨（当然了还是 vibe coding 打磨）。
但是总有一些页面是自己从来没见过类似的设计，没有可参考的，这种直接 vide coding 出来的很可能不满意，可是我又无法明确告诉 AI 我想要怎样的效果，我只知道这个效果不满意，却说不出来我想要怎样的设计。
遇到这种问题怎么解决的？

设计

打磨

29 replies • 2026-08-06 21:49:30 +08:00

zcf0508

10h 39m ago

自己学设计

Chengyunlai

10h 35m ago

抄作业 OR 等待基模变强...

Charon2050

10h 18m ago

平时看到什么好看的 UI ，就截图发给 Gemini 问设计语言、设计规范、组件库，就可以慢慢积攒关于 UI/UX 的词汇量

horizon

8h 44m ago

frontdesign skill

LabJo

8h 41m ago

无解，你无法想象出自己不熟悉的领域

luis1180

8h 36m ago

@zcf0508 至少现在没那个精力学这个

luis1180

8h 36m ago

@Chengyunlai 有的没找到现成的，没法抄

luis1180

8h 32m ago

@Charon2050 词汇量是一方面，有时候不是词汇量的问题，是自己压根不知道该做成啥样才会好看
@horizon 作用不是太大
@LabJo 是的

luis1180

8h 29m ago

就像乔布斯说「消费者并不知道自己需要什么，直到我们拿出自己的产品，他们就发现，这是我要的东西」
我感觉我现在就是消费者，我不知道我想要什么样的设计，只有在设计好之后，我才知道这个是不是我想要的

383394544

PRO

8h 29m ago

@luis1180 "不知道该做成啥样才会好看" 就多看，可以上 youtube 搜英语的视频教你最新流行的设计，或者你直接让 AI 帮你多出几个方案对比，选个你觉得最顺眼的。如果这样还做不到那你还是找专业 UI/UX Designer 吧，这种活你 vibe 不来。

383394544

PRO

8h 27m ago

还有个方式就是自己上手用用看你的产品，如果连你也觉得很难用，就把你的痛点告诉 AI ，让他给你提几个优化建议。一定要让 AI 列候选让你挑，别一路听 AI 的。

banzhe

8h 26m ago

不知道想要什么的时候, 可以试试直接让 AI 写多个版本, 从里面挑个喜欢的

penisulaS

8h 16m ago

就是抽卡，反复抽，跟现在做 ai 视频一样，不过很费 token

luis1180

8h 12m ago

@383394544 #11 比较看运气，试了几次，都没试出来想要的
@banzhe 没有满意的，只能从里面挑一个相对来说还可以的，然后自己慢慢打磨
@penisulaS 太对了，很看运气

layxy

8h 4m ago

如果自己设计不出来就让他抄袭，但是别让他捡着一个抄，找几个你觉得不错的参考，让他结合这几个参考网站的设计结合场景给你设计，其实很多设计师也不是很容易就凭空想象出来的，都是先抄后练再创新，但是美其名曰借鉴，AI 目前的创新能力有限，只能让他给你炖大锅菜

zhaojun1998

7h 51m ago

如果有图片的话，我的方案是这样的，实测可行（用的是审美很差的 5.6 Sol 模型）：
1. 先截图发给 AI ，让他给你复刻一模一样的页面，注意是 demo 页面，不在乎假数据，逻辑交互等，最起码看起来和截图一样就行
2. 新开会话让他修改这个 demo ，这时你可以提出一些数据上，交互上的一些你想要的细节。这时也不要在乎代码质量，或者使用的组件不是你项目中的。
3. 看起来交互满意，样式满意后，再新开会话让他重构或抽取成你项目中的组件之类的。
4. 让其应用到你业务代码（也可和第三步合并）

补充：如果过程中你想改 UI 中的一些细节，如其中某个组件的展示方式你不喜欢，一定不要让其在原文件修改，哪怕是 demo 原文件（因为你很难根据他的文字描述知道实际效果，不这样做的话就是返回回滚代码，如果用 codex cli 就更麻烦了，压根回滚不了，代码就乱了）。可以说我对 xxx 不满意，你帮我重新设计几个不同的方案供我参考，放到一个新的 demo 页中供我选择，然后你打开新的 demo 页，看各个方案的效果，也可以会话微调，直到满意后让其应用到业务代码/总的 demo 中。

如果没有参考 UI 图，可用 gpt-image-2 生成，或者用 kimi 之类审美比较好的，让其多出几个 demo 方案供你选择，满意后让 codex 将 demo 的某方案应用到业务代码。

Adyun

7h 28m ago

只能自己学习设计，因为学习设计的过程也是多看积累审美的过程。

目前的 AI 设计大多数还是通过代码去实现，很难做到生成图片拆解到对应位置上。可以使用生图模型如 image2 先生成图片，再当切图仔慢慢拆分。

将你的前端界面截图上传给 gpt 喊他分析下，哪里有不合理或者样式不行的地方。在这个过程中跟他讨论总结，然后喊它根据讨论结果生成全新的设计图或者概念图。

然后拆分背景，UI ，元素等。最后用 agent 来实现代码层面的结合，这样下来比大多数纯代码实现的页面美术要好很多。