STAGE 01 · 90 MINUTES
第一阶段：全景认知｜装模做样
先不钻源码，也不堆名词。用一条完整调用链把 2027 AI 前端 / 全栈版图装进脑子，做到听得懂、分得清、说得出。
完成标准：能脱离页面画出六层蓝图，并用两分钟讲清一次 AI 请求。
0%0 / 5 段
PART 01 · 0–10 分钟
先记住一张全景图
先建立位置感：每个名词都应该能放回这条链路。
先背下这 6 句话
- TypeScript 管编译期，Schema 才能检查运行时输入。
- BFF 负责客户端专属边界，不是把所有后端代码塞进 Nuxt。
- 模型流式输出通常优先 SSE；需要真正双向实时通信时才选 WebSocket。
- RAG 补知识，Tool Calling 做动作，Workflow 管流程，Agent 决定下一步，MCP 统一连接方式。
- 模型输出默认不可信；权限、校验、审批和幂等必须由代码负责。
- Eval 定义系统好不好，Trace 解释它为什么好或为什么坏。
PART 02 · 10–35 分钟
六层问题地图
学习技术的正确入口不是“它是什么”，而是“没有它会出什么问题”。
前端体验层
- 它在防什么
- 复杂交互、首屏、状态混乱和用户不知道系统正在做什么。
- 常用方案
- Vue 3、Nuxt、SSR、Hydration、状态机、性能与无障碍
- 前端类比
- 像控制台和仪表盘：不仅显示结果，还要让过程可见、可取消、可恢复。
“AI 前端的难点不是聊天气泡，而是把不确定的长任务变成可理解、可控制的状态。”
接口边界层
- 它在防什么
- 浏览器不能持有模型密钥，也不能相信任意服务端数据。
- 常用方案
- Nuxt BFF、会话、运行时 Schema、SSE、AbortSignal
- 前端类比
- 像前端熟悉的适配层，把多个不稳定接口整理成页面需要的稳定合同。
“BFF 隐藏供应商细节并承接客户端契约，但核心领域规则仍应留在独立服务。”
业务服务层
- 它在防什么
- 权限、订单、工单和审批规则不能交给模型自由发挥。
- 常用方案
- Node.js、NestJS、领域服务、RBAC/ABAC、事务、幂等
- 前端类比
- 像把组件逻辑抽成领域层，但这里的错误会改变真实业务数据。
“模型负责建议，确定性的业务规则和副作用由服务端执行并审计。”
数据设施层
- 它在防什么
- 事实、热点状态、大文件和耗时任务有不同生命周期。
- 常用方案
- PostgreSQL、Redis、队列、对象存储、pgvector
- 前端类比
- 不是一个全局 Store 包打天下，而是按状态性质选择不同容器。
“PostgreSQL 存事实，Redis 管短期热点，队列解耦长任务，对象存储承载文件。”
AI 能力层
- 它在防什么
- 模型缺少私有知识、不能直接执行动作，输出还带有随机性。
- 常用方案
- Model Gateway、Structured Output、RAG、Tool Calling、Workflow、Agent、MCP
- 前端类比
- 模型像能力很强但需要明确合同和权限边界的外部协作者。
“先用最确定的方案，只有步骤无法预定义时才扩大 Agent 的决策空间。”
生产保障层
- 它在防什么
- Demo 能回答，不代表质量稳定、权限安全、成本可控。
- 常用方案
- Eval、OpenTelemetry、Prompt Injection 防护、限流、预算、降级与恢复
- 前端类比
- 相当于前端监控、自动化测试和发布门禁，但还要评估非确定性输出。
“没有评测只能凭感觉调 Prompt，没有 Trace 就无法解释一次回答为何失败。”
PART 03 · 35–60 分钟
核心概念印象卡
先读一句话印象，再展开看边界。重点是不要把相近概念混为一谈。
01TypeScript + Schema
一个保护写代码时，一个保护程序运行时。
+
TypeScript + Schema
一个保护写代码时，一个保护程序运行时。
- 解决什么问题
- 外部 JSON、模型输出和用户输入不会因为写了 TS 类型就自动可信。
- 什么时候用
- 跨网络、读数据库、接模型输出时使用 Zod、Valibot 或 JSON Schema 校验。
- 常见误区
- 把 interface 当成运行时验证器。
- 一句谈资
- “类型在编译后会消失，所以系统边界必须再做一次运行时校验。”
02SSR + Hydration
服务端先出 HTML，浏览器再接管交互。
+
SSR + Hydration
服务端先出 HTML，浏览器再接管交互。
- 解决什么问题
- 改善首屏和 SEO，同时保留客户端交互。
- 什么时候用
- 内容首屏重要、需要搜索收录或希望减少白屏时。
- 常见误区
- SSR 等于所有代码只在服务器运行。
- 一句谈资
- “Hydration 要求服务端与客户端首次渲染一致，时间、随机数和浏览器 API 都可能造成 mismatch。”
03BFF
专门服务某一类前端的后端边界。
+
BFF
专门服务某一类前端的后端边界。
- 解决什么问题
- 隐藏密钥、聚合接口、统一会话并适配页面所需数据。
- 什么时候用
- 浏览器需要调用模型、多服务聚合或服务端会话时。
- 常见误区
- 把全部领域逻辑都写进 Server Route。
- 一句谈资
- “小系统可用 Nitro 直接交付，业务复杂后把领域服务拆到 NestJS。”
04SSE / WebSocket
SSE 擅长服务端单向流，WebSocket 擅长持续双向通信。
+
SSE / WebSocket
SSE 擅长服务端单向流，WebSocket 擅长持续双向通信。
- 解决什么问题
- 让用户尽早看到生成过程，并支持进度、工具和错误事件。
- 什么时候用
- 模型生成优先 SSE；协同编辑、游戏和双向高频消息才考虑 WebSocket。
- 常见误区
- 只要实时就必须 WebSocket。
- 一句谈资
- “AI 流式 UI 不只是拼文本，还要处理取消、断线、去重和多类型事件。”
05PostgreSQL / Redis / Queue
事实、热点和长任务分别管理。
+
PostgreSQL / Redis / Queue
事实、热点和长任务分别管理。
- 解决什么问题
- 避免把不同一致性和生命周期的数据塞进同一工具。
- 什么时候用
- 关系事实用 PostgreSQL，短期缓存/限流用 Redis，耗时工作交给队列。
- 常见误区
- Redis 更快，所以什么都存 Redis。
- 一句谈资
- “选存储先问状态能否丢、要保存多久、是否需要事务和查询。”
06Token / Context
模型读取和生成的计量单位与工作记忆。
+
Token / Context
模型读取和生成的计量单位与工作记忆。
- 解决什么问题
- 上下文有上限，并直接影响成本、延迟和注意力。
- 什么时候用
- 设计会话裁剪、检索、摘要、费用预算时。
- 常见误区
- 上下文越长，回答一定越好。
- 一句谈资
- “上下文管理的目标不是塞满窗口，而是把最相关、可信的信息放进去。”
07Structured Output
要求模型按 Schema 返回可验证结构。
+
Structured Output
要求模型按 Schema 返回可验证结构。
- 解决什么问题
- 自然语言难以稳定进入程序分支或写入业务数据。
- 什么时候用
- 分类、抽取、表单生成和工具参数。
- 常见误区
- 能解析成 JSON 就代表内容正确。
- 一句谈资
- “结构化输出解决格式稳定性，业务正确性仍需校验、重试和人工确认。”
08Embedding + RAG
先检索相关资料，再让模型依据资料回答。
+
Embedding + RAG
先检索相关资料，再让模型依据资料回答。
- 解决什么问题
- 模型不知道企业私有知识和刚更新的事实。
- 什么时候用
- 知识经常变化、需要引用或不能靠重新训练更新时。
- 常见误区
- 向量库装好后回答自然准确。
- 一句谈资
- “生产 RAG 的核心是权限、混合检索、重排、引用和评测，不是一次向量搜索。”
09Tool / Workflow / Agent / MCP
动作、流程、动态决策和连接协议是四个不同层次。
+
Tool / Workflow / Agent / MCP
动作、流程、动态决策和连接协议是四个不同层次。
- 解决什么问题
- 让模型在受控边界内使用外部能力。
- 什么时候用
- 有限动作选 Tool，固定步骤选 Workflow，开放探索才选 Agent，多客户端复用连接才选 MCP。
- 常见误区
- 用了 Tool Calling 就已经是 Agent。
- 一句谈资
- “模型只提出调用意图，服务端仍要校验身份、权限、预算、参数和幂等键。”
10Eval + Trace + Guardrails
分别回答好不好、为什么、安全边界是否守住。
+
Eval + Trace + Guardrails
分别回答好不好、为什么、安全边界是否守住。
- 解决什么问题
- AI 输出非确定，传统通过/失败测试不足以覆盖质量。
- 什么时候用
- 上线门禁、模型切换、Prompt 变更、故障定位和安全验证。
- 常见误区
- 人工试几次感觉不错就能上线。
- 一句谈资
- “评测集提供可重复基线，Trace 串起检索、模型、工具、成本和延迟。”
PART 04 · 60–80 分钟
选型口诀与谈资
面试中的“懂”不是背定义，而是面对问题能选最小、最稳的方案。
| 遇到的问题 | 优先选择 | 先别急着 | 理由 |
|---|---|---|---|
| 回答企业私有或最新知识 | RAG | 先微调模型 | 知识可更新、可授权、可引用 |
| 稳定输出分类、字段或参数 | Structured Output | 从自然语言里硬抠 | Schema 可验证、可重试、可演进 |
| 查询订单或执行外部动作 | Tool Calling | 让模型直连数据库 | 代码保留权限与执行控制 |
| 审批、重试等固定业务步骤 | Workflow | 自由 Agent | 流程可预测、可恢复、可审计 |
| 步骤真的无法提前定义 | 受约束 Agent | 无限循环自主执行 | 保留探索能力并限制步数、时间和费用 |
| 同一工具被多种 AI 客户端复用 | MCP | 内部函数也协议化 | 标准化发现、Schema 和连接方式 |
| 大量稳定样本中的风格或模式 | 评估 Fine-tuning | 用微调补实时知识 | 训练模式不等于更新事实库 |
30 秒岗位定位
我的主线不是转算法，而是把资深前端能力延伸到 AI 全栈交付。我能负责复杂交互和 Nuxt 工程，也会通过 Node、数据层和模型网关打通调用链，并用评测、权限、成本与可观测性把 AI 功能做成可上线系统。
60 秒完整调用链
用户在 Vue 页面发起请求，前端创建消息 ID 和取消信号；Nuxt BFF 校验会话、隐藏模型密钥，再把请求交给 Node 领域服务。服务端先做权限和运行时 Schema 校验，需要知识时执行带权限的 RAG，需要动作时进入受控工具或工作流；模型事件通过 SSE 返回，前端状态机渲染文本、引用、工具状态和错误。整条链路记录 Trace、Token、延迟和结果反馈。
RAG 与 Agent 区别
RAG 解决模型缺知识的问题，Agent 解决下一步行动难以预定义的问题。知识问答通常先把 RAG 做好；只有任务确实需要动态规划，且具备权限、预算、审批和恢复边界时，才引入 Agent。
为什么 AI 仍需工程保障
模型是概率组件，Prompt 不是权限系统。生产系统必须由代码控制身份、授权、Schema、幂等和人工审批；再用离线 Eval 判断版本是否更好，用 Trace 解释一次失败发生在检索、模型、工具还是网络。
这些话术是认知脚手架，不是项目经历。面试时必须明确哪些做过、哪些只是方案理解。
PART 05 · 80–90 分钟
印象验收
先在脑中回答，再展开答案。能复述比“看着都懂”更重要。
1TypeScript 已声明类型，为什么接口返回仍要做 Schema 校验？查看答案
TS 类型在编译后消失，网络输入仍可能缺字段、类型错误或带恶意数据。
2SSR 页面为什么还会发生 Hydration mismatch？查看答案
浏览器接管时会重新计算首屏；若时间、随机数、环境 API 或跨请求状态不同，两端 DOM 就不一致。
3模型流式输出为什么通常先选 SSE？查看答案
主要数据方向是服务端到客户端，SSE 基于 HTTP、实现和重连都更简单；双向高频通信才需要 WebSocket。
4BFF 与核心业务服务的边界是什么？查看答案
BFF 处理客户端专属会话、聚合、密钥和协议适配；跨客户端复用的领域规则、权限和数据一致性留在业务服务。
5PostgreSQL、Redis 和队列分别承担什么？查看答案
PostgreSQL 保存可靠事实，Redis 管缓存、限流等短期状态，队列承载可重试的异步长任务。
6RAG 与 Fine-tuning 最核心的区别是什么？查看答案
RAG 在运行时补充可更新、可引用的知识；微调改变模型在稳定样本上的行为模式，不适合更新实时事实。
7Tool Calling 为什么不等于 Agent？查看答案
Tool Calling 只是模型提出某个动作；Agent 还包含持续观察、决策下一步和循环执行的运行时。
8固定审批流程为什么优先 Workflow？查看答案
确定性状态机更容易预测、审计、重试和恢复，不需要把步骤控制权交给模型。
9Prompt Injection 为什么不能只靠 System Prompt 防御？查看答案
Prompt 仍是模型上下文，不能构成强制安全边界；权限隔离、工具白名单、输出处理和人工确认必须由代码实现。
10Eval 和 Trace 各自回答什么问题？查看答案
Eval 回答系统质量是否达标或版本是否变好；Trace 回答一次请求经过哪里、为什么成功或失败。
离开页面前，完成 3 个输出
- 不看页面，凭记忆画出六层调用链，并为每层写一个职责。
- 用两分钟讲清一次 AI 请求从浏览器到模型再回到 UI 的过程。
- 分别为企业知识问答、退款审批和开放式资料研究选择方案并说明理由。
还差 5 段
查阅完整参考 按自己的节奏完成五段；勾选只用于本页反馈，不会写入签到记录。