如何提高 vibe coding 时候的 UI 和 UX 设计效率

yarkyaonj 2026-07-07 08:31 1

最近半年用 codex vibe 了好几个网站

发现模型写功能已经基本上没有问题了

但是我基本上要花费很多时间在 UI 和 UX 的调整上，比如全站样式统一，页面元素布局优化，交互优化等等

尤其是新的网站，基本上做出来 UI 效果比较差，AI 味非常重

codex 的一个好处是可以在里面开内置浏览器，然后用标记功能选择页面元素直接批注进行修改，但是还是非常耗时的

我觉得可能整个流程中缺少了 UI 设计的步骤，比如用 figma 在写代码之前就设计一般风格确认好，然后把网站的设计元素固化下来，是不是会好很多。

但是我自己是没有 UI 设计经验的，所以这个 UI 设计的流程一直有些忽视

不知道大家一般会有先进行 UI 设计的步骤吗

最新回复 (36)

elevioux 07-07 09:14

1楼

同问。

很多人说用 stitch 什么的。但是全新 vibe 一个可能还好，但如果是在现有项目上迭代或者改一些不大不小的地方的话，就不知道怎么弄了。
showonder 07-07 09:25

2楼

有的，现在 AI 的 UI 设计能力就是不行，UX 能力基本不及格，我们当下最佳实践是 UI/UX 直接把关键视觉稿 fig 画出来，让 AI 补各种状态、异常、微交互的 UI ，确认没问题再扔给 agent 来做前端，这样效果和效率能最大化
zhiyu1998 07-07 09:41

3楼

Taste Skill

https://github.com/Leonxlnx/taste-skill
yarkyaonj 楼主 07-07 09:46

4楼

@showonder 所以你们是有专门的 UI/UX 岗位人员是吧，我是自己一个人开发，所以这部分工作需要我自己去学习然后自己做了
yarkyaonj 楼主 07-07 09:47

5楼

@zhiyu1998 这种类型的 skill 感觉单独某一部分还不错，但是整个网站的视觉和交互统一上感觉很难一致。
jackOff 07-07 09:54

6楼

目前没有完美方案，全是自己手扣细节还原类似的布局
madou 07-07 09:57

7楼

对接 mcp
snowtreetree 07-07 09:59

8楼

关注，用了 codex ，cc ，还原的都不太行，要对话好几轮。
🐶 是不是前端还有的活。
lvsp95 07-07 10:05

9楼

以前都说前端要下岗，现在随着发展和用的多了，感觉 ai 写后端优势比前端大点，前端样式太难调整了
kakakakaka8889 07-07 10:06

10楼

招个 UI ，纯 AI 画的页面真的不行
body007 07-07 10:06

11楼

我也想知道，有人用 AI 做的界面就好看，我做的就很挫。
jrtzxh020 07-07 10:28

12楼

开 figma 会员，用他的 ai 功能 make 生成设计图，丢进去 codex 还原效果还行。然后让他按照设计图，生成统一的规范约束。
SayHelloHi 07-07 10:34

13楼

UI/UX AI 现在还不能完全把控

即便让它使用 shadcn/ui 这样的 UI 组件库，

让它做一个简单的管理后台

做成的产品能用但是 UI 界面总觉得不好看
yarkyaonj 楼主 07-07 10:34

14楼

@jrtzxh020 我去研究一下，谢谢
yarkyaonj 楼主 07-07 10:35

15楼

@SayHelloHi 是的，而且各个页面里面的视觉效果也不统一。即使有 style.md 这样的规范，大模型在生成代码的时候也不会完全遵循
kuhung 07-07 10:42

16楼

stitch 用得我快脑出血了，一致性非常差，经常脑补和简化。甚至还不如用原始模型自己抽卡。
kuhung 07-07 10:44

17楼

交互我一般还是让 AI 来做走查，按 IA （信息架构）和用户旅程来看，能查出不少问题，改完看着更像那么一回事了
yarkyaonj 楼主 07-07 10:56

18楼

@kuhung IA （信息架构）和用户旅程，这 2 个词我第一次听说呢。是不是是让 ai 作为一个用户的角色，来体验某个流程，发现流程中存在的问题？
YanSeven 07-07 10:57

19楼

用 claude design 或者 opendesign
kuhung 07-07 11:01

20楼

@yarkyaonj 是的你可以就这两个关键词发 AI ，让他诊断并给出方案我自己实践下来感觉还不错
shuqin2333 07-07 11:10

21楼

同遇到这个问题

我们产品让 ai 出了一版 html 原型。我让 ai 从 0-1 vibe 出来的界面也远远不如原型，因为 ai 要考虑技术栈、考虑复用、考虑组件交互...... 比纯 html 、css 复杂度要高非常多
kimiler 07-07 11:12

22楼

直接换 gemini ，最自然也最好看
showonder 07-07 11:16

23楼

@yarkyaonj 现在 UI Designer 比之前便宜了，有价值的项目值得 ins 、dribbble 上找个。除非项目很复杂或长期需要 UI ，否则没必要专门养 UI
yarkyaonj 楼主 07-07 11:26

24楼

@YanSeven 体验过一次 opendesign ，感觉不太满意
marvin520 07-07 11:29

25楼

一般是方案确认后先让 image-2 出图以及完整的设计系统，ai coding 前端的时候按设计系统和设计图去还原，会比直接写强一些
280303 07-07 12:02

26楼

我用 workbuddy 的 ui 专家写出来的还能接受
sqlNice 07-07 14:41

27楼

发现没人提 impeccable （ https://github.com/pbakaus/impeccable ），对于存量项目他可以帮你总结项目已有的设计风格，也可以告诉他项目的客户目标与设计风格（不需要你知道名词）。

在重构时他就根据设定的目标风格去统一样式。
monologue520 07-07 14:50

28楼

我也尝试过很多，figma make 生图扔给 codex 也试过，效果不稳定，整体不满意，还需要很多微调。
调样式确实很麻烦，很耗时间，有时候反复更改都能给自己搞生气了😄
偶尔用下 gemini 会有意外惊喜~
JerryZhi 07-07 15:12

29楼

@body007 到目前为止，AI 做 UI 本质上就是抽卡，你要有很多 token 去烧，还是可以抽出一套好看的，搞半天又回到 AI 生图的早期体验。而且时间成本恐怕比找个正经前端还贵。
bello123 07-07 15:30

30楼

ai 做个基本的后台管理网站没问题，交互简单，都是查询表单和表格，但如果做一个复杂的交互，尤其页面元素又多又乱的，单靠 ai 生成根本不行，前一段时间让 ai 生成一个大屏驾驶舱，页面设计元素很饱满，各种图表效果，ai 生成的第一版不尽人意，即使拿着设计师给的 ui 图，生成的效果也没眼看，最后只能一个个组件慢慢调试，所以如果不懂前端样式的还真麻烦
calvinHxx 07-07 16:23

31楼

claude designer 好用。但是现在封号厉害
yarkyaonj 楼主 07-07 16:25

32楼

@calvinHxx 是的，所以我不愿意去折腾 claude code ，我最近几个月在用 codex 很稳定
yarkyaonj 楼主 07-07 16:29

33楼

@sqlNice 感谢，我来看看这个项目具体是怎么使用的
sqlNice 07-07 17:43

34楼

@yarkyaonj #33 我看有些人回复（组件需要一个个去调试），我理解只要一开始定义好了样式风格与变量（间距、圆角等），后续让 cc 统一修改即可。impeccable skill 就可以帮你统一这些变量
body007 07-07 17:46

35楼

@JerryZhi 我听产品经理用 AI 出原型都说最好有竞品让 AI 参考会好些，完全用提示词要经历很多轮对话才会好点。v 站也看到好多分享的 skill 和一些辅助 AI 出原型的网站，可以尝试摸索一下。
lonely701 07-07 18:41

36楼

去 scribble 、Pinterest 、behance 多看看好的设计，自己做做设计没什么坏处。