一、AI 前端 / 高级前端到底在做什么？
先一句定级定义（面试可直接说）👇
AI 前端的核心价值不是模型能力，而是 人机交互设计 + 状态控制 + 多模态体验落地。
也就是：
❌ 不是 Prompt Boy
✅ 是 AI 产品体验工程师
二、AI 前端能力模型（面试官视角）
我给你拆成 5 个能力层，每一层都能拿来问你。
① 基础层（你已经具备 80%）
| 能力 | 说明 |
|---|---|
| React / Hooks | 状态驱动 UI |
| 状态管理 | Redux / Zustand |
| 网络层 | 拦截、重试、缓存 |
| 工程化 | TS、模块拆分 |
👉 你现在就在这层 偏上位置
② 交互层（AI 前端的分水岭）
这是普通前端和 AI 前端的第一道坎👇
核心能力
- 状态机思维（不是 useState）
- 异步流程编排
- 可中断 / 可回退 UI
典型场景
- ChatGPT 式对话
- 语音助手一问一答
- Copilot 辅助输入
技术点
- XState / 自建 FSM
- AbortController
- 乐观 UI
👉 80% 前端卡死在这
③ AI 连接层（不是模型，是“接法”）
你要会的不是“调 API”，而是👇
| 能力 | 为什么 |
|---|---|
| Streaming | 打字机效果 |
| Context 管理 | 多轮对话 |
| Token 预算 | 防爆 |
| Prompt 模板 | 稳定输出 |
示例（Streaming）
for await (const chunk of stream) {
setAnswer(prev => prev + chunk)
}
👉 面试官会问：
为什么不用一次性返回？
你要答：
体验 & 感知速度
④ 多模态层（直接拉开档次）
| 模态 | 前端职责 |
|---|---|
| 文本 | 编辑、补全、修正 |
| 语音 | 采集、播放、打断 |
| 图片 | 上传、标注、生成 |
| 文件 | 解析、摘要 |
技术栈
- Web Audio API
- MediaRecorder
- Canvas / OffscreenCanvas
- WASM（加分）
⑤ 产品级能力（高级前端标志）
这是定高级 / 负责人的地方 👇
- AI 能力降级方案
- 错误兜底设计
- 用户心智引导
- 成本 & 性能平衡
面试官会问的狠问题
AI 不稳定你怎么设计 UI？
满分回答👇
我会通过中间态、草稿态和可回退设计，避免用户感知失败。
三、你该怎么“进阶”才最快？（给你路线）
🚀 阶段一：AI 交互专项突破（2–3 周）
重点只干三件事：
- Chat UI（Streaming）
- 状态机控制
- 请求中断
👉 项目建议：
“AI 对话助手（支持打断 & 多轮）”
🚀 阶段二：语音 + 多模态（3–4 周）
- 语音输入
- TTS 播放
- 可打断
- 回到监听
👉 项目建议：
“Web 语音 AI 助手”
🚀 阶段三：工程化 & 高级封装（持续）
- AI SDK 封装
- Hook 化能力
- 跨端（Web / Taro）
四、你简历该怎么写（直接可用）
标题（很重要）
AI 交互系统设计（前端主导）
描述模板
- 设计基于状态机的 AI 交互流程，支持多轮对话与中断
- 实现 AI Streaming 响应，显著提升用户感知速度
- 封装 AI 请求层，支持上下文管理、异常兜底
- 支持语音输入 / 语音播报等多模态交互
⚠️ 一个字都别写模型
五、面试官对你新的“身份判断”
如果你能讲清楚👇这些点：
- 状态机而不是 setState
- Streaming 而不是一次性请求
- 体验优先而不是“接口返回”
👉 面试官会把你放进：
高级前端 / AI 前端 / 创新方向候选
