给前端开发者的 100 个设计参考网站

做一个设置页，光看静态截图，很容易漏掉保存失败和离开页面这两步。做一个带滚动动效的首页，只看录屏，又很难知道动画从哪一段滚动开始。问题不同，能回答它的参考也不同。

Eian 分享的设计网站清单里，既有获奖作品、电影静帧和字体档案，也有真实产品流程和前端 Demo。下面沿用素材的九个类别，保留 100 个资源入口，并给每一类加一个具体的观察任务。 Eian 的原始清单

用一个设置页练习拆参考

假设要给 SaaS 产品做通知设置页。可以先在产品流程库里看用户关闭通知后发生了什么，再决定用即时保存还是集中提交。如果产品采用集中提交，就把「有未保存修改」「正在保存」「保存失败」都画出来，用两行长标签和一条错误消息检查窄屏布局。

落到代码时，再把可观察的行为写清楚。保存失败后保留开关状态和错误提示，用户可以直接重试。页面用键盘能按阅读顺序操作，焦点在滚动时也能看见。这样回头对照参考时，手里有一组能在浏览器里逐项检查的条件。 Vercel Web Interface Guidelines

大赛与奖项

同一场 3D 挑战里的作品适合横向比较。找一轮共用运动模板的 Pwnisher 挑战，挑两段看同一个时间点。主体怎样从背景里跳出来，视线被哪束光引走，镜头停下时画面还剩多少信息。看网页获奖作品也可以沿用这个办法，先挑两件目标相近的作品，再比较它们如何安排视线。

动态设计与视频

想拆一个转场，可以先关掉声音，记下动作从哪里开始、在哪里停，再开声音看切点是否跟着节拍。研究应用里的微交互时，可以借用这种逐段观察法，把触发、反馈和结束各自标出来。电影片头适合看多元素如何接力，界面里则可以从一个按钮或一张卡片开始试。

3D 与渲染

看到一个材质做得好的作品，先问质感来自模型细节、贴图，还是光照。找一个可以旋转查看的模型，换几个角度观察轮廓。再用同一材质做两个小样，只换环境光，就能看出反射和阴影对画面的影响。准备把素材放进项目时，按具体资产确认授权。

电影画面与镜头参考

为产品视频找参考时，可以从一组明确条件出发，比如近景、侧光、主体偏右、左边留出字幕位置。静帧适合检查构图和明暗，运镜则要看连续镜头。遇到一个合适的推镜头，记下它从多大的景别开始，到哪里结束，以及这段运动揭示了什么信息。

UI 设计

做设置页时，先找同类产品中一条完整的操作路径。从入口一直看到提交之后，记录它何时提示未保存、保存失败后是否保留输入、返回原页时焦点落在哪里。界面截图适合看控件排布，流程录屏适合看状态怎么切换。最后用键盘走一遍自己的页面，检查焦点可见和提交反馈。可以对照 Vercel Web Interface Guidelines。

网页灵感

做 SaaS 定价页，可以先收集三张同类页面，只比较首屏承诺、套餐差异和下一步按钮的位置。打开原网页后再缩到手机宽度，看看三列卡片如何改成纵向，核心差异是否还能快速找到。写设计说明时，记录具体做法，例如把每个套餐的价格和计费周期排在一起。

前端与交互

看到一个滚动联动的案例，先把它缩到一节内容和一个动画属性。明确滚动经过哪个区间时开始改变，离开区间时保留什么状态，反向滚动会发生什么。GSAP 的示例库有独立的 ScrollTrigger 分类，可以从接近目标的示例读起。移植时在窄屏、触屏和减少动态效果的系统设置下各走一遍。 GSAP Demo Hub

字体与配色

把字体和配色放回真实页面里看。准备一段长中文标题、一个英文产品名和一行灰色辅助文字，分别检查手机和桌面上的换行、字重和对比度。字号和间距有明确的大小屏端点时，可以用 Utopia 推算中间宽度的流体尺度。背景、正文、边框和交互状态的颜色可以分别命名，后续切换主题时更容易追到用法。 Utopia

日常收集灵感

收藏作品时，记下它解决的问题和以后可能用到它的地方。一条笔记可以只写三句，例如「移动端定价页」「把共同权益放到了套餐列表下面」「下次做套餐比较时复查」。下次检索时就可以直接搜「定价」或「共同权益」。