AI帮你写代码、生成设计的时代已经到来。但真正的问题在后面。AI做出来的东西好不好，如果没有判断的眼光，一切都是白搭。
这是什么?
最近用 Cursor、Claude Code、Bolt 这类 AI 编程工具做应用的人越来越多，"氛围编程"（Vibe Coding）这个说法甚至应运而生。但代码可以让 AI 代劳，结果好不好，最终还得人来判断。
设计参考网站是系统收录并分类真实上线应用和 Web 服务 UI/UX（用户界面/用户体验）的资源库，也是设计公司的设计师在启动项目前必定参考的工具。即便不是专业设计师，这也是最快建立"什么是好设计"直觉的方法。
在 AI 时代，这类参考资源的价值反而更高了。因为要对 AI 说"做成这种感觉"，你得先知道"这种感觉"到底是什么。有设计师说过："找到好的参考、积累自己的洞察很重要。"
今天介绍的 4 个网站各有侧重：交互动效视频、界面截图、产品 UI 归档、UX 流程录屏——可以根据需求分别使用。
有什么不同?
你可能会想："这不就是 Dribbble 或 Behance 那种吗？"其实完全不一样。Dribbble 和 Behance 展示的是设计师的作品，大多是为了作品集而做的概念设计，并非真正发布的产品。而今天介绍的这些网站，收录的是真实运营中的应用和服务的实际界面。
| 作品集型（Dribbble等） | 实际产品参考 | |
|---|---|---|
| 内容 | 概念设计、效果图 | 真实上线的应用UI |
| UX流程 | 以单页面为主 | 注册→结账全流程 |
| 实务参考价值 | 仅供灵感参考 | 可直接参照 |
| AI提示词参考 | 抽象描述 | 可指定具体模式 |
实务中的差距非常明显。比如，直接告诉 AI "帮我做个支付页面"，结果往往平平无奇；但如果先在 Mobbin 上看过 Airbnb 的结账流程，再说"按这个模式来"，结果就完全不同了。Figma 的 Marco Cornacchia 也说过："Mobbin 是我最爱的资源，因为你能看到真实应用如何处理特定 UI 模式和流程。"
下面逐一来看这 4 个网站。
| 网站 | 优势 | 内容形式 | 价格 |
|---|---|---|---|
| Mobbin | 按UX流程分类，60万+截图 | 截图 + 流程视频 | 免费（Pro付费） |
| 60fps.design | 交互/动效视频收录 | 视频截录 1,880+ | 免费 |
| Refero | SaaS/Web产品UI + MCP支持 | 桌面端截图 + 流程 | 免费（Pro付费） |
| Page Flows | UX流程录屏 + 标注 | 屏幕录制视频 | 付费（$99/年） |
上手指南：按目标选对工具
- 需要交互/动效灵感时 → 60fps.design
以视频形式收录 1,880 个以上应用交互的网站，按按钮动效、滑动、加载、引导页等 88 种分类筛选。订阅用户超过 62,800 名设计师，可以直接看到 Duolingo、Airbnb、Instagram 等知名应用的精细交互细节。在传达应用"感觉"时最为实用。 - 需要查找特定UX模式时 → Mobbin
这是体量惊人的参考网站，收录了来自 1,150 个以上应用的 601,500 张截图和 320,000 个流程。可以按"引导注册""结账""个人资料"等 UX 流程搜索，还能通过 Figma 插件直接复制设计。Visa、Shopify、Figma 等公司的设计团队都在实务中使用。可以免费起步，门槛不高。 - 参考SaaS/Web产品UI时 → Refero
这是收录 Stripe、Shopify、Notion 等真实 SaaS 产品桌面端 UI 的参考库。按 45 种页面类型、87 种 UX 模式、69 种 UI 元素分类，搜索功能很强。特别之处在于，它还支持 AI 智能体用的 MCP（Model Context Protocol，模型上下文协议）。这意味着 AI 编程工具可以直接参照 Refero 的素材生成更好的设计。Product Hunt 4.9 分的评价也很亮眼。 - 需要以视频查看完整用户旅程时 → Page Flows
这个网站以屏幕录制视频的形式呈现真实应用的 UX 流程。仅凭截图难以感知的转场效果、微交互和实际使用流程，在这里都能通过视频直观看到。收录了 Airbnb、Dropbox、Slack 等 2,000 个以上的流程录制，超过 10 万名设计师在使用。付费（$99/年），但提供 3 天免费试用。
在AI提示词中运用参考素材的技巧
向 AI 提设计需求时，把在参考网站上看到的模式具体描述出来，结果质量会大幅提升。不要说"帮我做个支付页面"，而是说"做成 Airbnb 风格的分步结账流程，顶部带进度条"。
