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

[yarkyaonj]

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

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

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

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

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

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

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

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

[elevioux]

同问。

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

[showonder]

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

[zhiyu1998]

Taste Skill

https://github.com/Leonxlnx/taste-skill

[yarkyaonj]

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

[yarkyaonj]

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

[jackOff]

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

[madou]

对接 mcp

[snowtreetree]

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

[lvsp95]

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

[kakakakaka8889]

招个 UI ，纯 AI 画的页面真的不行

[body007]

我也想知道，有人用 AI 做的界面就好看，我做的就很挫。

[jrtzxh020]

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

[SayHelloHi]

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

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

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

做成的产品能用 但是 UI 界面总觉得不好看

[yarkyaonj]

@jrtzxh020 我去研究一下，谢谢

[yarkyaonj]

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

[kuhung]

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

[kuhung]

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

[yarkyaonj]

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

[YanSeven]

用 claude design 或者 opendesign

[kuhung]

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