开一篇文章记录一下我自用和收藏的VibeCoding可以参考的网站（主要是前端Case和组件库）。
纯靠文字无法精准给AI描述自己想要的效果的时候，可以找到更多 input 给它。
比如干净一点、有设计感、高级但不要太高级，输入这种话的时候心里大致是有个倾向的，只是描述不出来。
每个词都给 AI 留了很大的发挥空间。与其再补十个形容词，不如找一张图，指出喜欢的排版、一段交互，或者直接给一份组件代码。
garbage in, garbage out...
当然有很多耳熟能详的大站，比如 Awwwards 这里就没必要隆重介绍，聊网页设计总会谈到的审美标杆。
00 / Awwwards
文末有所有提到的网站清单。
Ⅰ 整站类
这一组参考完整的案例，但不是所有时候整站的所有元素都是让自己喜欢的，所以收藏每个case的时候可以备注一下自己到底喜欢这个页面里面的啥，整体风格/滚动视差效果/hover效果/信息呈现方式等等。
之后发给AI参考的时候就可以让他只参考这个网页的XXXX，节省Token并且精准参考。
01 / Lapa Ninja
Lapa Ninja 保留了整页截图，很多案例还附了视频，不至于看完一个漂亮的 hero，就得靠想象补齐下面半页。
像图里的 PP Neue Montreal，字本身就能撑起很强的视觉节奏。
挑参考时更建议顺着看：第一屏说什么，中间靠什么让人继续读，最后怎么收，整站的优秀案例参考整体叙事。分类、颜色、字体这些标签也很好用。
02 / CSS Design Awards
CSS Design Awards 可以带一点拆作业的心态逛。
UI、UX、创新分别评分，但作为 VibeCoder 可以更关注**每个 Case 凭哪个细节让人记住**。
比如这次翻到 Viru，一个食品企业的网站，人物、农作物的大照片和错落的文字就很有表现力。
一个错误的想法是，**我要做一个A行业的网站，就只能参考A行业的网站**。
不同行业都有好东西可看可迁移，**AI擅长迁移**。
动效要点进实站体验。把喜欢的部分描述清楚，比让AI照着获奖网站更有用。
03 / One Page Love
准备做小工具、活动页或个人主页，可以逛 One Page Love。
单页的好处是没什么地方可藏，介绍、功能、信任感、行动按钮，都得在一页里交代清楚。
图里的 Statements，就是把一个 PDF 转 CSV 工具讲成完整产品的例子。
所以不用急着给自己的小项目安排过多的分支，先想想怎么做好一个页面。
04 / Websitevice
Websitevice 的侧边栏就比较实在：咖啡店、牙科、酒店、教育、咨询……
按正在做的事情找就行。
比如给咖啡店做网站，先点 Coffee Shop，看看菜单、空间照片和品牌字样怎么分配，不需要拿一个开发者工具官网硬套。
它还会简短点出案例里的布局特征，**复制这个给AI，比自己抽象朦胧的描述更精准。**
05 / Siteinspire
Siteinspire 比较值得借鉴的是画面之间的关系，字、图片的占比，空白落在哪里。
比如 Scullion Architects 这个案例，建筑照片、版面和文字的存在感安排得很舒服，不需要每个区域都抢着表现。
它有 Typographic、Grid Layout、Unusual Layout 这些分类，**不仅能按分类找想要的效果，也能在过程中学习这些分类的名词，以后给AI有跟专业的输入方式。**
参考这种页面时，别只截图配色，需要告诉AI连同图片比例和留白一起看，换内容以后才不容易走样。
06 / Minimal Gallery
看到 Minimal 不要直译。
这里也有很大、很有存在感的字体，比如 Goodside 上面一个巨大的名字，下面的项目画面接着说话。
元素少了以后，字重、边距、图片裁切反而更显眼。
你可以给 AI 一张参考图，再说明哪些比例要保留，只说极简它很可能把内容也一并精简掉。
这里值得学的是取舍。
07 / Land-book
Land-book 适合把几个同类页面放在一起比着看，挑出你最想要的一种。
都是产品介绍，有人先放界面，有人先讲收益，有人让一句话占满第一屏。
除了整站，它还有 Sections，把 hero、功能、定价、评价等区块拆开收。
卡在某一段的时候没必要重新找一整张首页。
建议是先选内容结构，再选视觉处理，别把三家网站最好看的部分直接拼起来，**单看都不错，合在一起未必，可能会乱**。
08 / Godly
刷Godly很像刷小红书和Pin，很容易让人陷入都想存的状态。
它现在不只收整站，也有界面、图标、logo 和局部设计，逛的时候注意自己正在看哪一类。
图里的 Gitnimble 详情还把桌面、手机和页面区块分开列出来，拿来研究同一套设计怎么换尺寸很方便。
遇到喜欢的 case，试着说清是标题排法、色彩反差还是展示产品的方式，收藏可以靠直觉，交给 AI 时还是得稍微翻译一下。
09 / Httpster
如果收藏夹已经被同一种 SaaS 页面占领，可以来 Httpster 换换口味。
它按风格和类型归档，连 Unusual Layout、Unusual Navigation 都单独列出来，**适合有目的地故意跑偏一下**。
比如 Bauhaus Clock 的收录页就把一个小产品做得很有主角感：大标题，接着让时钟画面说话。
这里也有较早的案例，别把收录时间当新鲜度比赛，某些版式过几年再看还是比当季流行模板有意思。**（审美是一个循环？）**
10 / Saaspo
如果是做一个真要向用户解释功能的小产品，Saaspo 比较值得参考。
它把 Landing、Pricing、Product、Customers 等页面分开，还能按行业、风格和技术栈筛。
比起首页能不能更酷，这里更适合研究产品怎么展示，价格怎么说明，客户为什么相信你**（比较实在导向的参考看这里）**。
比如这个 Papermark 把产品界面直接放进画面，信息很具体。
喂给 AI 时顺便标出你要借鉴的信息顺序，别只让它抄一个背景。
11 / Curated
我觉得 Curated 一个比较好的是能沿着标签继续找。
比如点开这个 Basement Studio，可以看到行业、风格和相关标签，顺手就能追到同类案例。
不用一开始就知道这种风格叫什么，先找到喜欢的，再看看它被怎样归类，慢慢就有自己的描述词了。
它也有 Sections 和模板，不过部分高级筛选属于 Pro。
Ⅱ 局部类
有时整页风格已经定差不多了，就是菜单显得挤、页脚收得仓促，或者某一个部分得到效果太 Normal。
这时候缩小参考范围比再换一整套风格有效。
12 / Navbar Gallery
这个站愿意专门管上面那条导航栏。
Navbar Gallery 收静态导航、下拉菜单、侧栏、全屏菜单，也有 Mega Menu 这种展开后很能装东西的版本。
图里的 Chesapeake Plywood 把产品分类和图片一起放进菜单，信息多也不一定要挤成一排小字。
做工具站或内容站时尤其值得翻。
给 AI 参考时，最好把展开后的状态也截上，只给收起的导航它也不知道里面该长什么样。
13 / Footer Design
页脚经常是做到最后、耐心也剩得最少的地方，或者直接被忽视，随便做一下的地方：塞个 logo，排几列链接，结束。
Footer Design 让人重新考虑一下这个位置。
Playfolly 的例子把产品场景和一句大字放在一起，页面到底了表达还没散。
这里能按字体、网格、明暗和画面风格筛选，也提供手机画面。
下一次让 AI 补页脚，了链接清单，也可以给它一张参考，最后这一点同样值得好好做。
Ⅲ 外挂：实现类
接下来这些站，可以直接往 demo、组件参数、安装方法和源码里找。
React、Vue、纯 CSS 要分清，把效果图、组件链接、代码和依赖一起给 AI，通常比让它盯着一张静态截图猜动画靠谱。
直接看代码，妈妈再也不用担心 AI 的学习了。
14 / Codrops
Codrops 是我自己用的最多的一个站。
它的诱惑在于，看完效果，还能直接搞清楚这是怎么做的。
它有教程、demo 和源码入口，特别适合那些文字很难描述清楚的交互。
比如这篇自定义形状的鼠标拖尾教程，连实现思路和代码都拆出来了。
把教程、仓库和你想改的部分一起给 AI，比丢一句做个酷炫动效省掉不少猜谜和 token 浪费。
也看一眼技术要求：这个例子用了 Three.js 和 WebGPU，接进项目需要做兼容性检查。
15 / React Bits
React Bits 适合脑子里有个效果，但不知道它叫什么，或者想要一个炫酷的小动效，但不知道这么酷炫起来。
文字动画、背景、鼠标反馈都能直接预览，Aurora 页面还能调颜色、速度和融合程度，旁边就是 Code 和 Copy for AI。
先调到接近你想要的状态，再把参数和源码交过去，沟通会具体很多。
16 / Vue Bits
项目用 Vue 的话，Vue Bits 值得单独存一个书签。
它是 React Bits 的 Vue 移植版本，省掉了我喜欢这个效果，但 AI 先帮我翻译一遍框架的中间环节。
Dock 页面就很直观，图标大小、悬停放大程度和弹簧参数都摆在那儿，代码页也有用法。
这个组件依赖 motion-v，一起带给 AI 即可。
两个站长得像很正常，重点是拿回项目的代码要对口，别把 Vue 文件里塞进一段 React。
17 / OriginKit
OriginKit 就是个个效果挑选台：左边找类别，中间看预览，右边直接调变量。
Cursor Ring Field 这类效果，用文字解释起来费劲，改一改颜色、密度和速度就直观多了。
文档提供代码接入、Framer 和 MCP 等使用路径，想交给 AI 继续改，有现成入口可顺着走。
要注意目录里有免费和付费内容，组件的获取要求也要点进去看，它首页写着免费不代表每一张卡片都能随手拿走。
18 / Magic UI
Magic UI 里有不少适合点到为止的小效果。比如 Number Ticker，让数字从起始值变化到目标值，放在统计或成果展示里，比给整页铺一层粒子更对题。
目录里也能找到跑马灯、边框和文字动效，不需要全都用上，只取需要的。
挑中以后就把文档、安装方式和目标数值给 AI，再讲清楚它出现在什么位置。
19 / Aceternity UI
Aceternity UI 有很多组件：光线、背景、卡片边缘、跟随指针的反馈。
Glowing Effect 就把注意力放在边框上，内容依旧能保持清楚。
它提供 React／Next.js 组件，基于 Tailwind CSS 和 Motion，文档里有安装入口。
建议先决定谁是主角再挑效果，每块卡片都发光，主次就很难分了。
20 / Animate UI
Animate UI 适合关注用户会点的地方，折叠面板、标签切换、弹窗、开关。
首页不算 fancy，往文档里才能看到它在组件动作上花的心思。
比如 Accordion，内容展开和收起本身就可以成为体验的一部分。
它还按 Radix UI、Base UI 等底层方案分组，接进现有项目时选对那一支。
做一个需要反复操作的工具，这类小反馈往往比开场五秒钟的动画更值得打磨。
21 / Cult UI
Cult UI 解决这块信息还能怎么放。
ShiftCard 把更多细节留到 hover 时展示，同一块卡片就有了前后两层；目录里还有浮动面板、方向感知标签和各种图片处理。
它围绕 shadcn 体系扩展，组件页提供预览、代码和安装用法。
先借一个交互结构，再统一字体、间距和颜色，会比一口气搬五个不同 demo 协调。
22 / Uiverse
Uiverse 更像一个小零件集市，按钮、开关、输入框、加载状态，可以一格一格挑。
优点是点开就能对照效果看 HTML 和 CSS，很多小需求不用先搬进一整套组件库。
图里的按钮连渐变和 hover 样式都列出来了，拿给 AI 改成自己的颜色很方便。
不过作者多，风格也杂，别把每次逛到的好东西都装在同一页。
源码可以借，最后还是得统一一下视觉，让这些零件看起来属于同一个产品。
23 / Animata
Animata 能够把抽象的动起来拆成了具体选项。
拿 Typing Text 来说，逐字出现、间隔多久、是否循环、打完后光标留不留，都能在示例里找到对应参数。
这样你和 AI 说的就不再是“打字机效果再自然一点”。
它也收卡片、列表和菜单等 React 组件，并提供安装命令和手动复制的代码。
先看预览，少几轮纯凭感觉的来回修改。
24 / Hover.css
最后放一个看起来没那么新潮的：Hover.css。
页面很朴素，就是一排排可以试的按钮，位移、下划线、背景变化、阴影，名字也起得明白。
要的只是鼠标 Hover 上去有一点回应，它很适合当效果词典，先挑动作再让 AI 结合现有按钮样式实现。
仓库有使用说明，但官网区分个人／开源用途与商业授权，准备直接采用库代码时记得看清对应条款。
Ⅳ One more
可以参考的不只是这些标准的设计库网站，一些独具个性的集合站也值得参考，偶然看到的一个好看的网页也值得参考
（比如shopify的3D视差效果Case很炸裂，然后我回头去翻了翻他们之前每个季度的网站，都有很多特别的创意。）
25 / Brutalist Websites
最后补一个我自己很喜欢的 Brutalist Websites，专门收集粗野主义网页。
默认蓝链接、毫不客气的大字、直接铺满全屏。
网页也不必都朝着同一种精致靠拢。类似这种按风格聚在一起的集合站还有很多，值得顺着喜欢的 case 继续挖。
也不用整套照搬，可能只是一个排版、一组颜色，就足够成为新的 input。
慢慢分清自己喜欢什么比把收藏夹塞满更有用。
Ⅴ 结语
每个网站都有我觉得好看的内容，也有我觉得不好看的内容。
所以我觉得审美≠美学，更像是一种在大量输入积累下，逐渐形成的属于自己的取舍和选择的判断力。
所以第一步，我们先做一些积累。
什么审美、taste，没有标准答案，只有有／无自己的倾向。
附录：
00 Awwwards｜网页创意与交互的标杆
01 Lapa Ninja｜整页截图，看清内容顺序
02 CSS Design Awards｜设计、体验、创新分项评分
03 One Page Love｜一页讲清一个项目
04 Websitevice｜按行业找对业务参考
05 Siteinspire｜按版式与字体风格筛选
06 Minimal Gallery｜少元素里的精细取舍
07 Land-book｜整站与局部区块一起找
08 Godly｜桌面手机对照看设计
09 Httpster｜发现不循常规的网页风格
10 Saaspo｜产品、定价与客户页参考
11 Curated｜顺着风格标签找相似案例
12 Navbar Gallery｜导航展开状态集中看
13 Footer Design｜把页脚做成最后一处亮点
14 Codrops｜特效背后有教程和源码
15 React Bits｜React动效可调参数
16 Vue Bits｜Vue项目直接拿动画组件
17 OriginKit｜可视化调参的效果组件
18 Magic UI｜数字与文字的局部动效
19 Aceternity UI｜发光边框与视觉氛围效果
20 Animate UI｜把组件状态切换做细
21 Cult UI｜可展开的卡片与交互区块
22 Uiverse｜按钮开关等小组件源码
23 Animata｜用参数说清动画细节
24 Hover.css｜纯CSS悬停效果词典
25 Brutalist Websites｜粗野主义网站集合站
