系统设计题
本文件按题型收录 系统设计题 相关前端面试题索引。 共收录 475 道题（基础 4 / 进阶 26 / 深入 62 / 架构 383）。 每道题都附带完整参考答案与评分维度，点击链接可查看原文。
基础题（4 道）
开发者体验与工程效能（1 道）
部署与 SRE（1 道）
包管理与供应链安全（1 道）
实时与协同（1 道）
进阶题（26 道）
可访问性（a11y）（1 道）
Vue（1 道）
AI 工程化（1 道）
Node.js / BFF（2 道）
开发者体验与工程效能（1 道）
部署与 SRE（2 道）
包管理与供应链安全（1 道）
前端运维与监控（1 道）
系统架构设计（4 道）
- FB-25-SD-A-002 设计一个支持多终端接入的 BFF 层
- FB-25-SD-A-012 设计一个前端实时协同编辑系统的架构
- FB-25-SD-A-013 设计一个前端错误边界与降级渲染体系
- FB-25-SD-A-014 设计一个前端日志与审计系统
数据与状态管理（2 道）
可观测性（2 道）
安全架构（1 道）
国际化（1 道）
可视化与图形（2 道）
前端数据工程（1 道）
招聘（1 道）
低代码（2 道）
深入题（62 道）
JavaScript（2 道）
TypeScript（1 道）
Browser（1 道）
计算机网络（1 道）
Monorepo（3 道）
- FB-11-SD-P-001 如何设计 Monorepo 的模块边界规则？
- FB-11-SD-P-019 如何设计 Monorepo 下的包级权限模型？
- FB-11-SD-P-020 如何设计 Monorepo 的变更影响分析？
CI/CD（5 道）
- FB-12-SD-P-002 如何设计一个完整的前端 CI/CD 平台？
- FB-12-SD-P-018 如何优化大型前端 Monorepo 的 CI/CD 效率？
- FB-12-SD-P-020 如何设计前端私有 npm Registry 与 CI 集成方案？
- FB-12-SD-P-023 如何为大型前端团队设计 CI/CD 自助平台？
- FB-12-SD-P-025 如何设计跨云 CI/CD 架构？
设计系统与组件库（1 道）
跨端技术（1 道）
AI 工程化（8 道）
- FB-18-SD-P-017 如何设计一个前端 RAG 客服系统？
- FB-18-SD-P-018 如何设计一个支持多模态输入的 AI 创作工作台？
- FB-18-SD-P-019 如何设计一个实时协作的 AI 编程助手？
- FB-18-SD-P-054 设计一个支持多模态输入的前端 AI 交互系统
- FB-18-SD-P-055 如何设计一个支持多模型切换的 AI 应用层？
- FB-18-SD-P-056 设计一个支持 Agent 工作流的前端交互框架。
- FB-18-SD-P-057 设计一个 LLM 可观测性方案，前端需要关注哪些指标？
- FB-18-SD-P-058 如何设计 AI Agent 的工作流？
Node.js / BFF（1 道）
开发者体验与工程效能（6 道）
- FB-21-SD-P-017 如何设计一个内部开发者门户（Internal Developer Portal）？核心模块和衡量指标是什么？
- FB-21-SD-P-048 如何设计一个前端工程化度量平台？
- FB-21-SD-P-052 如何设计一个可插拔的前端 CLI 工具？
- FB-21-SD-P-056 如何设计一个前端错误追踪与诊断平台？
- FB-21-SD-P-079 如何设计一个前端运行时性能监控与诊断平台？
- FB-21-SD-P-080 如何设计可在 Storybook 文档中实时格式化示例代码的 Prettier Playground 组件
部署与 SRE（1 道）
包管理与供应链安全（1 道）
前端运维与监控（1 道）
系统架构设计（4 道）
- FB-25-SD-P-001 设计一个低代码/搭建平台的前端架构
- FB-25-SD-P-008 设计一个金融级前端安全收银台架构
- FB-25-SD-P-009 设计一个电商系统的前端状态管理方案，说明如何组织状态。
- FB-25-SD-P-010 如何设计一个可扩展的前端组件库？
微前端（4 道）
- FB-26-SD-P-018 微前端下全局状态应该如何设计？单一 Store 还是各自 Store + 事件同步？
- FB-26-SD-P-019 微前端路由协调的深入问题有哪些？如何解决？
- FB-26-SD-P-020 如果微前端子应用需要共享状态，你会如何设计？
- FB-26-SD-P-021 设计微前端下的路由与导航体系
质量保障（1 道）
数据与状态管理（3 道）
- FB-29-SD-P-001 设计一个支持离线编辑的协同文档应用的数据层。
- FB-29-SD-P-002 如何设计一个大型前端应用的状态管理架构？
- FB-29-SD-P-003 设计一个前端配置化表单状态引擎
可观测性（3 道）
国际化（1 道）
技术战略（3 道）
- FB-39-SD-P-001 请设计一套前端技术选型决策框架。
- FB-39-SD-P-004 请设计一个前端中台的演进路线与治理机制。
- FB-39-SD-P-005 如何为一个快速增长的公司设计可演进的前端架构蓝图？
项目管理（2 道）
招聘（2 道）
技术品牌与布道（1 道）
技术治理与合规（2 道）
低代码（2 道）
行业特化（1 道）
架构题（383 道）
JavaScript（3 道）
TypeScript（4 道）
- FB-02-SD-R-001 如何为大型前端项目设计类型系统架构？
- FB-02-SD-R-002 如何设计类型安全的 API Client？
- FB-02-SD-R-003 如何在企业级应用中合理使用 Decorators？
- FB-02-SD-R-004 TypeScript Compiler API 可以做什么？请设计一个应用场景。
Browser（10 道）
- FB-03-SD-R-001 设计一个大型 SPA 的首屏性能优化体系。
- FB-03-SD-R-002 如何设计浏览器端的安全架构以防御 XSS、CSRF、点击劫持和数据窃取？
- FB-03-SD-R-003 设计一个基于 Service Worker 的前端缓存与离线可用架构。
- FB-03-SD-R-004 针对高交互 Web 应用，如何设计 60fps 动画与输入响应保障方案？
- FB-03-SD-R-005 如何设计跨窗口/跨 Tab 的前端状态同步方案？
- FB-03-SD-R-006 设计一个浏览器端前端监控与可观测性体系。
- FB-03-SD-R-007 如何设计浏览器端资源加载策略以平衡性能与实时性？
- FB-03-SD-R-008 针对微前端架构，浏览器端隔离方案如何设计？
- FB-03-SD-R-009 设计一个浏览器端内存优化与防泄漏方案。
- FB-03-SD-R-010 如何设计一个多环境、多角色的前端权限与安全模型？
计算机网络（2 道）
Web 安全（4 道）
- FB-05-SD-R-001 如何为大型企业级前端应用设计一套完整的安全体系？
- FB-05-SD-R-002 如何设计一个企业级 SSO/OIDC 认证架构？
- FB-05-SD-R-003 如何为大型站点设计和分阶段部署 CSP？
- FB-05-SD-R-004 如何从前端视角设计一个安全的 API Gateway？
HTML/CSS（2 道）
可访问性（a11y）（3 道）
- FB-07-SD-R-001 如何为大型企业级前端制定可访问性治理策略？
- FB-07-SD-R-002 如何设计一个可访问的组件库 / 设计系统？
- FB-07-SD-R-003 面向全球用户的产品的国际化（i18n）与无障碍如何协同设计？
设计模式（2 道）
构建工具（7 道）
- FB-10-SD-R-001 设计一个企业级前端构建体系。
- FB-10-SD-R-002 设计一个前端产物发布与回滚系统。
- FB-10-SD-R-003 设计一个前端组件库/Monorepo 的构建与发布流程。
- FB-10-SD-R-004 设计一个企业级前端构建产物质量门禁体系
- FB-10-SD-R-005 设计一个支持多构建工具统一配置的前端工程平台
- FB-10-SD-R-007 设计一个企业级 Monorepo 构建平台。
- FB-10-SD-R-008 设计一个前端构建产物分析平台
Monorepo（18 道）
- FB-11-SD-R-001 设计一个大型前端 Monorepo 的整体架构。
- FB-11-SD-R-002 如何从 Multirepo 迁移到 Monorepo？
- FB-11-SD-R-003 设计 Monorepo 下的 CI/CD 流水线。
- FB-11-SD-R-004 Monorepo 下如何平衡代码共享与包独立发布？
- FB-11-SD-R-005 设计一个跨团队 Monorepo 的代码所有权与评审策略。
- FB-11-SD-R-006 如何设计 Monorepo 下的渐进式迁移与拆分策略？
- FB-11-SD-R-007 设计一个支持微前端聚合的 Monorepo 架构。
- FB-11-SD-R-008 如何设计 Monorepo 的依赖治理与自动化审计体系？
- FB-11-SD-R-009 设计支持多语言（前端 + Node + Python）的 Monorepo 架构。
- FB-11-SD-R-010 设计一个 Monorepo 下的共享服务与 API 治理方案。
- FB-11-SD-R-011 设计 Monorepo 下的文档站点与开发者门户。
- FB-11-SD-R-012 如何设计一个支持领域驱动设计（DDD）的 Monorepo 分层架构？
- FB-11-SD-R-014 如何设计 Monorepo 下的 release train 发布模式？
- FB-11-SD-R-016 如何设计 Monorepo 的安全供应链体系？
- FB-11-SD-R-017 如何设计 Monorepo 的构建可观测性体系？
- FB-11-SD-R-019 如何设计 Monorepo 下的 AI Coding 辅助策略？
- FB-11-SD-R-020 如何制定 Monorepo 的长期演进路线图？
- FB-11-SD-R-021 设计一个企业级 Monorepo 治理方案
CI/CD（19 道）
- FB-12-SD-R-001 如何设计基于 GitOps 的前端持续交付系统？
- FB-12-SD-R-002 如何设计零停机全球前端部署方案？
- FB-12-SD-R-003 如何为微前端（Micro-Frontend）设计 CI/CD 流水线？
- FB-12-SD-R-005 如何设计企业级前端制品管理与发布火车？
- FB-12-SD-R-007 如何设计支持多租户、多区域的前端 CI/CD 平台？
- FB-12-SD-R-008 如何在 CI/CD 中落地 DevSecOps？
- FB-12-SD-R-009 如何设计发布编排系统，实现自动灰度、观测与回滚？
- FB-12-SD-R-010 如何设计前端制品的不可变性与全链路可追溯架构？
- FB-12-SD-R-011 如何进行企业级 CI/CD 治理，实现模板化与度量驱动？
- FB-12-SD-R-012 如何设计面向 Serverless 与边缘计算的 CI/CD 架构？
- FB-12-SD-R-013 大型 Monorepo 下如何协调 CI/CD、发布火车与版本兼容？
- FB-12-SD-R-014 如何设计 CI/CD 系统的灾难恢复与业务连续性方案？
- FB-12-SD-R-016 如何设计面向 AIOps 的智能 CI/CD 平台？
- FB-12-SD-R-018 如何设计前端制品的零信任安全架构？
- FB-12-SD-R-019 如何构建企业级 CI/CD 平台度量体系？
- FB-12-SD-R-021 如何设计 CI/CD 中的混沌工程实践？
- FB-12-SD-R-022 如何设计前端全链路可观测与发布联动？
- FB-12-SD-R-024 如何设计下一代云原生前端交付平台？
- FB-12-SD-R-025 设计一个多环境、多地域的部署平台
代码质量与测试（20 道）
- FB-13-SD-R-001 如何为大型前端项目设计一套完整的测试策略？
- FB-13-SD-R-002 Monorepo 中的测试策略与单仓库有什么不同？
- FB-13-SD-R-003 如何建立一个可观测的前端质量度量体系？
- FB-13-SD-R-004 如何理解测试金字塔与 Testing Trophy？前端应该如何取舍？
- FB-13-SD-R-005 微前端架构下如何做好测试？
- FB-13-SD-R-006 如何为大型前端项目设计分层测试架构？
- FB-13-SD-R-007 如何评估并提升团队测试成熟度？
- FB-13-SD-R-008 如何设计前端“测试即文档”体系？
- FB-13-SD-R-009 如何在大型组织中建立共享测试服务与平台？
- FB-13-SD-R-010 如何设计前端混沌测试与故障演练方案？
- FB-13-SD-R-011 AI 辅助编码下，前端测试策略应如何演进？
- FB-13-SD-R-012 如何为前端组件库设计测试策略？
- FB-13-SD-R-013 跨团队前端项目如何统一质量标准与门禁？
- FB-13-SD-R-014 如何为大型前端项目设计自动化回归测试体系？
- FB-13-SD-R-015 如何设计前端测试数据管理体系？
- FB-13-SD-R-016 如何在前端落地契约测试与 API 版本治理？
- FB-13-SD-R-017 如何设计前端灰度发布与线上质量验证机制？
- FB-13-SD-R-018 如何设计前端全链路可观测的质量保障体系？
- FB-13-SD-R-019 如何为前端低代码平台设计测试策略？
- FB-13-SD-R-032 设计一个前端质量保障平台
设计系统与组件库（17 道）
- FB-14-SD-R-001 如何设计一个跨框架（React/Vue/Svelte）的组件库？
- FB-14-SD-R-002 如何设计一套 DesignOps 与设计系统平台？
- FB-14-SD-R-003 如何建设组件库的文档与开发者生态？
- FB-14-SD-R-004 如何构建组件库的视觉回归测试体系？
- FB-14-SD-R-005 如何设计支持多品牌的设计系统主题架构？
- FB-14-SD-R-006 如何治理与度量大型组件库的健康度？
- FB-14-SD-R-007 如何保障设计与研发实现的一致性？
- FB-14-SD-R-008 如何构建组件库的可访问性工程化体系？
- FB-14-SD-R-009 如何设计一个企业级设计系统平台（Design System Platform）？
- FB-14-SD-R-010 如何构建跨团队的组件库贡献与 Review 流程？
- FB-14-SD-R-011 如何设计支持 AI 辅助的组件库生成与维护流程？
- FB-14-SD-R-012 如何设计组件库的长期演进与 Deprecation 战略？
- FB-14-SD-R-013 如何保障组件库在微前端架构下的样式与行为隔离？
- FB-14-SD-R-014 如何设计一套组件库的语义化版本自动化与变更管理？
- FB-14-SD-R-015 如何设计组件库的 CI/CD 与发布流水线？
- FB-14-SD-R-016 如何构建组件库的开发者体验（DX）？
- FB-14-SD-R-017 如何设计组件库的暗色/浅色主题自动切换？
React（21 道）
- FB-15-SD-R-027 大型 React 项目中如何选择状态管理方案？
- FB-15-SD-R-028 如何系统地对 React 应用做性能优化？
- FB-15-SD-R-029 微前端架构下使用 React 有哪些关键考虑点？
- FB-15-SD-R-030 如何设计一个高质量的 React 组件库？
- FB-15-SD-R-057 如何设计一个大型 React 前端工程体系？
- FB-15-SD-R-058 如何设计一个 React SSR/SSG 架构？
- FB-15-SD-R-059 React 应用如何与微服务后端集成？
- FB-15-SD-R-060 大型 React 项目的路由设计应注意什么？
- FB-15-SD-R-061 如何设计 React 组件库的 Monorepo 架构？
- FB-15-SD-R-062 React 项目中 TypeScript 架构规范应如何制定？
- FB-15-SD-R-063 如何设计一个基于 React 的 AI 应用前端架构？
- FB-15-SD-R-064 React 跨平台方案如何选型？
- FB-15-SD-R-065 React 项目的可观测性体系如何设计？
- FB-15-SD-R-066 设计一个 React 状态管理方案
- FB-15-SD-R-067 如何设计 React 应用的性能监控体系？
- FB-15-SD-R-068 设计一个 React 组件的低代码平台
- FB-15-SD-R-069 React 项目如何进行微前端改造？
- FB-15-SD-R-070 如何设计 React SSR 的缓存策略？
- FB-15-SD-R-071 React 组件库如何支持多框架？
- FB-15-SD-R-072 如何设计 React 应用的安全体系？
- FB-15-SD-R-073 React 项目如何做国际化架构？
Vue（23 道）
- FB-16-SD-R-026 如何设计一个大型的 Vue 前端应用架构？
- FB-16-SD-R-027 如何设计一个高质量的 Vue 组件库？
- FB-16-SD-R-028 微前端架构下使用 Vue 有哪些关键考虑点？
- FB-16-SD-R-029 Vue 2 项目如何迁移到 Vue 3？
- FB-16-SD-R-030 Vue 配合 TypeScript 有哪些最佳实践和挑战？
- FB-16-SD-R-031 如何基于 Vue 设计一个低代码表单引擎？
- FB-16-SD-R-032 如何设计 Vue 中后台管理系统的模块架构？
- FB-16-SD-R-033 Vue 应用全球化（i18n）架构如何设计？
- FB-16-SD-R-034 Vue 前端监控与错误追踪体系如何建设？
- FB-16-SD-R-035 Vue 3 + TypeScript + Monorepo 企业级工程架构如何设计？
- FB-16-SD-R-036 Vue 项目 CI/CD 与自动化发布流程如何设计？
- FB-16-SD-R-037 如何基于 Vue 设计一个可扩展的插件系统？
- FB-16-SD-R-038 Vue 服务端渲染（SSR）架构如何设计？
- FB-16-SD-R-039 Vue 中实现设计系统与主题定制的架构方案是什么？
- FB-16-SD-R-040 Vue 应用从 0 到 1 的技术选型与演进路线如何规划？
- FB-16-SD-R-041 Vue 设计系统与组件库架构
- FB-16-SD-R-042 Vue 应用性能监控体系
- FB-16-SD-R-043 Vue 微前端改造方案
- FB-16-SD-R-044 Vue SSR 缓存策略
- FB-16-SD-R-045 Vue 应用安全架构
- FB-16-SD-R-046 Vue 低代码平台设计
- FB-16-SD-R-047 Vue 组件库跨框架支持
- FB-16-SD-R-048 Vue 项目国际化架构
跨端技术（21 道）
- FB-17-SD-R-024 如何设计一个大型跨端应用的架构？
- FB-17-SD-R-025 跨端应用的数据层和状态共享如何设计？
- FB-17-SD-R-026 如何设计一个跨端组件库？
- FB-17-SD-R-027 跨端应用的性能监控和错误处理如何设计？
- FB-17-SD-R-028 跨端应用的 CI/CD 和热更新策略如何设计？
- FB-17-SD-R-029 如何将一个原生或 H5 项目迁移到跨端框架？
- FB-17-SD-R-030 设计一个从 URL 到小程序/H5/App 任意页面打开的通用跳转系统。
- FB-17-SD-R-057 如何设计跨端微前端架构？
- FB-17-SD-R-058 如何构建跨端统一设计系统？
- FB-17-SD-R-059 如何设计跨端应用的灰度发布和热更新平台？
- FB-17-SD-R-060 如何设计跨端应用的监控告警体系？
- FB-17-SD-R-061 跨端技术选型应该建立怎样的决策框架？
- FB-17-SD-R-062 跨端应用的国际化与本地化架构如何设计？
- FB-17-SD-R-063 跨端应用如何与原生应用形成混合架构？
- FB-17-SD-R-064 跨端应用如何建立性能度量体系和性能基线？
- FB-17-SD-R-065 跨端应用的长期演进和技术债务如何治理？
- FB-17-SD-R-066 跨端应用安全架构
- FB-17-SD-R-067 跨端应用 CI/CD 与热更新
- FB-17-SD-R-068 跨端应用性能度量体系
- FB-17-SD-R-069 跨端应用与原生应用混合架构
- FB-17-SD-R-070 跨端技术长期演进规划
AI 工程化（9 道）
- FB-18-SD-R-025 如何设计一个前端 AI Copilot 的架构？
- FB-18-SD-R-026 如何设计一个企业级 AI 中台？
- FB-18-SD-R-031 如何设计一个多租户 AI SaaS 平台？
- FB-18-SD-R-032 如何设计一个前端智能体的插件化生态？
- FB-18-SD-R-033 如何设计一个多模态 AI 中台？
- FB-18-SD-R-034 如何设计一个面向金融行业的可信 AI 前端架构？
- FB-18-SD-R-035 设计一个企业级 AI Agent 平台
- FB-18-SD-R-060 设计一个低延迟实时 AI 协作编辑器前端
- FB-18-SD-R-066 设计一个可插拔的多模型适配层
Node.js / BFF（20 道）
- FB-19-SD-R-024 如何设计一个高并发、高可用的 BFF 网关？
- FB-19-SD-R-025 如何设计一个基于 Node.js 的微服务架构？
- FB-19-SD-R-026 Serverless / Edge 场景下，BFF 应该如何设计？
- FB-19-SD-R-027 如何为 Node.js 服务设计一套完整的可观测性体系？
- FB-19-SD-R-028 BFF 如何进行分层与领域聚合设计？
- FB-19-SD-R-029 Deno、Bun 与 Node.js 相比各有什么优劣？如何选型？
- FB-19-SD-R-057 如何设计一个多租户、可水平扩展的 BFF 平台？
- FB-19-SD-R-058 如何为 Node.js BFF 设计完整的可观测性体系？
- FB-19-SD-R-059 如何为 BFF 设计统一的 API 版本治理与兼容性策略？
- FB-19-SD-R-060 如何设计一个支持多端（Web/H5/小程序/App）的 BFF 数据聚合网关？
- FB-19-SD-R-061 Node.js 服务在 Kubernetes 中如何做到优雅关闭、弹性伸缩与成本优化？
- FB-19-SD-R-062 如何设计基于事件驱动与 CQRS 的 BFF 数据同步架构？
- FB-19-SD-R-063 BFF 层如何与 API 网关、Service Mesh、鉴权中心协同工作？
- FB-19-SD-R-064 设计一个支持 Serverless / Edge 部署的 BFF 框架需要考虑哪些因素？
- FB-19-SD-R-065 单体 BFF 如何演进为领域驱动的微前端 + 微服务协同架构？
- FB-19-SD-R-066 设计一个多租户 BFF 平台
- FB-19-SD-R-067 Node.js 服务可观测性体系
- FB-19-SD-R-068 BFF 与 Service Mesh 协同
- FB-19-SD-R-069 Node.js 服务容器化与 CI/CD
- FB-19-SD-R-070 BFF 领域驱动设计
Git 工作流与变更管理（8 道）
- FB-20-SD-R-025 如何为千人规模的前端团队设计 Git 分支策略？
- FB-20-SD-R-026 Monorepo 和 Polyrepo 如何选型？
- FB-20-SD-R-028 如何治理大规模 Git 仓库的性能和可维护性？
- FB-20-SD-R-058 如何为全球多地域团队设计 Git 工作流？
- FB-20-SD-R-060 多产品线的统一代码仓应该如何治理？
- FB-20-SD-R-063 微前端仓库应该如何拆分或统一管理？
- FB-20-SD-R-067 如何为全球多地域团队设计 Git 工作流？
- FB-20-SD-R-068 多产品线的统一代码仓应该如何治理？
开发者体验与工程效能（13 道）
- FB-21-SD-R-024 为百人前端团队设计一个平台工程（Platform Engineering）体系，关键能力、组织形式和度量指标是什么？
- FB-21-SD-R-025 如何设计一套可扩展的脚手架生态，支持多业务线、多技术栈？
- FB-21-SD-R-027 设计一个 Monorepo 构建缓存和分布式任务调度方案（remote cache + task graph）。
- FB-21-SD-R-029 设计一个前端组件/文档/示例一体化的内部工具链。
- FB-21-SD-R-057 如何设计一个支持多云部署的前端发布平台？
- FB-21-SD-R-059 如何设计一个前端资产（组件/页面）复用平台？
- FB-21-SD-R-061 如何设计一个前端研发效能数据中台？
- FB-21-SD-R-063 如何设计一个低代码搭建平台的开发者体验？
- FB-21-SD-R-065 如何设计一个全球化的前端研发协同平台？
- FB-21-SD-R-085 设计一个面向多 BU 的前端研效中台，核心模块和运营策略是什么？
- FB-21-SD-R-087 设计一个支持 A/B 实验和灰度发布的前端发布与回滚平台。
- FB-21-SD-R-089 设计一个前端工程化的“即服务”（DXaaS）平台。
- FB-21-SD-R-090 设计一个面向大型前端 Monorepo 的 Storybook 文档系统
部署与 SRE（7 道）
- FB-22-SD-R-025 设计一个高可用的前端部署平台
- FB-22-SD-R-026 设计全球化多区域部署架构
- FB-22-SD-R-027 设计零停机前端发布架构
- FB-22-SD-R-029 前端灾备与多活架构设计
- FB-22-SD-R-031 SSR/SSG/CDN 混合部署架构
- FB-22-SD-R-032 如何设计一个支持多区域部署的 SSG 前端系统，兼顾数据合规与访问延迟？
- FB-22-SD-R-033 如何设计支持多区域部署的 SSG 前端系统？
包管理与供应链安全（7 道）
- FB-23-SD-R-024 如何设计企业级前端依赖治理体系？
- FB-23-SD-R-025 如何设计前端供应链安全防御体系？
- FB-23-SD-R-027 如何设计 lockfile 安全审计与自动化修复平台？
- FB-23-SD-R-030 如何设计前端构建产物的 SBOM 与可追溯体系？
- FB-23-SD-R-031 设计一个企业级前端依赖管理平台
- FB-23-SD-R-032 设计一个企业级前端依赖管理平台
- FB-23-SD-R-033 大型 Monorepo 中 install 性能优化
前端运维与监控（4 道）
- FB-24-SD-R-001 如何设计前端 on-call 与告警升级系统？
- FB-24-SD-R-003 如何设计全球化的前端可观测性与成本优化架构？
- FB-24-SD-R-004 如何设计多 CDN 监控与自动切换？
- FB-24-SD-R-006 如何设计从前端到后端的全链路 Trace？
系统架构设计（10 道）
- FB-25-SD-R-001 设计一个组织级前端架构治理体系
- FB-25-SD-R-007 设计一个跨团队共享的前端能力平台
- FB-25-SD-R-008 设计一个全球化多端统一前端架构
- FB-25-SD-R-009 设计一个前端智能化研发平台架构
- FB-25-SD-R-010 设计一个高可用的大促前端保障体系
- FB-25-SD-R-011 假设你要从零设计一个日活千万级的内容社区前端架构，你会关注哪些关键点？
- FB-25-SD-R-012 你如何评价一个前端架构设计的好坏？
- FB-25-SD-R-013 设计一个支持多终端的 BFF 层
- FB-25-SD-R-014 设计一个前端组件库/设计系统架构
- FB-25-SD-R-015 设计一个前端性能监控与预警平台
微前端（6 道）
- FB-26-SD-R-024 从巨石应用迁移到微前端的策略和步骤是什么？
- FB-26-SD-R-025 设计一个企业级微前端平台，需要包含哪些核心模块？
- FB-26-SD-R-026 设计一个支持 10 个团队同时开发的微前端平台，你会做哪些关键决策？
- FB-26-SD-R-027 设计一个企业级微前端基座
- FB-26-SD-R-028 设计一个支持离线能力的微前端应用
- FB-26-SD-R-029 设计一个无基座的去中心化微前端方案
性能工程（5 道）
- FB-27-SD-R-001 如何设计一个前端性能监控与告警系统？
- FB-27-SD-R-002 如何设计性能预算（Performance Budget）和 CI 门禁系统？
- FB-27-SD-R-003 如何为大型前端项目建立性能基线（Performance Baseline）？
- FB-27-SD-R-006 如何设计一个前端性能可视化大盘（Performance Dashboard）？
- FB-27-SD-R-007 设计一个面向百万级 DAU 的内容平台的性能优化体系。
质量保障（6 道）
- FB-28-SD-R-025 如何为一家中型互联网公司设计前端质量保障体系？
- FB-28-SD-R-026 微前端或 Monorepo 场景下如何制定测试策略？
- FB-28-SD-R-028 如何架构大规模 E2E 测试的并行与稳定性？
- FB-28-SD-R-031 如何设计一套生产环境发布策略？
- FB-28-SD-R-032 如何构建韧性工程质量体系？
- FB-28-SD-R-033 设计一个前端质量保障平台，你会包含哪些模块？
数据与状态管理（7 道）
- FB-29-SD-R-025 如何设计一个前端数据层抽象层，支持多数据源切换和缓存？
- FB-29-SD-R-026 如何为大型 SPA 设计状态管理架构？
- FB-29-SD-R-030 设计一个支持离线优先的协作编辑状态同步系统
- FB-29-SD-R-031 如何设计前端 URL 状态管理方案？
- FB-29-SD-R-032 设计一个前端数据同步与状态管理方案
- FB-29-SD-R-033 设计一个支持 Undo/Redo 的前端状态系统
- FB-29-SD-R-034 设计一个跨页面共享的状态层
可观测性（5 道）
- FB-30-SD-R-025 设计一个前端 RUM 指标体系与 Dashboard
- FB-30-SD-R-026 如何从零构建前端 SRE 值班（on-call）与事故响应机制？
- FB-30-SD-R-028 设计一个支持多租户、多环境的前端埋点与可观测中台
- FB-30-SD-R-031 设计一个前端灰度发布/回滚的可观测性方案
- FB-30-SD-R-032 设计前端全链路可观测平台
安全架构（3 道）
实时与协同（8 道）
- FB-32-SD-R-001 如何设计一个实时协同文档系统？
- FB-32-SD-R-002 如何设计一个实时聊天系统？
- FB-32-SD-R-003 如何设计一个实时视频会议系统？
- FB-32-SD-R-004 实时系统与离线同步如何结合？
- FB-32-SD-R-005 如何设计一个实时协同白板？
- FB-32-SD-R-006 实时系统的监控与降级策略如何设计？
- FB-32-SD-R-007 设计一个实时协作白板
- FB-32-SD-R-008 设计一个实时数据可视化大屏
国际化（5 道）
- FB-33-SD-R-001 如何设计全球化前端架构？
- FB-33-SD-R-002 如何设计一条翻译流水线？
- FB-33-SD-R-003 如何设计国际化组件库？
- FB-33-SD-R-004 多语言内容管理系统（CMS）如何设计？
- FB-33-SD-R-005 设计一个可扩展的国际化架构
可视化与图形（5 道）
- FB-34-SD-R-024 设计一个 BI 可视化平台的前端架构
- FB-34-SD-R-025 设计一个 3D 数字孪生大屏的渲染架构
- FB-34-SD-R-026 如何设计一个可扩展的可视化组件库？
- FB-34-SD-R-028 游戏图形中的场景图、ECS、渲染循环、LOD 对前端可视化架构有何启发？
- FB-34-SD-R-029 设计一个可视化搭建平台
Serverless/Edge（5 道）
- FB-35-SD-R-001 如何设计一个 Serverless 前端架构？
- FB-35-SD-R-002 如何设计一个 Edge 网关？
- FB-35-SD-R-003 Serverless 与容器/传统服务器如何取舍？
- FB-35-SD-R-004 如何设计边缘与中心协同架构？
- FB-35-SD-R-006 设计一个 Serverless 前端部署架构
前端数据工程（6 道）
- FB-36-SD-R-001 如何设计一个前端数据平台？
- FB-36-SD-R-002 如何设计一个埋点与采集系统？
- FB-36-SD-R-003 如何设计一个用户行为分析系统？
- FB-36-SD-R-004 如何设计一个 A/B 实验平台？
- FB-36-SD-R-005 如何设计一个数据质量监控体系？
- FB-36-SD-R-006 如何设计一个实时数据看板？
业务洞察（4 道）
- FB-37-SD-R-001 如何设计一个可支撑多业务线（B2B、B2C、SaaS）的前端商业化中台架构？
- FB-37-SD-R-002 设计一套前端埋点与业务指标度量体系，覆盖 GMV、ARPU、LTV、CAC 等核心指标。
- FB-37-SD-R-004 设计一个支持快速试错与灰度发布的增长实验工程平台。
- FB-37-SD-R-006 设计一个面向 SaaS 产品的多租户、可配置、可定价的前端交付架构。
团队领导力（4 道）
- FB-38-SD-R-001 为一家 500 人前端组织设计分层技术治理与团队架构
- FB-38-SD-R-005 设计一个面向全球远程团队的技术文化与协作基础设施蓝图
- FB-38-SD-R-006 如何设计一个支撑多业务线、多地域的前端组织架构？
- FB-38-SD-R-007 如何从 0 到 1 搭建一个高绩效前端团队？
技术战略（3 道）
- FB-39-SD-R-001 请设计一个 3 年前端技术战略，支撑业务从 0 到 100 的规模化增长。
- FB-39-SD-R-003 如何设计 AI 时代的前端技术战略？
- FB-39-SD-R-004 如何在技术战略层面规划前端与 AI、WebAssembly、边缘计算等新兴技术的结合？
沟通表达（5 道）
- FB-40-SD-R-002 设计一个技术方案评审与决策流程
- FB-40-SD-R-004 设计一套危机沟通预案
- FB-40-SD-R-007 设计一个跨部门重大技术项目的治理与沟通框架
- FB-40-SD-R-008 作为技术负责人，你如何处理与公司其他高管的分歧？
- FB-40-SD-R-009 如何在组织内建立前端团队的“话语权”？
项目管理（2 道）
招聘（3 道）
- FB-42-SD-R-025 如何设计一个企业级招聘中台？
- FB-42-SD-R-027 如何设计全球化/远程团队的人才招聘体系？
- FB-42-SD-R-029 如何设计 AI 辅助招聘系统？需要注意哪些伦理问题？
技术品牌与布道（2 道）
技术治理与合规（5 道）
- FB-44-SD-R-001 设计一个企业级前端合规体系。
- FB-44-SD-R-002 如何设计跨团队技术治理组织与运作机制？
- FB-44-SD-R-003 设计一个前端安全合规左移体系。
- FB-44-SD-R-004 如何在一个大型组织中推行统一的前端工程化标准？
- FB-44-SD-R-005 如何设计前端技术治理的度量指标体系？
小程序（3 道）
- FB-45-SD-R-001 如何设计一个跨端小程序框架（如 Taro / UniApp 的思路）？
- FB-45-SD-R-003 如何构建小程序的监控、埋点与灰度发布体系？
- FB-45-SD-R-007 如何设计一个多平台小程序容器架构？
鸿蒙 ArkTS / HarmonyOS（5 道）
- FB-46-SD-R-025 如何设计一个鸿蒙多端协同的阅读应用？
- FB-46-SD-R-026 一个鸿蒙应用从 0 到 1，你会如何做技术选型？
- FB-46-SD-R-027 如何设计鸿蒙卡片与原子化服务的整体架构？
- FB-46-SD-R-028 将现有跨平台应用迁移到鸿蒙，你会如何制定策略？
- FB-46-SD-R-031 设计一个面向企业内部的鸿蒙办公协同平台架构。
Flutter（6 道）
- FB-47-SD-R-001 如何设计一个可维护、可扩展的 Flutter 大型应用架构？
- FB-47-SD-R-003 Flutter 国际化（i18n）和无障碍（a11y）应该如何架构？
- FB-47-SD-R-006 Flutter 大规模应用中，状态管理应该如何分层与治理？
- FB-47-SD-R-007 如何开发一个 Flutter 插件？Federated Plugin 和 PlatformView 分别解决什么问题？
- FB-47-SD-R-008 Flutter 混合开发（与原生项目集成）有哪些方案？
- FB-47-SD-R-009 Flutter Web 的性能优化和适配有哪些要点？
Electron（3 道）
- FB-48-SD-R-001 如何设计一个大型 Electron 桌面应用的整体架构？
- FB-48-SD-R-002 如何设计一个安全的 Electron 应用架构？
- FB-48-SD-R-003 如何设计 Electron 的自动更新与灰度分发策略？
WebAssembly（1 道）
WebGPU / 图形学（2 道）
多媒体（Multimedia）（5 道）
- FB-51-SD-R-025 设计一个支持 HLS/DASH/WebRTC 的多协议播放器架构
- FB-51-SD-R-026 设计一个低延迟直播系统的前端方案
- FB-51-SD-R-027 设计一个浏览器端音视频剪辑工具的技术架构
- FB-51-SD-R-029 设计一个支持 DRM 的商业视频播放器安全架构
- FB-51-SD-R-030 如何评估和监控一个多媒体前端平台的质量？
低代码（5 道）
- FB-52-SD-R-001 如何设计一个企业级低代码平台的整体架构？
- FB-52-SD-R-002 低代码平台如何与企业现有业务系统集成？
- FB-52-SD-R-003 如何建立低代码平台的平台化治理体系？
- FB-52-SD-R-005 如何设计 AI 辅助搭建能力？
- FB-52-SD-R-007 如何设计低代码平台的扩展性与插件化架构？
计算机基础（7 道）
- FB-53-SD-R-001 如何设计一个短链服务？
- FB-53-SD-R-002 从系统架构角度如何设计一个秒杀系统？
- FB-53-SD-R-003 如何设计一个实时排行榜？
- FB-53-SD-R-004 高并发下的限流与降级策略如何设计？
- FB-53-SD-R-005 分布式一致性基础有哪些？
- FB-53-SD-R-007 设计一个前端缓存策略系统。
- FB-53-SD-R-008 前端如何实现一个简单的前端框架（类 React/Vue）？