UI设计经验

关于 ui 设计这块，我还是比较用经验的，虽然我网站是纯 AI 写的，但是大家应该也发现了，没有任务的 AI 味，虽然也是个人审美主导比较重要，但也是技巧的，只要你掌握以下三个技巧，你 vibecoding 出来的网站或软件，就不可能丑

构建设计系统

为啥 vibecoding 出来的网站基本都一股 AI 味，大家大同小异，然后细节上就是经不起推敲，就一眼是 AI 写的，而不是传统的成品产品的感觉

是AI 很会做页面，但它也特别喜欢自由发挥。

可能第一页按钮圆角 8 px，第二页变成 12 px；这里标题 32 px，换个页面又变成 28 px，然后颜色各种各种样，单独看每个页面可能都没什么问题，但功能越写越多，越来越丑，甚至会出现很多地方明显的交互错误。

所以就需要有一个设计系统来规范这个项目

所以，我一般会先给项目建立一套简单的设计系统（Design System），让 AI 后面有东西可以遵守，而不是每次都重新设计。

但完整的设计系统其实可以包含设计原则、颜色、字体、字号、间距、圆角、组件、交互方式等等

所以我们自己做 Vibe Coding 项目，完全没必要一上来搞这么大一套。

最值得弄的是设计系统里面最基础的一层：Design Tokens。

比如这个项目到底用什么颜色、标题多大、正文多大、卡片圆角多少、常用间距是多少，都提前定下来。以后 AI 写任何页面，都会从这里面选，而不是又重新写

对于普通的小项目，我觉得最开始把下面这些东西定下来基本就够用了：

字体：整个网站主要用什么字体
字号：大标题、小标题、正文分别多大
颜色：主色、背景色、正文颜色、弱化文字颜色
间距：页面常用 8 / 16 / 24 / 32，还是其他规则
圆角：按钮、卡片统一使用几 px
页面宽度：正文和内容区域最大多宽
边框 / 阴影：卡片到底用边框还是阴影，强度是多少
基础组件：按钮、输入框、卡片大概长什么样

这些具体的颜色、字号、圆角....就是所谓的 Design Tokens。

上面这张图中的信息30aitool的核心的 Design Tokens，咋就是说实诚吧，直接展示出来，大家也可以直接借鉴。

这样以后你让 AI 做新页面的时候，可以直接要求：所有新增页面必须优先使用现有 Design Tokens 和组件，不要随意增加新的颜色、字号、间距和圆角。

当你能让 AI 构建一套 design token，你做出的项目就不会一股“劣质感“”，其实高级的设计不难，就是统一好元素，符合排版规范，推荐大家可以去了解下排版的四大原则（对其、对比、重复、亲密）我是感觉用在 vibecoding 是比较适用的，算是一个底层逻辑

小总结下：先确定审美方向 → 定好 Design Tokens → 做基础组件 → 后面的页面全部照着这套东西写。

最好提升审美的方法：抄！

ok 当我们知道了构建一个设计系统的重要性了，那么肯定还有人不知道怎么开始写，也不知道怎么样叫好看，毕竟理论是理论，实践是实践。

想要快速上手，最好的办法就是借鉴（也可以猛猛抄）

记得任何的创作，一开始都是模仿，找参考，千万别上来就自己干以自己的审美和经验出发，那样做出来的东西99%是自嗨的产物，咱们要尊重市场和前人的经验。

像我咱们这个 30 aitool 我都不知道找了多少参考，调研了多少网站，基本每个模块都会参考大量的产品

关于找参考大概有两个方向：同类型参考+跨界参考

先抄同行：寻找同类产品

在我第一章，我是如何开始的那里其实就有提到，这里在讲一下，我自己的习惯的做法就是，把想要做的产品的方向和已知的对标，发给 ChatGPT 启动其深度调研功能，大概就是说，帮你收集你这个领域叫的上号的产品、国内国外、小众大众的、我前期基本就是这样调研的

当你调研到觉的 ok 的网站，想要分析它的设计系统，那么就可以用下面这个工具，只需要复制网站的链接就可以提取出来网站的设计系统和 Design Tokens

以及这个网站画廊部分也以及提供了一些高质量的官网分析，你就可以直接复制他们的相关的设计系统直接进行使用，直接拿来主义

跨界参考：多看优质网站

调研同行其实更多还是看功能方面，设计方面看个大概和规范，如果想在 UI 和 UX 方向做出彩些，可以跨领域去看，毕竟你不能逮着同行“抄”呀，那样就太明显了，也不道德，所以要跨界做参考（当然你硬抄也可以，比较国内很多大厂就是这么做的）。

这也是我自己做产品的逻辑，跨界多看一些其他优秀的产品，找灵感或直接提取元素，东拿一点，西拿一点，融合变通一下就是你自己的东西了。

这里不得不提一句毕加索的名言:"好的艺术家模仿，伟大的艺术家剽窃“”

像我网站在视觉参考上，并没有参考同类型的导航站或AI 产品站呀，我是主要看了 Vercel、OpenAI Academy、Awwwards.等等各行业顶尖的网站，既然提到了Awwwards就正好引入正题。

去哪里可以看优质的网站呢？就是去类似于 awwwards这样的专门收录网站的网站。

除了大名鼎鼎的Awwwards，下面是我长期调研找到的优质的收录网站的网站，这些网站里面收录的网站质量都特别高

上面的这三个更多是找网站，下面这两个则是针对性效果，一个是按网站的功能分类进行收集的，还有一个是专门收集哪些看起来很magic的效果的网站，这两网站真的很宝藏，特别适合找具体的参考，直接运用到自己的项目上

善用UI组件库

对于小白 vibecoding，一定要善用 ui 组件库，会达到事半功倍的效果

UI组件库就是一套已经设计好、写好代码、可以直接拿来的各种模块，例如像按钮、输入框、弹窗效果、导航栏等等，下面网站大家可以点进去看一下，30aitool用的这套网站的 UI 组件库。

UI 组件库就可以很大程度降低产品的开发难度，它可以让你的产品的按钮和交互动效统一，加上你前面构建的基础的 Design Token ，基本就是一套完整的产品系统系统了，但是用 UI 组件库有大要点

先看协议：选择开源项目

选择开源的并且协议是MIT协议，这个协议的意思就是你可以随意使用，甚至可以商业化

再看框架：确认技术兼容

但选 UI 组件库的时候，除了看它好不好看、组件够不够多，还有一个很容易被小白忽略的问题：它支不支持你现在项目用的技术框架。

关于前端技术框架，本来应该专门开一个章节来讲的，但想想就直接在这里大概聊一下吧，因为本内容主要还是写给非程序员的普通人看的，普通人哪懂什么技术框架呀，包括主包我自己也不是很懂，所以我这里就以我自己的经验和理解给大家讲一讲。

网站大概可以分为前端技术和后端技术：
1. 前端：你可以大概理解为前端你可以大概理解成用户能看到、能操作的那一部分，比如页面长什么样、点按钮之后怎么反应，不同的前端技术有不同的优劣势，能实现和呈现的效果也会有不同。
2. 后端：可以理解成藏在网站背后的那一部分，比如数据怎么存、账号怎么登录、用户的信息怎么处理、前端发过来的请求怎么响应等等。

虽然现在 AI 写代码已经很强了，基本什么语言、什么技术它都能写，你最开始选择什么技术栈，其实还是挺重要的。，因为不同技术的生态、现成组件、教程数量、第三方工具，包括后面维护起来的难度，都会不太一样。

所以如果大家准备做一个稍微认真一点的项目，做网站也好、做软件也好，我还是比较建议你在一开始花一点时间，大概了解一下这个项目适合用什么前端？适合用什么后端？

那么问题就是咱们这些完全不懂代码的，哪懂什么前端技术后端技术有哪些，而且一听就也不好下手学习。

所以最好的办法就是看别人是用什么！抄作业这块

去找几个和你想做的产品比较类似的网站，看看别人一般都采用什么技术，最好多找几个，大产品小产品都要看，因为代码这个东西还是很复杂的，太多的技术框架了。

你可以用咱们第一章提到的那个Wappalyzer扩展去查看网站的技术分析。

然后在调研的过程中可能会发现调研对象他们用的技术各不相同，这时候你就可以去问下 AI，问AI这些网站用到的技术优缺点是什么（用大白话解释给你听落地到具体的应用区别是啥）然后再结合你自己想要做的项目需求的方向，就可以大概判断出来你适合哪一个。

虽然咱们看不懂代码也不是很了解其运行的逻辑，但还是要了解一个大概的技术方向，这对Vibecoding还是很有帮助的。我自己就是踩过这个坑之后才真正意识到这件事情的重要性，下面我是在做30aitool的经历

我一个组件库，让我从 Vue 换到 React

我这个网站最开始立项的时候，前端选的是 Vue，当时为什么选 Vue？原因其实非常简单。我前期查了一圈，发现 Vue 在国内开发者社区一直挺流行的，中文资料也很多，而且很多人都说它轻量、易上手、生态也成熟。

我一看：挺好呀，就决定是你了，然后我就开始写了，那时候我当然也不知道 Vue具体到底好在哪里，可能我当然是看中了他的所谓的“轻量感”比较符合我的产品审美，不知道它和其他的前端框架有啥大区别，对于当时的我来说“选一个主流的应该没啥问题。”

然后我就写呀写呀，到了差不多第 10 天的时候，网站最基础的框架其实都已经写得差不多了，但是那时候感觉UI这方面怎么样都调不顺，怎么样都调不好，我就查呀查看下有啥方法。

也是那时候发现了还有UI组件库这种东西，当时感觉像发现新大陆一样，这东西太牛逼了！就像视频模版一样，不用自己手搓，直接套用就有高级的效果。

我当时心想，卧槽那做产品不是就轻轻松松吗，于是就去看各种UI组件库，然后就找到了我现在正在用的motion-primitives的组件库，这个组件库的效果，真的像是我为了量身定制的，它的UI和交互我可太喜欢了，当时真的开心极了。

但是我开心的太早了

当我把这个UI组件库的地址发给AI说：“让网站用上这个UI组件库！”

然后AI和我说这个UI组件没有Vue版本，用不了！

我当时：“啊？？？卧槽这玩意还分技术框架的吗”

我还以为就这种纯视觉性的东西，而且都有现成的代码，AI 照着写不不就行了吗，灵活变通下不行吗？可见我是真的是不懂代码的。

那么我就问AI，那怎么样能用，AI 大概和我解释了一下，说这个组件库本身是基于 React 这套技术写的，而我现在的网站用的是 Vue，所以不能直接套进来。

于是我就去了解了下React，大概就是：React 基本属于现在全球前端里面用户最多、生态最大的一档，组件库多、模板多，所以大部分的UI组件库React 往往都是支持得最完善的那一档，甚至有些干脆只适配React。

我当时是真纠结

对于咱们这种不懂代码纯Vibe Coding 其实特别重要，因为咱们本来就不会自己造轮子，很多时候靠的就是，别人有没有做好的东西，能不能直接拿来用，再让 AI 帮着改，所以对于纯靠 AI 写代码的人来说，生态大其实是一个非常实在的优势。

当然，这里不是说 React 就一定比 Vue 好，也不是说所有项目无脑选 React，但是如果你本身完全不懂技术，也没有什么特别特殊的需求的情况下，与其纠结哪个技术理论上最先进、最适合，那么选生态最大的一定是最优解。

然后问题就来了，我真的特别喜欢 Motion Primitives这套UI组件。

但我的网站已经用 Vue 写了差不多十天了，最基础的框架基本已经搭完，代码也已经十万多行了，所以我就开始纠结要不要把前端从 Vue 换成 React？因为从我一个外行人看来，网站都已经写差不多了，十万多行代码了！

如果要换这工作量还是挺大的事情，让AI换肯定会出错，毕竟工作量那么大，平时改个稍微复杂一点的问题都有可能出问题，要跑第二轮，这个直接换框架，属于是超大改了，AI包给我整出一堆bug出来的，肯定要修修补补，想想时间成本就不低，我主要担心还是缝缝补补，到时候越写越乱，但是又不想在重头用React再重新写一遍，我当时是真纠结，两头堵。

但是！那时候出现Claude的Fable5正好发布了，Cursor上也可以用，当时Fable发布的时候我也看了很多演示案例，从视频里看是觉的真的颠覆，看了很多直接就做成一个成品项目的，完成度都特别的高，然后我就还是决定试下，我就直接和Fable5说聊了下说想把网站的框架从Vue换成React，聊了下可行性和方案，然后就直接开干了。

然后你猜怎么着！Fable直接跑了差不多30分钟，直接就换好了！一点问题都没有！没出一点bug！因为我从进展过程从是可以看到，它一直在制定计划然后修改，又会进行校验，全部跑完后，还会再自己进行检查一遍，然后还真发现出问题，就又自己解决了。

真的夸张，这就是顶级模型的魅力呀，但也是真的贵，当时直接就把我刚买的一个cursor plus的账号跑完了，但是超级值得！这50块钱花的舒服呀，有一种看了一场技术的表演的感觉！这东西果然就只有自己用过才知道，就虽然网站看别人做测评也会感叹真牛逼，但是自己上手用，那种兴奋感会更具体，更强烈。

所以模型这钱不能省呀！当然日常小任务就用普通模型区别是不大的，但是复杂的任务这块，还是的是顶级模型！

OK，这就是我和 UI 组件库相遇的故小事，核心就两点

1. 前端技术还是要知道个大概，尤其是 UI 组件库会受到技术框架影响。不知道怎么选，就多看看同行都在用什么，再让 AI 结合你的具体项目帮你分析。
2. 复杂任务直接无脑上顶级模型！

筛选出来的 UI 组件库

我当时再找UI组件库的时候，看了不知道多少套，反正是从早看到晚，真是整整看了一整天，找呀找呀，才找到现符合网站需求的UI组件库，但是其中还有很多我觉的很优质的UI组件库，我都将其收藏起来了，这里我将全部托出！也都是MIT开源协议，都是可以进行商业的。

除了以上这些是一整套的UI组件库的，还有一个比较有名开源UI组件网站

这个网站里面有各种UI组件，代码都有的，你看上那个就可以直接复制代码发给AI让，直接复刻出来。

总结

关键要点

写到这里，关于 Vibe Coding 的 UI 设计，大家其实不用记太多理论，真正需要记住的就三件事：

1. 别让 AI 自由发挥。AI 很会写页面，但它不会主动替你维护整个产品的统一。页面一多，它就容易今天写一个圆角，明天换一种字号，后天又发明一个新颜色。

所以在正式开发之前，先把项目的字体、字号、颜色、间距、圆角、页面宽度，以及按钮、输入框、卡片这些基础组件定下来。

不需要一上来就搞一套特别复杂的设计系统，先把最基础的 Design Tokens 建好，就已经能解决大部分问题。

2.不知道什么叫好看，就先找参考。做产品最怕的不是抄，而是什么都没看，上来就凭感觉自由发挥。先找同行，看看同类型产品一般怎么解决功能和信息结构；再跨界看一些优秀网站，借鉴它们的排版、配色、动效和细节。

东边拿一点，西边学一点，再结合自己的产品重新组织。大部分创作一开始都是模仿，重点不是假装自己完全原创，而是你能不能把参考消化掉，最后变成适合自己项目的东西。

3.善用 UI 组件库，可以事半功倍。一套合适的 UI 组件库，可以直接帮你解决大量按钮、弹窗、输入框、导航栏和交互动效的问题。

但在使用之前，一定要先确认两件事：

• 协议能不能用于你的项目，尤其是商业项目
• 组件库是否支持你当前使用的技术框架

流程总结

如果你正准备做一个 Vibe Coding 项目，直接按这个顺序来：

找同行参考 → 建立大致的Design Tokens→ 跨界看优秀网站 → 确定审美方向 →  选择适配当前技术框架的 UI 组件库 → 做好基础组件 → 让后续所有页面沿用同一套规范。

不用一开始就把设计系统做得特别复杂，也别急着追求什么“原创风格”。先找一个靠谱的方向，把最基础的颜色、字号、间距和圆角统一起来，再让 AI 往下写。

说到底，所谓的高级感并没有那么玄学。

参考决定上限，规范守住下限，组件库提高效率。

AI 可以帮你写出页面，但最后做出来的是一个东拼西凑的半成品，还是一个真正能用的产品，取决于你有没有先给它定好规矩。

先确定方向，再统一规范，最后让 AI 执行。

按照这个流程创作，你 Vibe Coding 出来的网站，就不会有那种烂大街的AI味。