Overview
AI 参与说明（Agent：Codex）：本页由 Codex 在保留原有 Frontend 资源的基础上补充主题导航。新增入口指向站内已校验的技术文档；具体版本和适用边界以对应专题页为准。
修订说明
导航补充（2026-10-22，Agent：Grok Bot (Blog)、Cursor）：在 React 下加入 beUI 源码分析，说明自建交互、Motion 与 Floating UI 定位的分工。执行入口 Cursor Cloud。模型
grok-4.7-high-fast；reasoning effort 未作为独立字段取得。
导航补充（2026-10-22，Agent：Codex）：加入 OpenUI 的运行时界面生成研究，说明概念、使用方式与 Generative UI 方案选择，包含 shadcn integration 扩展示例。运行记录：模型
gpt-6.1-sol，reasoning effortultra，执行入口 Codex Desktop。
导航补充（2026-10-22，Agent：Codex）：加入面向工程师的 UI 设计实践指南，包含原创任务页案例、HTML/CSS 示例与操作检查。执行入口 Codex Desktop；模型完整标识与 reasoning effort 未取得任务级运行记录。
对比文结构整理（2026-10-22，Agent：Codex）：token 对比按语义、派生、尺度、组件消费与主题修改重排；通用网站设计方法独立为延伸阅读，保留原资料。执行入口 Codex Desktop；模型完整标识与 reasoning effort 未取得任务级运行记录。
导航补充（2026-10-22，Agent：Codex）：加入 shadcn/ui 与 HeroUI v3 的 Design Tokens 对比，区分默认语义角色、Tailwind 基础尺度与网站设计规则。执行入口 Codex Desktop；本轮模型完整标识与 reasoning effort 未取得任务级运行记录。
导航补充（2026-10-22，Agent：Codex）：加入界面设计资料清单，区分 PDF 图书、在线书、CSS 文章与课程，并提供官方阅读入口。执行入口 Codex Desktop；模型完整标识与 reasoning effort 未取得任务级运行记录。
导航补充（2026-10-15，Agent：Codex）：加入 Base UI 与 React Aria 深度对比，涵盖底层交互、现代 API、Collection 与 HeroUI 样式复用。运行记录：模型
gpt-6.1-sol，reasoning effortultra，执行入口 Codex Desktop，提供方openai。
导航补充（2026-10-13，Agent：Codex）：加入 HeroUI Agents 产品形式研究，区分开发阶段的 Pro 组件与应用运行时的托管助手，并说明 Generative UI 的可扩展边界。运行记录：模型
gpt-6.1-sol，reasoning effortultra，执行入口 Codex Desktop，提供方openai。
2026-09-07 导航补充（Agent：Codex）：新增 BoardUI 与 HeroUI Pro 对比入口；模型
gpt-6-astra，reasoning effortultra，执行入口 Codex Desktop，CLI 版本0.153.4，提供方openai。
2026-09-08 导航补充（Agent：Grok）：在 Tooling 下新增 Web 3D 基础概念入口。模型
grok-4.6，提供方xAI，执行入口 Grok Build TUI。
2026-09-14 导航补充（Agent：Grok）：新增 Puck / GrapesJS 建站 SDK 对比入口（不含 Craft.js）。
2026-09-15 导航修正（Agent：Grok）：下线含 Craft.js 的旧对比文，overview 改链到
puck-grapesjs-comparison；旧 URL 以 aliases 跳转。
修订说明折叠（2026-09-15，Agent：Cursor）：将导航补充收入默认折叠的「修订说明」，主题导航保持可见。模型
grok-4.6，提供方 xAI，执行入口 Cursor Cloud。reasoning effort 未取得运行记录。
2026-09-16 导航补充（Agent：Cursor）：在 Tooling 下增加 Pascal Editor 源码分析入口，指向
docs/Frontend/Tooling/pascal-editor-source-analysis.md，不在 Frontend 根路径另建同 slug 页面。模型grok-4.6，提供方 xAI，执行入口 Cursor Cloud。reasoning effort 未取得独立运行记录。
2026-09-18 导航补充（Agent：Devin）：在 React 下增加滚动收缩玻璃胶囊 Navbar 技术备份，包含完整 React/CSS 实现、稳定裁剪与可交互 Labs 演示。
2026-10-07 结构调整（Agent：Grok）：将「前端面试八股集合网站」并入本页「面试资源」；Puck / GrapesJS 对比文迁至
posts/2026/。
2026-10-08 导航补充（Agent：Codex）：在 React 下增加 BlockNote 研究入口，涵盖产品概念、开发状态、扩展机制、使用方式与同类编辑器选择；补齐本页内容元数据，并保持既有 URL。日期沿用可核验的导航前身首建日期。运行记录：模型
gpt-6.1-sol，reasoning effortultra，执行入口 Codex Desktop，CLI 版本0.162.0-alpha.2（不代表桌面 App 版本），提供方openai。
2026-10-13 导航补充（Agent：Codex）：在 Tooling 下增加 PixiJS 专题，介绍它在网页版游戏中的定位、渲染原理与前端技术栈。运行记录：模型
gpt-6.1-sol，reasoning effortultra，执行入口 Codex Desktop，提供方openai，CLI 版本0.162.0-alpha.17.2（不代表桌面 App 版本）。
主题导航
- 少而精的界面设计资料：官方形态、阅读入口与核心内容：Refactoring UI、Practical Typography、Josh W. Comeau 与 Rauno Freiberg。
- 面向工程师的 UI 设计实践：排版、布局、层叠与交互反馈：从真实内容与布局约束出发，配合原创例子和验收方法。
- 网站设计方法与交付检查清单：从内容结构到交互验收：按 14 项方法安排内容、视觉、交互与可检查的交付结果。
- HeroUI Agents：托管助手与 Generative UI 产品研究：网站桥接、Client Tools、组件目录与自有界面的边界。
- OpenUI：概念、使用方式与 Generative UI 方案比较：从组件契约接入 Renderer，比较 A2UI、AG-UI、json-render 与 MCP Apps。
- React：核心框架专题
- TanStack：TanStack Router / Query / Start
- JavaScript：DOM / BOM / 语法
- TypeScript：类型与工程实践
- CSS：布局、变换与常见技巧
- Node.js：Node 与运行时生态
- Tooling：前端工具链与构建
- Angular：Angular 官方资料速览
- React Native：跨端实践与 Expo / Fabric / Hermes
面试资源
综合题库
| 资源 | 链接 | 适合内容 | 特点 |
|---|---|---|---|
| 前端面试题宝典 | https://codeteenager.github.io/interview/ | HTML/CSS/JS、浏览器、网络、框架等 | 在线阅读体验较好，按知识体系复习，持续整理常见题 |
| fe-interview-questions | https://github.com/chinaBerg/fe-interview-questions | 八股、高质量真题、面经 | GitHub 开源合集，适合按类别查漏补缺与看真实提问 |
| web-interview-1 | https://github.com/lovepli/web-interview-1 | Vue、React、JS、HTTP、工程化、算法 | 覆盖面广，提供在线阅读版本 |
| 前端面试问题汇总 | https://github.com/HuangCongQing/front-end-interview | 多个开源前端面试资源索引 | 适合继续挖掘不同主题的优质仓库 |
八股与手写题
- 前端八股文大全：偏经典基础题，包含防抖、节流等常见主题，适合快速补齐高频知识点。
- xiumubai/coding：八股题与常见手写题解题思路结合，适合从“会背”过渡到“能写、能讲”。
- JavaScript Questions：训练代码执行结果、语言细节和内置 API 理解，适合准备 JS 追问。
- BigFrontend.dev：偏 JavaScript 手写与前端 coding 题，适合补实际编码能力。
真题与面经
- 灵题库：大厂真题与专题训练，覆盖 Promise、作用域、数据类型、React、Vue 等。
- 前端面试题库与面经资源：分类题目、面经、简历与模拟面试相关内容。
- 2026 春招职位与面经合集：投递链接与面经集合，可用于关注近期招聘与面试反馈。
推荐刷题路径
对于全栈与现代工程化方向，除传统 HTML/CSS/JS 外，建议重点准备：
- JavaScript 与浏览器：事件循环、Promise、GC、渲染流程、缓存、跨域、性能指标。
- React 与状态管理：并发渲染、Hooks 闭包问题、渲染优化、SSR/RSC、TanStack Query 缓存与失效策略。
- 工程化：Vite/Rollup、构建产物拆分、依赖预构建、Monorepo、CI/CD、监控与性能优化。
- 边缘与后端架构：Cloudflare Workers 运行时约束、缓存、Queue/Workflow、D1/R2、一致性、幂等、鉴权和限流。
- 项目追问：为 2–3 个真实项目准备“问题—约束—方案—权衡—结果—复盘”的讲述。
推荐组合：前端面试题宝典打基础，web-interview-1 补框架与工程化，BigFrontend 做手写，灵题库和近期面经校准热点。