Article
老实说，我现在收藏夹里躺着至少一百多个灵感网站，真到做项目时还是不知道打开哪个，收录越多越记不住。
索性定期分享一下，多做做拆解，这次分享的 16 个网站我给它们分了类：找灵感、拆界面、找组件、实验性，四个阶段各有各的去处。
熟悉一下这些网站，要解决什么问题、该进哪个库、用什么维度筛选。带着问题找答案。
每个都是我实际在用的，关键数据也都去官网上核实过（文中数字以 2026 年 8 月各站首页为准）。按四个阶段往下看：
一、灵感方向
项目初期往往需要大量的头脑风暴。 这个阶段需要大量完整的案例输入，看的不是某个组件怎么设计，而是整个网站的气质、结构和节奏。下面 5 个站是我现在比较常逛的，各有各的筛选逻辑。
1. Site of Sites
- 地址：https://www.siteofsites.co/
- 简介：人工精选的网页设计库，质量高，收录 589 个网站。筛选维度比多数灵感库细一档：行业和类型之外，风格标签里有 Experimental、Scrollitelling、Creative coding 这类少见维度，平台筛选支持按 Webflow、Readymag、Cargo、Wix、Framer 过滤。
- 优势：Website of the Week 每周精选、按主题组织的 Collections（Material World 这类），以及新推出的设计术语 Glossary。 案例整体偏编辑排版和实验向，适合定调性阶段开阔眼界。
2. Recent
- 地址：https://recent.design/
- 简介：每日更新的设计精选流，人工挑选互联网上新的优秀作品，11000+ 位成员。内容不限于网页：Web、界面、品牌、产品、排版、动效、插画、3D、编辑、印刷、包装共 11 个方向，另外单独维护 OG 图、App 截图、App 图标三个专项库。
- 优势：更新快、筛选严，适合当每日灵感输入页，每天扫一遍就能跟上设计圈在流行什么。每日上工当朋友圈刷一下。
3. Lapa Ninja
- 地址：https://lapa.ninja/
- 简介：老牌落地页（landing page）灵感库，官网数据是 7,300+ 落地页设计、15,000+ 网页截图，只专注一个品类，按行业、风格、配色、平台多维筛选，每个案例附完整截图和原始网站链接。
- 优势：做落地页不用去综合画廊大海捞针，直接按”行业 + 配色”组合筛；免费、无登录门槛，打开就能用。
4. Landbook
- 地址：https://land-book.com/
- 简介：每日更新的精选画廊，分成六个库：Websites、Sections、Mobile、Motion、OG Images、Headlines——后三个是多数画廊没有的品类。筛选覆盖行业、风格、类型、字体、颜色和平台（Figma、Framer、Webflow、WordPress、Shopify）。
- 优势：Headlines 库专门收大标题排版，Motion 库收动效案例，找这两类参考时不用绕路；免费版可用基础筛选，Pro 解锁全部内容、无限收藏夹和截图下载。
5. Siteinspire
- 地址：https://www.siteinspire.com/
- 简介：老牌精选展示站，按 Styles、Types、Subjects、Platforms 四维组织，分类计数公开：代理商与咨询 2,355、字体排印 2,088、设计与艺术指导 1,905、作品集 1,392、电商 873；风格里 Minimal 747、Grid Layout 653、Unusual Layout 653。
- 优势：分类带具体数量、质量稳定，适合按风格维度定向检索，比如专门看 Grid 或 Unusual Layout 的站；每周有精选邮件，设计师和机构档案也收录，可以顺藤摸瓜找到背后的工作室。
二、研究产品 UI
方向定了，接下来要研究具体产品怎么做。这个阶段的关键词是”真实”：看的是上线产品的实际界面和流程，而不是概念稿。看的方式也在进化——从存截图，到拆成结构化的设计系统，再到直接接入 AI 工具。
6. RICOUI DESIGN
- 地址：https://design.ricoui.com
- 简介：本地优先（local-first）的 DESIGN.md 设计系统工作台，开源。核心用途是把一个产品或网站的视觉体系拆成结构化的 DESIGN.md：颜色、字体、间距、组件规范都能在工作台里编写、校验、实时预览和导出，站内维护 Library 和 Brands 两个库。
- 优势：拆解产品 UI 时不止存一张截图，而是沉淀一份能直接喂给 Agent 和前端的开发设计文档，可以介入后续的开发流程。浏览器直接用，数据存在本地。
7. Mobbin
- 地址：https://mobbin.com/
- 简介：自称”世界最大的移动与 Web 设计参考库”，老牌、高质量、内容丰富，但是免费用户可享受内容有限。
- 优势：检索粒度在同类里最细，做竞品研究时按流程查（注册、订阅、结账）比按 App 翻高效得多；现在还提供 MCP，AI 编程代理可以直接查库。
8. Refero
- 地址：https://refero.design/
- 简介：数万级真实产品截图库，组织方式偏研究型，分五层：Page Types（Dashboard、Paywall、404……）、Flows（注册登录、订阅、转账……）、UX Patterns（评价、筛选、暗色模式……）、UI Elements（弹窗、表格、骨架屏……）、Style（DESIGN.md）。新推出 Research Mode，直接描述任务就能拿到分析、参考和推理。
- 优势：和 Mobbin 定位相近，但分类体系更偏”模式研究”；同样提供 MCP，可以把参考库接进 AI 编程代理——官方的说法是”先研究再构建，产出的东西看起来是设计过的，而不是生成的”。
三、组件化灵感
真正动手时，需要的不是整站参考，而是某个具体模块的做法。首屏怎么排、导航怎么组织、CTA 怎么引导转化、页脚怎么收尾。每个模块单独找参考，效率比翻整站高得多。
9. Supahero
- 地址：https://supahero.io/
- 简介：专注 Hero 区（首屏）的灵感库，收录 500+ 案例。有个值得注意的变化：Supahero 已并入 screensdesign——自称全球最大的 UX App 库，原 Hero 库仍然保留。
- 优势：首屏是转化权重最高的模块，单独一个库做横向对比比在综合画廊里翻省事；Linear、Stripe、Raycast 这些以首屏设计著称的产品都在收录里。
10. Navbar Gallery
- 地址：https://www.navbar.gallery/
- 简介：专收导航栏的垂直灵感库，按导航形态分八类：静态、下拉、Mega Menu、侧边栏、搜索栏、公告条、全屏菜单、面包屑，目前 550+ 案例。
- 优势：导航的交互形态就那么几种，这里相当于把每种形态的优质实现摆在一起对比选型；由设计师 Christina Liubynska 制作，Mobbin 赞助。
11. CTA Gallery
- 地址：https://www.cta.gallery/
- 简介：专收 Call-to-Action 模块的灵感库，按行业和呈现模式筛选，案例覆盖按钮、表单、弹窗等转化场景。
- 优势：转化模块直接关系业务指标，值得单独找参考而不是顺手设计；这类垂直库目前很少见。
12. Footer Design
- 地址：https://footer.design/
- 简介：自称”地球上唯一的页脚库”，专收 Footer 设计，按排版、小字号、插画、网格、扁平、动效、卡片、暗色等风格分类。
- 优势：页脚是多数网站最敷衍的模块，反过来它也是拉开质感差距的低成本切入点；和 Navbar Gallery 出自同一作者。
13. Unsection
- 地址：https://www.unsection.com/
- 简介：4,000+ 网页分区案例库，来自真实品牌，按分区类型（Hero、Feature、Pricing、Testimonial、FAQ、Logo Cloud……）和风格标签（Bento、Gradient、3D、Uncommon……）双重筛选，每周更新，附一个免费 SVG 库。
- 优势：把”整个网站”拆成”分区”来参考，粒度刚好落在设计和开发真正复用的单位上；未登录可以浏览一部分，免费注册后继续看完整内容。
四、实验性灵感
自己的习惯风格用久了，做出来的东西会越来越像。这个阶段要主动去看”不像自己”的东西，扩展自己的知识边界，以及了解设计前沿都在玩些什么。
14. Awwwards
- 地址：https://www.awwwards.com/
- 简介：网页设计领域最有分量的奖项平台，评委团打分制（Site of the Day 按 10 分制评分，比如近期某日冠军 7.31 分），有 Nominees 投票、Sites of the Month/Year、Honors 等层级；平台还维护 6,065 家机构和专业人士的目录，附带课程学院和交易市场。
- 优势：想看网页表现力的上限就在这里。 能按技术栈筛案例（WebGL、GSAP、Framer、React），做技术选型前先看同类实现心里有底；Collections 里的 Interactive Narratives、Trippy Sites 这类主题合集也很好逛。
15. Inspora
- 地址：https://www.inspora.design/
- 简介：自称”每小时更新”的视觉设计档案库，按 Web、品牌、产品、动效、插画、3D、印刷分类，支持 Latest/Featured 切换，有订阅邮件。
- 优势：更新频率是它最大的差异点——灵感库普遍按天或周更新，按小时更新意味着每次打开都有新东西；内容偏品牌和视觉向，和 Awwwards 的获奖向形成互补。
16. Originkit
- 地址：https://www.originkit.dev/
- 简介：免费动效组件库，300+ 带动画效果的组件——Black Hole、ASCII Rain、Liquid Vortex、Glitch Text，从名字就能感受到风格。支持复制代码、在 Framer 里直接用、以及通过 MCP 接入三种用法，目前 Beta。
- 优势：它解决的是”看了一堆实验感网站，落地时做不出来”的问题，把效果拆成可复制的代码，直接进项目。
灵感工作流
Mobbin、Refero、Originkit 都推出了 MCP，参考库正在变成 AI 的上下文。以前是以人完全主导的设计和开发，但是现在可以让 Agent 理解视觉和参考库了，参考和实现之间的距离在快速缩短。对新时代的设计师/开发者/…，这些灵感库的含金量在提升，因为不只是单单作为人的参考，也成为 Agent 的知识储备。
也不需要全收藏。每个阶段留一两个高频的就够了，比如每天当朋友圈，闲暇刷一下，保持新信息的获取，其它的用到再找。 工具的价值在于被用进流程，而不是躺在收藏夹里增加心理安全感。
我是 Rico, 感谢阅读！
