如何提高 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 ，让他诊断并给出方案 我自己实践下来感觉还不错

[shuqin2333]

同遇到这个问题

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

[kimiler]

直接换 gemini ，最自然也最好看

[showonder]

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

[yarkyaonj]

@YanSeven 体验过一次 opendesign ，感觉不太满意

[marvin520]

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

[280303]

我用 workbuddy 的 ui 专家 写出来的还能接受

[sqlNice]

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

在重构时他就根据设定的目标风格去统一样式。

[monologue520]

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

[JerryZhi]

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

[bello123]

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

[calvinHxx]

claude designer 好用。但是现在封号厉害

[yarkyaonj]

@calvinHxx 是的，所以我不愿意去折腾 claude code ，我最近几个月在用 codex 很稳定

[yarkyaonj]

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

[sqlNice]

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

[body007]

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

[lonely701]

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

[yarkyaonj]

@lonely701 这个属于培养设计品味了，learn from the best

[lonely701]

@yarkyaonj 设计品位或者说叫对设计的理解是需要培养的，我认为这就像如何查资料写论文一样是很基础的能力。2010 年前后得益于苹果的广告和营销部门，设计被神化了，当然不否认其重要性，但是设计应该像写作一样是人人都会一点的能力（并不是说不需要作家了）。在 AI 的时代，这种能力尤其重要，说白了就是对 AI 给出的各种信息做判断的能力。

[yarkyaonj]

@lonely701 同意你的观点，我确实打算学习一些 UI 设计方面的知识，但是还在寻找学习路径，我看到一个博主叫 will's design ，打算买他的资料，但是又怕太专业。