学习总览
| 阶段 | 时间 | 核心目标 | 关键技术栈 | 产出项目 |
|---|---|---|---|---|
| 第一阶段 | 第 1 个月 | 理解模型与提示词 | Prompt Eng, OpenAI API, Python 基础 | 智能对话助手 |
| 第二阶段 | 第 2 个月 | 掌握 Agent 框架与记忆 | LangChain, Vector DB, RAG | 文档知识库问答 |
| 第三阶段 | 第 3 个月 | 全栈落地与多 Agent | Next.js, Vercel AI SDK, Deployment | 企业级 AI 应用 |
️ 第一阶段:AI 基础与提示词工程(第 1-4 周)
目标:理解 LLM 工作原理,掌握 Prompt 技巧,能调用 API 实现基础对话。
第 1 周:AI 通识与 Python 速成
- 学习内容:
- LLM 基本原理(Transformer 简介,Token 概念,Temperature 参数)。
- Python 基础语法(变量、函数、异步请求
async/await,包管理pip/poetry)。 - 环境搭建(Anaconda 或 venv,VS Code Python 插件)。
- 前端优势转化:将 Python 脚本视为 Node.js 脚本,重点学习
requests库(类似 axios)。 - 资料:
- Python for Everybody (Coursera) (只看前 2 门)
- LLM University (Cohere) (免费基础课)
第 2 周:提示词工程 (Prompt Engineering)
- 学习内容:
- Zero-shot, Few-shot, Chain of Thought (CoT)。
- 结构化输出(强制模型输出 JSON)。
- 提示词优化技巧(角色设定、任务拆解、约束条件)。
- 实践:编写一套 Prompt,让模型从非结构化文本中提取 JSON 数据。
- 资料:
第 3 周:LLM API 调用与流式响应
- 学习内容:
- OpenAI / Anthropic / 国内大模型 API 对接。
- Streaming(流式输出):前端 SSE (Server-Sent Events) 处理。
- 错误处理与重试机制。
- 前端优势转化:利用你对 HTTP 和 Stream 的理解,实现打字机效果。
- 资料:
第 4 周:阶段项目 - 智能对话助手
- 任务:使用 Next.js + Vercel AI SDK 构建一个支持流式输出的聊天界面。
- 功能:
- 多轮对话上下文管理。
- 支持 Markdown 渲染。
- 支持代码高亮。
- 技术栈:Next.js, TailwindCSS, Vercel AI SDK, OpenAI API。
🗓️ 第二阶段:Agent 框架与 RAG(第 5-8 周)
目标:让 AI 拥有“记忆”和“工具”,能处理私有数据。
第 5 周:LangChain / LangChain.js 基础
- 学习内容:
- LangChain 核心概念:Model, Prompt, Chain, Agent。
- 决策:前端推荐先用
LangChain.js(保持 TS 技术栈),进阶学LangChain Python(生态更全)。 - 构建简单的 Chain(顺序执行)。
- 资料:
第 6 周:向量数据库与嵌入 (Embeddings)
- 学习内容:
- Embedding 原理(文本向量化)。
- 向量数据库使用(ChromaDB 本地 / Pinecone 云端 / Pgvector)。
- 相似度搜索(Similarity Search)。
- 前端优势转化:将向量库视为一种特殊的“数据库”,学习其 CRUD 操作。
- 资料:
第 7 周:RAG (检索增强生成)
- 学习内容:
- 文档加载(PDF, Markdown, Text)。
- 文本切片(Chunking 策略)。
- RAG 完整流程:检索 -> 增强 -> 生成。
- 实践:上传一个 PDF,让 AI 基于 PDF 内容回答问题。
- 资料:
第 8 周:阶段项目 - 企业知识库问答
- 任务:构建一个能“阅读”公司内部文档的 AI 助手。
- 功能:
- 文件上传与解析。
- 向量存储与检索。
- 引用来源标注(显示答案出自哪个文档的哪一页)。
- 技术栈:Next.js, LangChain, Pinecone/Chroma, PDFParse。
🗓️ 第三阶段:全栈落地与高级 Agent(第 9-12 周)
目标:构建可部署的生产级应用,探索多 Agent 协作。
第 9 周:Agent 工具调用 (Function Calling)
- 学习内容:
- Function Calling 原理(模型决定调用哪个 API)。
- 自定义工具(搜索、计算器、数据库查询)。
- ReAct 模式(Reasoning + Acting)。
- 实践:让 Agent 调用天气 API 或 搜索 Google。
- 资料:
第 10 周:多 Agent 协作与工作流
- 学习内容:
- 多 Agent 架构(Manager-Worker 模式)。
- 框架:AutoGen, CrewAI (Python 为主), LangGraph。
- 工作流编排(DAG)。
- 前端优势转化:将多 Agent 视为“微前端”架构,每个 Agent 是一个独立服务。
- 资料:
第 11 周:评估、监控与优化
- 学习内容:
- Agent 评估指标(准确率、延迟、成本)。
- 日志与追踪(LangSmith, Arize Phoenix)。
- 缓存策略(减少 Token 消耗)。
- 资料:
第 12 周:毕业项目 - 自动化运维/数据分析 Agent
- 任务:构建一个能执行具体任务的 Agent。
- 功能:
- 用户输入自然语言指令(如“查询上周销售额并画图”)。
- Agent 自动调用数据库/API。
- 返回图表或执行结果。
- 部署到 Vercel 或 Docker。
- 技术栈:Next.js, LangGraph, ECharts/Recharts, Docker。
📚 核心学习资料库
1. 文档与教程(必收藏)
- Vercel AI SDK: sdk.vercel.ai/docs (前端做 AI 的神器,必学)
- LangChain: python.langchain.com/ & js.langchain.com/
- Hugging Face: huggingface.co/ (模型托管平台)
- Prompt Engineering Guide: www.promptingguide.ai/
2. 视频课程
- DeepLearning.AI: 吴恩达的短课程,质量极高,免费。
- YouTube 频道:
- Greg Kamradt (Data Independent) - 实战性强。
- David Shapiro - 深度技术解析。
- Code with Antonio - 全栈 AI 项目构建。
3. 开源项目参考
- Next.js AI Chatbot: github.com/vercel/ai-c… (Vercel 官方示例,代码质量极高)
- LangChain-NextJS-Template: github.com/homanp/lang…
- AutoGen: github.com/microsoft/a…
4. 社区与资讯
- Hugging Face Daily Papers: 了解最新模型。
- Reddit r/LocalLLaMA: 开源模型讨论。
- Twitter/X: 关注 @langchainai, @vercel, @amasad。
💡 给前端工程师的特别建议
-
不要陷入模型训练陷阱:
- 你的目标是 AI Application Engineer,不是 AI Researcher。
- 不要花时间去学 PyTorch 底层或数学推导,学会调用 API 和微调 Prompt 更重要。
-
发挥 UI/UX 优势:
- 大多数 AI 应用界面都很丑。你可以做出交互体验最好的 Agent。
- 思考:如何处理 AI 思考中的状态?如何展示引用来源?如何让用户修正 AI 的错误?这些都是前端的主场。
-
TypeScript 是你的武器:
- 优先使用 LangChain.js 和 Vercel AI SDK。
- 这能让你在熟悉的环境中学习新概念,降低认知负荷。
- 只有在 JS 生态无法满足时(如复杂的 RAG 管道),再考虑 Python 后端。
-
关注“边缘计算” (Edge AI):
- 学习 WebLLM 或 Transformers.js,尝试在浏览器端直接运行小模型。
- 这是前端独有的 AI 赛道(隐私保护、零延迟)。
-
构建作品集:
- 将代码开源到 GitHub,并在 README 中详细写出 架构思考 和 Prompt 优化过程。
🚀 每周时间分配建议(在职)
- 周一至周五:每天 1-1.5 小时(阅读文档,写小 Demo)。
- 周六:4-5 小时(集中攻克难点,构建项目核心功能)。
- 周日:休息或复盘(看技术视频,放松)。