我的浏览器收藏 / UI 资源
我收藏的 10 个 Vibe Coding UI 网站
从我的浏览器收藏夹里，整理出找界面参考、挑动效、选图标和统一配色的 10 个网站，附使用思路和直达链接。
这篇文章来自我浏览器里一个叫“vibecoding常用网站”的收藏夹。平时收下的链接，这次集中整理出来，方便大家做网站、App 界面或产品演示时直接找。
想让 AI 做出符合自己审美的界面，先把参考选清楚很有帮助：页面怎么排、颜色怎么搭、动效用在哪里。下面这 10 个网站按使用场景整理，有需要时挑一个打开就好。
01 / 4 个网站
先找到想做的样子
开工前先选参考，把页面结构、视觉风格和具体组件分开看。给 AI 一个明确的方向，往往比反复说“再高级一点”更有用。
网页设计与提示词参考
MotionSites AI
我收藏夹里的“UI参考”就是它。这里把网页案例和 AI 建站提示词放在一起，可以按首屏、落地页、定价区、页脚等类型浏览，适合先找一个整体方向。
可以这样用 / 可以挑一张最接近目标的页面，把喜欢的布局、字体层级和动效分别写清楚，再交给编程 Agent。
拓展风格和视觉灵感
想找的不一定是一张完整网页，也可能是海报排版、包装上的配色，或者一种材质感。Pinterest 可以用来拓宽视觉参考，适合还没想清楚“页面要长什么样”的阶段。
可以这样用 / 试着搜索“dashboard UI”“editorial website”“mobile onboarding”。选两三张风格一致的图，再说明每张图具体参考什么；浏览时可能需要登录。
把 App 界面拆到组件看
Appllama
我收藏的“app ui参考”指向它的 UI Elements 页面。这里按底部导航、按钮、弹层、付费墙、进度指示等元素组织真实 App 界面，适合研究一个具体小地方怎么做。
可以这样用 / 比如你正在做手机端弹层，就集中看弹层的高度、按钮顺序、关闭入口和内容密度，再让 AI 实现自己的业务。
找更多设计工具的入口
DesignBookmark
这是一个设计资源导航，收录设计工具、字体、图标、网页和其他资源。当你只知道“我缺一个东西”，还不知道具体该去哪个站点时，可以从这里按分类继续找。
可以这样用 / 带着缺口去搜，例如字体、样机或 UI 灵感。找到合适的资源后再回到项目，避免一直收藏、迟迟不开工。
02 / 3 个网站
让界面和画面动起来
这一组分别解决三个问题：找可用的交互组件、看动效案例，以及研究别人如何描述想要的画面。
React 动效与交互组件
React Bits
文字动画、背景、卡片和微交互都有分类，可以先看演示，再看组件的接入方式。我的收藏夹里还单独存了 Slosh Gauge：一个数值变化时，液体会跟随晃动的仪表组件。
可以这样用 / 选一个真正服务内容的效果，让 Agent 按当前项目的技术栈接入，并检查手机端表现和减少动态效果的偏好。
从成片回看 Prompt 和 Skill
Prompt Motion
这里聚合了用 Claude Opus 5.5 制作的动态视频案例，并展示相关提示词或 Skills。可以按产品 UI、图表、文字、粒子等标签找画面，适合给产品演示和网页动效找方向。
可以这样用 / 看中一个效果后，重点拆它的镜头顺序、元素如何接续、节奏如何变化，再把这些描述改成自己的内容。
对照原视频、提示词与重制效果
Skillry · AI Videos
我收藏的是它的 Opus 5.5 视频专题，包含动态图形、解释类画面、3D 场景和游戏等案例。页面提供原作品、提示词和可对照的重制内容，适合研究一个想法怎样变成可执行描述。
可以这样用 / 可以先找一个与你任务接近的案例，再对照提示词看它交代了哪些限制：时长、镜头、字体、配色，以及交互方式。
03 / 3 个网站
把图标、配色和细节统一
页面有了结构以后，统一的图标语言和主题规则，能让零散组件看起来属于同一个产品。
AI 产品和模型的品牌图标
LobeHub Icons
做 AI 工具页、模型选择器或者模型对比界面时，可以从这里找对应的品牌图标。比起临时搜索一张来源不明的小图片，统一从图标库挑选会更方便。
可以这样用 / 先确定需要哪些品牌，再选适合浅色或深色背景的版本。展示多个模型时，统一容器和视觉尺寸，让标志容易辨认。
给产品挑一套统一的图标
Amicons
这里可以按类别浏览图标，也能切换线性、实心以及圆润或锐利的样式。我的原收藏落在 Religion 分类，打开后可以切到 All categories，按自己的产品需要继续找。
可以这样用 / 先定一套样式，再挑菜单、按钮和状态图标。站内有 Free / Pro 区分，下载前看清所选图标对应的方案。
把配色扩展成完整的界面主题
Graphical
我最初把它收藏为“UI配色”，现在站点展示的能力还包括字体、间距、圆角、组件状态和动效。它把主题文件、组件和给编程 Agent 的上下文放在一起，适合想统一整个产品视觉的人。
可以这样用 / 可以先看它怎样定义整套视觉规则，再把主色、中性色、字号和组件状态落实到自己的项目。完整主题工具为付费产品。
04 / 从收藏到开工
把参考变成 AI 能执行的要求
选好网站只是开始。挑一个与你的任务接近的参考，截图或附链接，再告诉 Agent 你到底想借鉴哪一部分。可以从下面这段开始改：
我要做的是：[产品与用户要完成的任务]。
参考链接 / 截图：[附上 2–3 个参考]。
参考 A 的页面结构，参考 B 的字体层级，参考 C 的配色。
请使用我项目现有的技术栈，先完成 [一个具体页面]。
保留我的业务内容，统一字号、间距、圆角和图标风格。
如果需要动效，只在 [具体位置] 使用 [具体效果]。
完成后检查桌面和手机布局，以及按钮、表单的真实操作结果。先把一个页面做好，再把这套规则用到其他页面。最后自己点一遍：按钮是否可用，内容长了会不会挤坏布局，手机上能不能顺畅操作。参考图提供方向，真正交付的仍然是你的产品。
整理于 2026-10-25。链接来自我的 Ego 浏览器收藏夹。站点功能可能更新，部分资源有登录或付费要求，以各站当前说明为准。