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

自己学设计

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

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

frontdesign skill

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

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

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

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

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

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

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

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

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

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

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

如果有图片的话，我的方案是这样的，实测可行（用的是审美很差的 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 的某方案应用到业务代码。

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

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

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

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

只能自己看看设计相关的书吧，而且好看与否这种太主观了，自己喜欢就好，配合一些 UI UX 的 Skill 别出大毛病就可以了

安利一个腾讯的设计 agent ，https://ardot.tencent.com/ ，设计好了截图给 claude 感觉还行。

1 、找你喜欢的风格 UI ，让 AI 转成 UI 风格 prompt
2 、加上你的 UI 设计内容
3 、扔给 gemini,让 gemini 给你画出 UI 的截图

你可以抄，找一个你喜欢的网站，有网站可以提取设计语言生成设计文档，放在你的项目里 Ai 自己会根据文档生成

用 claude design 做设计挺不错

抽啥卡，直接 https://aistudio.google.com/ ，做出来的网页没有不漂亮的

google stitch ，直接导出压缩包，然后解压后丢给 AI

https://github.com/leonxlnx/taste-skill 看看这个

我的做法是找成熟的设计风格，让模型去模仿

我完全搞不懂设计，就先讲大概，让后出效果后不停的微调。

换 gemini

害，直接用 Google 的 stitch ，免费 AI 抽卡
https://stitch.withgoogle.com/

了解 design tokens 的概念，去提取你觉得好的 UI 的设计规范，应用到自己的产品中

好好学学语文吧

没参考图，先让 AI 根据详细的需求出线稿，ascii 风格就行，出几套，然后自己选择一个喜欢的，然后慢慢优化细节，差不多了之后就让 gemini 出 stitch 设计稿的提示词，然后到 stitch 里面画原型图，再 stitch 里面慢慢完善优化。 今天刚实践了一天，这个是效果自己满意的。试过 opendesign skill 什么的，感觉都不太满意。

用过几个工具/skill 效果都不理想

对于我的项目来说，用 chatgpt/stitch 创建几个参考。然后交给 antigravity 实现+局部微调的效果最好。

让 K3 去其他网站抄主题

要自己满意，那只能自己设计。

也是一步一步来，有 design token ，有 component library ， 有 breakpoints ，然后排列组合。

也是一步一步来，有 design token ，有 component library ， 有 breakpoints ，然后排列组合。

这个目前只能自己干

描述原型的大概 让 AI 给你出多套方案，并给出设计该方案的理由。 然后再打磨就是了。

1.找到你想要的 UI 风格截图
2.安装这个 https://hueapp.io/ skill
3.使用 skill 让 AI 以截图蒸馏出设计系统规范 DESIGN.md
4.写页面的时候让 AI 按照设计规范生成 UI

让 Claude Design 先出 UI 设计，然后再让 Claude Code follow design 来实现

自己看顺眼即可，众口难调....参考 https://v2ex.com/t/1232006

说出功能需求目标，让 ai 自己想象设计画多张图出来，选一个，有方向了再叫它调整。

claude design 做的就很不错

多看一些设计类的网站，各种 landingpage 页面，各种组件，积累审美，看见喜欢的可以截图给 AI 复刻以及调整，个人比较常用谷歌的 stitch ，比 AI 直出的要好一些

个人理解：AI 时代其实最重要的明确需求，有时候自己都不知道自己想要的是什么，再好的模型或者是 skill 都无法设计出满意的 UI 和产品