🔶 前端优质资源、前沿AI工具分享
来源：https://my.feishu.cn/docx/SVFLd3ybAoBUaSxkfjoc2QNsnCi
采集状态：已完成正文采集；附件或其他资源尚未完整保存；已展开五、七两处默认折叠章节，连续滚动至文末，正文已完整采集；PDF 附件预览中的下载按钮明确禁用，未下载附件。

一、 必读博客 / 人物

国内团队博客

•

凹凸实验室 (AOTU.IO): 京东用户体验设计部出品，文章质量非常高，内容覆盖广度与深度俱佳，尤其在图形学、可视化、前端工程化方面有深入探索。

◦

https://aotu.io

•

淘系前端团队 (TaobaoFED): 淘宝前端团队，分享电商业务下的前端挑战与解决方案，内容非常务实，尤其在大促高并发、性能优化、跨端技术（如 Weex）方面有丰富经验。

◦

https://fed.taobao.org

•

美团技术团队: 内容不止于前端，但前端相关的文章都极具深度，尤其在性能优化、前端监控、Node.js 实践、小程序开发等方面值得反复阅读。

◦

https://tech.meituan.com

•

AlloyTeam: 腾讯 AlloyTeam 团队，虽然近年更新频率降低，但其历史文章（如 Webpack 深入、JS 基础剖析）依然是经典，值得考古。

◦

http://www.alloyteam.com

•

奇舞团 360: 奇虎 360 公司的前端团队，其《奇舞周刊》非常有名，博客本身也沉淀了大量技术好文。

◦

https://75.team

国外团队博客 & 资讯站

•

Vercel Blog: Next.js 的母公司，这里是获取 React 服务端渲染、边缘计算、Web 性能和未来 Web 架构风向的最佳去处。

◦

https://vercel.com/blog

•

Chrome for Developers: Google Chrome 团队官方出品，获取 Web 平台最新 API、浏览器新特性、性能分析工具 (DevTools) 更新的一手来源。

◦

https://developer.chrome.com/blog

•

Smashing Magazine: 老牌、高质量的前端技术杂志，内容涵盖设计、开发、UX 等，文章通常篇幅较长但深度十足。

◦

https://www.smashingmagazine.com

•

CSS-Tricks: 学习 CSS 的宝藏网站，虽然创始人已离开，但历史文章和 Almanac（CSS 属性大全）依然是不可多得的参考资料。

◦

https://css-tricks.com

技术领袖 (Twitter / Blog)

•

Evan You (尤雨溪): Vue.js 和 Vite 的创造者。关注他可以第一时间了解 Vue 生态和前端构建工具的未来方向。

◦

Twitter: @youyuxi

•

Dan Abramov: React 核心团队成员，Redux 的共同作者。他的文章和 Twitter 善于用简单的语言解释复杂概念，对深入理解 React 原理非常有帮助。

◦

Blog: overreacted.io

◦

Twitter: @dan_abramov

•

Anthony Fu (antfu): Vue 核心团队成员，Vite 生态的巨擘，VantUI 作者。开源界的“卷王”，创造了 Vitest, VueUse, Slidev 等无数优秀工具。关注他能让你灵感迸发。

◦

Blog: https://antfu.me/

◦

Twitter: @antfu7

•

Addy Osmani: Google Chrome 团队的工程经理，专注于 Web 性能和工具。他的文章和分享是性能优化的权威指南。

◦

Twitter: @addyosmani

•

Rich Harris: Svelte 和 Rollup 的创造者。他的思想和演讲总是能引发对当前前端开发范式的深刻反思。

◦

Twitter: @Rich_Harris




二、 优质周刊 / 资讯

通过订阅周刊，可以高效地过滤和聚合每周最重要的行业信息，保持知识的同步。

•

Frontend Focus: 综合性前端周刊，涵盖 HTML, CSS, WebGL, Canvas 等，每周一期，内容精炼。

◦

https://frontendfoc.us

•

JavaScript Weekly: 专注于 JavaScript 语言本身、库和框架的周刊，是 JS Weekly 系列的旗舰。

◦

https://javascriptweekly.com

•

React Status / Node Weekly: 如果你专注于 React 或 Node.js，这两个垂直领域的周刊能提供更聚焦的内容。

◦

https://react.statuscode.com

◦

https://nodeweekly.com

•

Bytes: 由 react-router 作者创建，风格轻松有趣，除了技术链接，还有编程 meme，非常受欢迎。

◦

https://bytes.dev

•

奇舞周刊: 由 360 奇舞团维护，是国内质量最高的中文前端周刊之一，每周筛选国内外优秀文章并附上简短评语。

◦

https://weekly.75.team




三、 宝藏开源库

•

Zod: TypeScript-first 的 schema 声明和验证库。它能让你只定义一次数据结构，就自动获得类型推断和运行时验证，完美解决了 TS 类型与运行时数据校验的鸿沟。

◦

https://github.com/colinhacks/zod

•

Zustand: 轻量、快速的 React 状态管理库。API 极其简洁，基于 Hooks，几乎没有模板代码，心智负担小，被誉为“Redux 的现代简约替代品”。

◦

https://github.com/pmndrs/zustand

•

Partytown: 将第三方脚本（如 Google Analytics, Intercom）的执行转移到 Web Worker 中，从而释放主线程，显著提升网站性能和响应速度，尤其适合营销或分析脚本过多的场景。

◦

https://github.com/BuilderIO/partytown

•

AutoAnimate: 一个零配置的动画库。只需将其应用到父元素上，任何子元素的增、删、移动都会自动产生平滑的过渡动画。用于列表或表单等动态场景效果拔群。

◦

https://github.com/formkit/auto-animate

•

date-fns: 现代、模块化的 JavaScript 日期工具库。相比 Moment.js，它支持摇树优化（Tree-shaking），打包体积更小，且 API 设计更符合函数式编程思想，返回不可变对象。

◦

https://github.com/date-fns/date-fns

•

Radix Primitives: 一系列高质量、无样式、功能完备的 React UI 组件（如下拉菜单、对话框、工具提示等），专注于可访问性 (a11y) 和键盘交互。你可以完全自定义样式，是构建设计系统的绝佳底层。

◦

https://www.radix-ui.com




四、AI 编程与学习平台

吴恩达（Andrew Ng）

•
适合所有人的 AI 课程：https://www.deeplearning.ai/courses/ai-for-everyone/

•
Vibe Coding 基础（Replit 合作课）：https://learn.deeplearning.ai/courses/vibe-coding-101-with-replit/lesson/rmlc7/principles-of-agentic-code-development 

•
YouTube：https://www.youtube.com/@AndrewNg

•
X（Twitter）：https://twitter.com/AndrewYNg 

Anthropic

•
Anthropic 学院：https://www.anthropic.com/learn

•
官方 YouTube：https://www.youtube.com/@anthropic-ai 

•
Claude Code 教程（中文文档）：https://docs.anthropic.com/zh-CN/docs/claude-code/overview 

•
提示工程深入探讨：https://www.youtube.com/watch?v=T9aRN5JkmL8

•
MCP协议：https://modelcontextprotocol.io/docs/getting-started/intro




 五、优质博主/ AI从业者

•

Andrej Karpathy（Open AI联合创始人）

◦

https://x.com/karpathy 

◦

https://www.youtube.com/@AndrejKarpathy

•

Sam Altman：(OpenAI的首席执行官）

◦

https://x.com/sama

•

Simon Willison (Datasette 项目创作者)

◦

https://x.com/simonw

•

Yann LeCun（Meta 首席科学家）

◦

https://x.com/ylecun

中文优质博主

•

宝玉（dotey）：

◦

X https://x.com/dotey




六、一手 AI 信息媒体

•
OpenAI ：https://openai.com/news/ (OpenAI)

•
Anthropic ：https://www.anthropic.com/news ｜ https://www.anthropic.com/engineering

•
Google AI ：https://blog.google/technology/ai/ ｜ https://research.google/blog/ 

•
Meta AI Blog ：https://ai.meta.com/blog/ ｜ https://ai.meta.com/research/ 

•
xAI News：https://x.ai/news




七、AI 工具

对话式助手

1.
ChatGPT：https://chatgpt.com/

2.
Cherry Studio(多AI聚合）: https://www.cherry-ai.com/

3.
Perplexity（AI 搜索）：https://www.perplexity.ai/ 

4.
OpenRouter(各种模型的API)：https://openrouter.ai/

终端命令行

1.
Warp: https://www.warp.dev/

2.
Claude Code: https://docs.anthropic.com/zh-CN/docs/claude-code/overview 

3.
CodeX: https://openai.com/codex/

4.
Qwen-code: https://github.com/QwenLM/qwen-code

效率工具

1.
Raycast: https://www.raycast.com/

2.
Comet(AI浏览器）：https://www.perplexity.ai/comet

3.
Notebookllm: https://notebooklm.google.com/

智能体平台

1.
n8n: https://n8n.io/workflows/






八、 优秀网站推荐

1.
Grid布局

    https://cssgridgarden.com/ Grid布局小游戏




九、前端好书推荐

附件不支持打印

JavaScript高级程序设计（第5版）.pdf

161.71MB



本文暂未被其它文档引用

原文链接与附件索引
https://aotu.io
https://aotu.io/
https://fed.taobao.org
https://fed.taobao.org/
https://tech.meituan.com
https://tech.meituan.com/
http://www.alloyteam.com
http://www.alloyteam.com/
https://75.team
https://75.team/
https://vercel.com/blog
https://vercel.com/blog
https://developer.chrome.com/blog
https://developer.chrome.com/blog
https://www.smashingmagazine.com
https://www.smashingmagazine.com/
https://css-tricks.com
https://css-tricks.com/
@youyuxi
https://twitter.com/youyuxi
overreacted.io
https://overreacted.io/
@dan_abramov
https://twitter.com/dan_abramov
https://antfu.me/
https://antfu.me/
@antfu7
https://twitter.com/antfu7
@addyosmani
https://twitter.com/addyosmani
@Rich_Harris
https://twitter.com/Rich_Harris
https://frontendfoc.us
https://frontendfoc.us/
https://javascriptweekly.com
https://javascriptweekly.com/
https://react.statuscode.com
https://react.statuscode.com/
https://nodeweekly.com
https://nodeweekly.com/
https://bytes.dev
https://bytes.dev/
https://weekly.75.team
https://weekly.75.team/
https://github.com/colinhacks/zod
https://github.com/colinhacks/zod
https://github.com/pmndrs/zustand
https://github.com/pmndrs/zustand
https://github.com/BuilderIO/partytown
https://github.com/BuilderIO/partytown
https://github.com/formkit/auto-animate
https://github.com/formkit/auto-animate
https://github.com/date-fns/date-fns
https://github.com/date-fns/date-fns
https://www.radix-ui.com
https://www.radix-ui.com/
https://www.deeplearning.ai/courses/ai-for-everyone/
https://www.deeplearning.ai/courses/ai-for-everyone/
https://learn.deeplearning.ai/courses/vibe-coding-101-with-replit/lesson/rmlc7/principles-of-agentic-code-development
https://learn.deeplearning.ai/courses/vibe-coding-101-with-replit/lesson/rmlc7/principles-of-agentic-code-development
https://www.youtube.com/@AndrewNg
https://www.youtube.com/@AndrewNg
https://twitter.com/AndrewYNg
https://twitter.com/AndrewYNg
https://www.anthropic.com/learn
https://www.anthropic.com/learn
https://www.youtube.com/@anthropic-ai
https://www.youtube.com/@anthropic-ai
https://docs.anthropic.com/zh-CN/docs/claude-code/overview
https://docs.anthropic.com/zh-CN/docs/claude-code/overview
https://www.youtube.com/watch?v=T9aRN5JkmL8
https://www.youtube.com/watch?v=T9aRN5JkmL8
https://modelcontextprotocol.io/docs/getting-started/intro
https://modelcontextprotocol.io/docs/getting-started/intro
https://x.com/karpathy
https://x.com/karpathy
https://www.youtube.com/@AndrejKarpathy
https://www.youtube.com/@AndrejKarpathy
https://x.com/sama
https://x.com/sama
https://x.com/simonw
https://x.com/simonw
https://x.com/ylecun
https://x.com/ylecun
https://x.com/dotey
https://x.com/dotey
https://openai.com/news/
https://openai.com/news/
OpenAI
https://openai.com/news/?utm_source=chatgpt.com
https://www.anthropic.com/news
https://www.anthropic.com/news
https://www.anthropic.com/engineering
https://www.anthropic.com/engineering
https://blog.google/technology/ai/
https://blog.google/technology/ai/
https://research.google/blog/
https://research.google/blog/
https://ai.meta.com/blog/
https://ai.meta.com/blog/
https://ai.meta.com/research/
https://ai.meta.com/research/
https://x.ai/news
https://x.ai/news
https://chatgpt.com/
https://chatgpt.com/
https://www.cherry-ai.com/
https://www.cherry-ai.com/
https://www.perplexity.ai/
https://www.perplexity.ai/
https://openrouter.ai/
https://openrouter.ai/
https://www.warp.dev/
https://www.warp.dev/
https://openai.com/codex/
https://openai.com/codex/
https://github.com/QwenLM/qwen-code
https://github.com/QwenLM/qwen-code
https://www.raycast.com/
https://www.raycast.com/
https://www.perplexity.ai/comet
https://www.perplexity.ai/comet
https://notebooklm.google.com/
https://notebooklm.google.com/
https://n8n.io/workflows/
https://n8n.io/workflows/
https://cssgridgarden.com/
https://cssgridgarden.com/