一、前端 AIGC 是什么（一句话）
前端 AIGC = 把大模型能力，做成真正可用的产品体验
不是训练模型，
而是 AI 能力 × 前端工程 × 业务场景。
二、前端在 AIGC 里到底干什么？（核心职责）
一句话概括👇
前端负责“让 AI 像一个好用的产品，而不是一个接口”
具体负责这 7 件事
| 模块 | 前端做什么 |
|---|---|
| 接入模型 | 调用大模型 API |
| Prompt | 模板化、参数化 |
| 交互 | 对话 / 表单 / Copilot |
| 流式 | 打字机效果 |
| 状态 | 上下文 / 历史 |
| 多模态 | 文件 / 图片 |
| 体验 | 中断、重试、Loading |
三、前端 AIGC 常见产品形态（真实项目）
1️⃣ 对话式（Chat）
- ChatGPT
- 智能客服
技术重点：
- 消息流
- 上下文截断
- 流式输出
2️⃣ 表单式（企业最爱 ⭐）
80% 企业 AIGC 都是这个
- 填需求
- 点生成
- 出结果
优点：
- 稳定
- 可控
- 易落地
3️⃣ Copilot（高级）
- 写代码
- 改文档
- 智能补全
技术点：
- 编辑器集成
- Diff 高亮
- 撤销 / 重试
四、前端如何实现 AIGC（技术方案）
1️⃣ 架构（真实生产）
前端（React / Vue）
↓
BFF / Serverless（鉴权、限流）
↓
LLM API（OpenAI / 通义 / 文心）
↓
流式返回
⚠️ API Key 永远不放前端
2️⃣ 流式输出（核心能力）
这是 前端 AIGC 分水岭
const reader = response.body.getReader()
while (true) {
const { done, value } = await reader.read()
if (done) break
setText(t => t + decoder.decode(value))
}
3️⃣ Prompt 工程（前端必会）
Prompt 不是一句话，而是：
- 模板
- 变量
- 角色
- 约束
const prompt = `
你是一个前端专家
根据需求生成 React + TS 代码
需求：${input}
`
五、前端 AIGC 技术栈（推荐）
| 模块 | 技术 |
|---|---|
| 框架 | React + TS |
| 请求 | Fetch + Stream |
| 状态 | Zustand |
| UI | AntD / Shadcn |
| 服务 | Node / Serverless |
| AI | OpenAI / 通义 |
六、前端 AIGC 能做哪些项目（面试用）
结合你背景，特别加分👇
- 🔥 智能性能报告生成
- 🔥 自动生成测试用例
- 🔥 文档 / PPT 生成
- 🔥 数据分析解读
- 🔥 智能客服
📌 面试说法：
我主要负责 AI 能力的前端产品化。
七、学习路线（前端视角）
阶段 1（入门）
- 调模型 API
- 做 Chat 页面
阶段 2（核心）
- 流式输出
- Prompt 模板
阶段 3（进阶）
- 文件 / 多模态
- 上下文管理
阶段 4（高级）
- Agent
- Function Calling
- RAG（知识库）
八、前端 AIGC 面试一句话（直接背）
前端 AIGC 的核心不是训练模型，而是把大模型能力转化为可用、稳定、可交互的产品。
九、一个现实判断（很重要）
- ❌ 不会被 AI 淘汰：会用 AI 的前端
- ✅ 会被淘汰：只写 CRUD、不懂业务、不懂产品的人
