5个设计站，补的是页面最缺的那几块

做页面时打开空白文档，收藏夹里躺着一排灵感站，导航栏还是不知道从哪下手。参考站的价值常被高估，能省时间的地方其实很具体：某个位置没想法，去对应站看几个上线案例，拆结构和文案，马上开工。下面5个入口按页面位置分。

1. Scrolltide：把滚动动效和3D场景变成可粘贴的 prompt

Scrolltide 是一个滚动驱动模板和提示词库。滚动驱动指页面滚动时触发动画、固定元素、3D 场景变化。它给了 143 个模板、85 个组件、55 个着色器背景、23 个区块、14 个后台 UI 屏幕，覆盖 React、Vite、Next.js、Tailwind、Framer Motion、GSAP、Three.js、WebGL、Shaders、Lenis。工作流三步：选 prompt，粘进 Claude、Cursor 或 v0，输出 Next.js 页面。适合需要动效但不想从零写 GSAP 和 Three.js 的项目。

价格要看清：完整库是 early access 终身 $299 一次性，有免费模板如 Otis、SELENE 可以先试。官网写 13,500+ builders，每周五更新。评论区有人问免费不免费，入口从免费模板和付费完整库分开看。

官网：https://www.scrolltide.co/

2. Navbar.gallery：导航栏没想法时，先按类型找

导航栏是用户进入页面后最先看到的结构。Navbar.gallery 把参考分成静态吸顶、下拉、Mega Menu、侧边栏、搜索栏、公告条、全屏菜单、面包屑。Mega Menu 是大下拉菜单，适合产品线多的官网。后台系统看侧边栏和搜索栏更直接。先定类型，再看截图，比漫无目的刷图快。

入口：https://www.navbar.gallery/

3. Footer.design：页脚是收尾区域，别当垃圾桶

页脚常被当成版权信息和社交图标的堆放区。这个站专门收页脚设计参考，适合看次级导航、联系方式、信任信息和转化入口怎么排。页面做完主体后，页脚决定用户离开前还能不能找到下一步。

入口：https://www.footer.design/

4. CTA.gallery：行动按钮的文案、层级和位置

CTA 是行动按钮，注册、购买、预约都算。这个站收高转化 CTA 参考。看的时候别只看颜色，重点看按钮在页面里的层级、周围留白、文案动词和悬停态。按钮本身不复杂，难的是让用户知道下一步点哪里。

入口：http://cta.gallery

5. styles.refero.design：从真实产品里看设计风格

这个站收真实产品的设计风格。营销页容易做得好看，真实产品的后台、空状态、数据表格更难演。做 AI 产品或工具站时，可以在这里看布局密度、组件状态和视觉风格，避免只参考落地页。

入口：http://styles.refero.design

这5个站能提高找参考的速度，替代不了品牌判断。先确定页面缺哪块，再去对应站找3个参考，拆结构、文案和状态，别存一堆图。收藏这个动作最便宜，也最容易被误当成进度。评论区有人只留了收藏两个字，有人问免费不免费。入口都在上面，先打开一个，比继续收藏有用。