设计灵感
国际知名的网页设计评奖平台,获奖作品适合每天逛着培养审美
玻璃温室 · 前端学习导航
让好网站在这里向阳生长
按用途分类的优秀前端网站,每站配中英双语说明和结构化详情。逛一逛,审美就慢慢长出来了。
分类
标签
设计灵感
设计灵感
官方品牌手册直达:Adobe/Spotify/IBM/Twitch 等大厂的品牌规范文档目录
设计灵感
30 种设计风格的完整提示词库:看中哪种风格,复制对应提示词直接喂给 AI
设计灵感
全球设计师作品社区,找 UI 视觉灵感的主流去处
设计灵感
精选落地页设计画廊,做营销页前先来这里看
设计灵感
真实 App 界面截图库,移动端设计的实用参考(以 iOS 为主)
设计灵感
单页站死磕 17 年的老牌画廊:9000+ 单页网站与区块示例,落地页灵感认它
设计灵感
社媒帖子设计灵感:640+ 品牌的 Launch/更新公告帖子合集,做 OG 图和营销页照着抄版式
设计灵感
元素周期表之神的新作:整棵生命演化树的交互可视化,交互设计的天花板参考
设计灵感
每日精选的设计灵感聚合:网页、品牌、动效、3D 等十余个门类一网打尽
设计灵感
真实产品官网案例库:Stripe/Linear/OpenAI 等精选,特色是追踪同一产品的改版前后
设计灵感
老牌优秀网站展示馆,按行业/风格/主题筛选
交互动效参考
交互动效参考
主流 App 的界面动效录屏库:2000+ 条覆盖 487 个应用,按手势/交互模式筛选
交互动效参考
像拼词一样写动画:fade、up、slide 组合即成效果,3KB 搞定
交互动效参考
前端代码游乐场,动效小样和实验的集中地
交互动效参考
创意网页交互教程老牌站点,demo 完成度高
交互动效参考
缓动函数可视化对照表,调动画“手感”的基础工具(有中文版)
交互动效参考
业界标准 JS 动画库,官网 showcase 本身就是动效灵感库
交互动效参考
Lottie 动画资源库与工具站,找现成轻量矢量动效的主要去处
交互动效参考
React 动效的事实标准(原 Framer Motion):弹簧物理、手势、布局动画一站齐
交互动效参考
用 React 代码做视频:时间轴即状态、动画即组件,数据驱动的动态图形与批量渲染
交互动效参考
状态驱动的交互动画平台,做可交互角色和微动效
交互动效参考
WebGPU 特效变成声明式组件:光效、滤镜像写标签一样用,React/Vue/Svelte 都支持
交互动效参考
图标平滑变形:太阳变月亮不是切换是流动,Lucide 全家支持,引擎仅 80KB
交互动效参考
App 级页面转场上 Web:hero 飞行、下钻、弹层,能复刻 YouTube/Instagram 的切换效果
交互动效参考
把任意字体变成逐笔手写动画:笔顺粗细都在,中日韩文通吃
交互动效参考
拿来即用的 Three.js 素材库:3D 首屏、WebGL 背景、液态按钮、文字动效,每个都给源码
交互动效参考
粒子特效引擎:交互背景、纸屑、烟花,配置实时预览,什么框架都能接
教程学习
教程学习
CSS 技巧老牌博客,广泛引用的 Flex/Grid 完全指南出自这里
教程学习
设计工程师资源导航:文章/组件库/工具按动作分类,专收设计×前端交叉岗的干货
教程学习
免费编程学习平台,边做项目边学,修完主线可拿免费认证
教程学习
拿真实设计稿练前端还原的挑战平台,练手和攒作品集都合适
教程学习
《现代 JavaScript 教程》,从入门到进阶的系统性免费教材(有中文版)
教程学习
精品前端博客,CSS 和动效教程讲得又深又有趣
教程学习
中文技术社区,前端内容和国内技术动态的重要来源
教程学习
前端设计模式与渲染策略的现代化指南
教程学习
Google 出品的 Web 开发最佳实践,性能与体验课程都在这
文档与工具
文档与工具
12 个免费 3D 工具一页全：转 3D、贴图、重拓扑、减面；文件类不出本机
文档与工具
内容型网站的首选框架:默认零 JS,需要交互的地方才插 React/Vue 岛屿
文档与工具
全球最流行的前端框架：v6 开始 CSS-first 主题化、组件翻新，连 AI 助手都有专属文档
文档与工具
浏览器兼容性查询工具,写前先查省掉返工
文档与工具
AWS 出品的设计系统:94 个组件、62 条模式指南,云产品级企业质感
文档与工具
做 Tabs 前先看二十家大厂怎么做:60 种组件 × 95 个设计系统 × 2700 个真实示例
文档与工具
配色方案生成器,按一下出整套配色
文档与工具
免费网络字体库,中文/西文字体一站取用
文档与工具
Zed 编辑器同款 GPU 渲染框架的 React 版——不靠 Electron 做原生级桌面应用
文档与工具
纯浏览器 PDF 提图:图片按原分辨率全拽出、打包下载,全程不上传
文档与工具
纯浏览器位图转 SVG:logo 描图随手矢量化,图像全程不出本机
文档与工具
把状态拆成原子自由组合，依赖自动追踪，React context 重渲染的顽疾正解
文档与工具
开源图标库,线性风格干净利落,适合做项目图标
文档与工具
Web 技术权威文档,查 HTML/CSS/JS 标准先来这里(有中文)
文档与工具
全栈 React 的事实标准:路由、渲染、数据获取、缓存一整套,AI 助手文档友好
文档与工具
3KB 的 React:同一套现代 API,体积只有零头,小部件与嵌入场景之王
文档与工具
React 官方文档,教程和实践指南质量很高(有中文版)
文档与工具
搭管理后台最快的路:接上 REST/GraphQL 就有表格、表单、权限、国际化
文档与工具
Adobe 的无头无障碍组件库:交互、无障碍、国际化全内置,样式自己写
文档与工具
节点式画布的事实标准:拖拽连线做流程图、AI 编排界面,Stripe 都在用的底座
文档与工具
Meta 出品的「学一次 React,到处写原生」:一套代码渲染成 Android/iOS 真原生界面
文档与工具
React 生态最流行的路由库(48 亿次下载),本导航站就是用它建的
文档与工具
正则表达式在线调试器,实时解释匹配过程
文档与工具
浏览器本地运行的图片工具集:30+ 格式转换/压缩/裁剪零上传,隐私优先
文档与工具
六个纯浏览器运行的前端安全小工具:JWT 调试、CSP 评分、SRI 哈希生成,数据不出本地
文档与工具
纯浏览器运行的图片 DPI 修改工具,不重编码、不联网上传,论文投稿和打印场景救急
文档与工具
水墨风的 React 组件库:让界面长出水墨气质的开源设计系统
文档与工具
原子化 CSS 框架官方站,文档本身就是设计系统教科书
文档与工具
一套代码同时做 Web 和 App:跨端样式库+组件库,编译器优化,性能优先
文档与工具
TypeScript 官网,手册和在线 Playground 都在这
文档与工具
拿来即用的组件超市:3000+ 社区组件(按钮/卡片/表单/加载器),CSS/Tailwind 一键复制
文档与工具
在浏览器里直接跑 WebGPU 着色器,Vercel 出的新库,带交互示例和 AI 友好文档
文档与工具
新一代前端构建工具官网,本项目就基于它
文档与工具
约 2KB 的 React/Preact 极简路由:Hooks 优先,React Router 的轻量替代
文档与工具
框架无关的交互逻辑状态机库:菜单/弹窗/手风琴的复杂交互逻辑,画成状态机直接复用
推荐一个站点
知道值得收录的前端网站?填个名字和网址告诉我们。
点击提交会在 GitHub 打开推荐页(需 GitHub 账号);提交后由人工审核,收录前会撰写中英双语介绍。
常见问题
这是什么站?
一个精选前端网站导航:按用途分成设计灵感、交互动效、教程学习、文档与工具四类,每站配有中英双语说明和结构化详情页,帮你快速找到值得逛的好站点。
收录标准是什么?
宁缺毋滥:只收人工精选过的优秀站点,优先看内容质量、更新频率和对前端学习者的实际价值,不追求大而全。
怎么推荐站点?
用页面底部的推荐表单(或在 GitHub 直接开 issue):点击提交会跳转到 GitHub 完成推荐,提交后由人工审核,通过后会撰写中英双语介绍再上线。
为什么中英双语?
站点说明同时写中英两语:既方便自己双语检索,也让不同语言的访客都能读懂每站是做什么的——自用和公开是同一套标准。
分类是怎么划分的?
按用途分四类:设计灵感(找视觉参考)、交互动效(看效果怎么实现)、教程学习(系统提升)、文档与工具(日常查证提效);每个站点归入其最主要的用途。
内容怎么更新?
全站由数据文件驱动:增改站点后重新构建即可生效,列表与详情页随数据一并更新,无需逐页手改。
关于本站
前端学习导航站是一份持续维护的前端学习导航与精选策展:按用途组织优秀网站,让你在对的场景找到对的参考,逛一逛,审美就慢慢长出来。
每个站点都配中英双语说明与结构化详情页(是什么、怎么用、核心特点),跨语言检索和阅读都不迷路。
全站由数据文件驱动静态生成,每个收录站点都有独立的详情页,共同形成一套可被检索的前端网站详情页矩阵。