前端 AIGC - 技术栈

一、前端 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、不懂业务、不懂产品的人