某大佬收藏100+前端工具和网站推荐收藏夹公开

这份清单是给谁的

整理这份"私藏网站"清单的初衷是给自己留个书签 —— 前端工作两三年下来,各种工具、文档、灵感站点散落在各处,索性集中归类。下面按主题分组,每个都附简短说明,自己挑用得上的。

JavaScript 学习资源

• JavaScript 教程(网道) —— 阮一峰的 JS 教程,中文 JS 入门最稳的资源
• ES6 入门教程 —— ES6+ 特性详解,边学边查
• MDN JavaScript —— 任何 API 不知道怎么用就来 MDN,权威
• Airbnb JS 风格指南 —— 工程代码风格参考
• 现代 JavaScript 教程 —— 国外经典教程,有中文版

CSS / 设计相关

• CSS Tricks —— CSS 技巧博客,永远有学到新东西
• Smashing Magazine - CSS —— 深度文章,适合周末读
• Animista —— CSS 动画生成器,可视化挑参数
• CSS Grid Generator —— Grid 布局可视化生成
• Flexbox Froggy —— Flexbox 游戏化学习
• Grid Garden —— Grid 游戏化学习
• Uiverse —— 社区分享的开源 UI 组件,纯 CSS

配色 / 灵感

• Coolors —— 配色生成器,空格键不停换
• Adobe Color —— Adobe 出品配色工具
• Happy Hues —— 直接告诉你"这套配色用在哪些地方",示例化
• uiGradients —— 渐变色集合,一键复制 CSS
• Behance —— Adobe 旗下设计平台,看专业作品
• Dribbble —— UI / UX 设计师作品集

免费图片 / 图标

• Unsplash —— 高质量免费照片,可商用
• Pexels —— 同上,可商用
• Pixabay —— 同上,可商用
• unDraw —— 免费扁平插画,可定制颜色
• Iconfont —— 阿里图标库,海量图标
• Heroicons —— Tailwind 团队出品,简洁线性图标
• Lucide —— Feather Icons 的延续,更新活跃
• Material Symbols —— Google Material Design 图标

字体

• Google Fonts —— 海量免费 Web 字体
• JetBrains Mono —— 推荐的编程字体
• 更纱黑体 (Sarasa Gothic) —— 中英文等宽混排字体
• 方正字体 —— 中文字体官方源

动画 / 特效

• LottieFiles —— Lottie 动画分享平台,海量免费
• GSAP —— 业界顶级 JS 动画库
• Animate.css —— 一行 class 加动画
• Three.js —— WebGL 3D 库,做特效官方首选

在线工具(开发常用)

• Can I Use —— 查 Web 特性的浏览器支持情况
• Regex101 —— 正则在线测试,带详细解释
• JSON Formatter —— JSON 格式化、校验
• Transform.tools —— 任意格式互转(JSON → TS、JSON → YAML 等)
• JWT.io —— JWT 解析
• DiffChecker —— 在线 diff 工具
• Carbon —— 把代码转成漂亮截图,分享必备

API 调试 / 接口工具

• Postman —— API 调试老牌选择
• Insomnia —— Postman 替代,免费 / 开源
• Hoppscotch —— 在线版 Postman,免下载
• Apifox —— 国产,Postman + Mock + 文档一体

性能 / 测速

• PageSpeed Insights —— Google 的页面性能评分
• GTmetrix —— 性能测试 + 优化建议
• WebPageTest —— 多地点测试加载性能
• CDN Planet —— 各家 CDN 横评

学习平台 / 文章

• 掘金 —— 国内前端社区,质量参差但量大
• GitHub —— Trending 板块每天看,跟得上前沿
• Hacker News —— 国外技术社区,看英文资源汇总
• DEV Community —— 国外开发者博客平台
• Smashing Magazine —— 高质量前端文章

脚手架 / 模板

• Vite —— 现代前端构建工具,新项目首选
• Vitesse —— antfu 的 Vue 3 starter,Best practice 集合
• create-t3-app —— Next.js + tRPC + Prisma 全栈模板
• vue-pure-admin —— Vue 3 后台管理系统模板

状态管理 / 工具库

• VueUse —— Vue Composition API "标准库"
• Pinia —— Vue 3 状态管理
• Zustand —— React 极简状态管理
• Lodash —— 工具函数库(用 lodash-es 才 tree-shakable)
• Day.js —— Moment.js 替代品,体积 1/10

大佬 / 社区

• @antfu —— Vue 核心团队,unplugin 系列作者
• @youyuxi —— Vue 作者 Evan You
• @dan_abramov —— Redux / React 核心 maintainer
• @wesbos —— 前端教育者,内容质量稳

怎么用这份清单

建议:

1. 每天看一遍 Trending —— GitHub Trending、掘金每日推荐,接触新东西
2. 遇到问题再查 —— 不要看到工具就装,实际用到再说
3. 逐步沉淀自己的清单 —— 这份只是参考,你的"私藏"应该跟你的工作领域更相关

前端工具/库的变化速度极快,清单每年都该更新一遍 —— 三年前的"必装"今天可能已经过时(比如 webpack-dev-server 被 Vite 替代),保持收藏夹的新鲜度,也是工程师的一种素养。

—— 别看了 · 2026