前端开发 → Agent 开发 完整学习计划（半年稳扎版）

Chopin
4 阅读12分钟

前端开发 → Agent 开发 完整学习计划（半年稳扎版）

面向有扎实 JS/TS 基础的前端工程师，目标是能独立设计并落地生产级 AI Agent 应用。 默认技术路线优先 TypeScript 生态，Python 作为补充。 总周期约 26 周（半年），按业余时间「稳扎稳打」设计：每阶段都留出充分的理解、动手、复盘时间，宁可慢，不留夹生饭。

〇、半年节奏总则（先读这段）

  • 每周投入参考：8–12 小时（约 2 个工作日晚上 + 周末半天）。投入更多可提前，投入更少则顺延，不必赶进度。
  • 每周固定结构（强烈建议照做）：
    • 🎯 输入（40%）：看官方文档 / 视频，做笔记。
    • 🛠️ 动手（45%）：当周必须有可运行的代码产出。
    • 🔁 复盘（15%）：写一段「本周学到什么 + 哪里卡住 + 下周计划」，可发博客 / 朋友圈倒逼输出。
  • 每月一次「整合周」：不学新东西，只回顾、重构旧项目、补笔记。半年共 6 次，已排入下方计划。
  • 核心心法：Agent = LLM（大脑）+ Tools（手脚）+ Context/Memory（记忆）+ Loop（自主循环）+ 评估反馈。

一、写在前面：前端转 Agent 的优势与认知转变

你已经具备的优势

  • API / 异步 / 流式处理：Agent 大量依赖 HTTP、SSE、streaming，你早就熟。
  • 类型系统：TS 类型思维直接迁移到「结构化输出 / Tool Schema 定义」。
  • 产品 & UI 思维：Agent 的最后一公里是交互（聊天、流式渲染、人机协同），前端是天然 buff。
  • 工程化能力：包管理、构建、部署、可观测，在 Agent 工程化阶段非常吃香。

必须建立的几个新认知（最重要）

旧认知（确定性编程）新认知（概率性系统）
输入相同 → 输出相同输入相同 → 输出可能不同（需约束、评估、重试）
Bug 靠断点调试「Bug」靠改 Prompt、加约束、补上下文、做评估来收敛
测试 assert 精确值用 Eval（评估集） 衡量整体质量而非单点正确
逻辑全在代码里逻辑一部分在代码，一部分在 Prompt / 上下文 里
成本=服务器成本=Token，需主动设计上下文与缓存来省钱

二、技术栈总览（按学习顺序）

层推荐选型（TS 优先）备选 / 进阶
模型 APIAnthropic Claude API、OpenAI API本地模型 Ollama
Agent 框架Vercel AI SDK、Claude Agent SDKLangGraph、Mastra
结构化输出Zod + AI SDK generateObjectOpenAI Structured Outputs
检索/RAGLlamaIndex.TS、向量库（pgvector / Qdrant / Pinecone）LangChain.js
协议MCP（Model Context Protocol）OpenAPI tools
可观测/评估Langfuse、BraintrustLangSmith、自建 eval
部署Next.js + Vercel、Cloudflare WorkersDocker + 云服务
Python 补充（可选）Anthropic/OpenAI SDK、LangGraph、OpenAI Agents SDK读社区主流代码用

三、26 周阶段化学习计划（含每阶段资源清单）

阶段 0：基础概念与心智模型 ｜ 第 1–2 周

目标：搞懂 LLM 是什么、能干什么、边界在哪，跑通第一个 API 调用。

学什么

  • LLM 原理（够用即可）：Token、上下文窗口、temperature、概率采样、为什么会「幻觉」。
  • 术语扫盲：Prompt / System Prompt / Context Window / Embedding / RAG / Tool Use / Agent / MCP。
  • 跑通 Claude 或 OpenAI 的第一个 chat 请求（普通 + 流式各一个）。

📚 资源清单

✅ 产出：hello-llm 脚本（普通调用 + 流式调用）；一页术语笔记。

阶段 1：Prompt Engineering 与结构化输出 ｜ 第 3–5 周

目标：能稳定「指挥」模型，并拿到程序可消费的类型安全数据。

学什么

  • Prompt 基本功：角色设定、明确指令、Few-shot、分隔符、思维链（先想后答）。
  • System Prompt 设计与约束写法（输出格式、禁止项、边界）。
  • 结构化输出（前端最该重视）：Zod 定义 schema + generateObject 强制返回 JSON。
  • 流式输出在前端的渲染：逐字输出、useChat。

📚 资源清单

✅ 实战项目 ①：「文章 → 结构化摘要卡片」。输入文本 → 输出 {标题, 要点[], 标签[], 情感} → React 卡片渲染。

🟢 第 6 周 = 整合周①：重构项目 ①、补 Prompt 笔记、把交互式教程没做完的练习补完。

阶段 2：Tool Use / Function Calling ｜ 第 7–9 周

目标：让模型调用你写的函数、访问外部世界——从「聊天机器人」迈向「Agent」的关键一步。

学什么

  • 原理：模型不直接执行，而是「请求调用某工具 + 参数」，你执行后回灌结果。
  • 用 AI SDK 定义 tools（name + 描述 + Zod 参数 schema + execute）。
  • 多工具选择、参数校验、工具报错处理。
  • 工具设计原则：描述清晰、单一职责、返回精炼（省 token）。

📚 资源清单

✅ 实战项目 ②：多工具实时助手。工具：天气、计算器、当前时间、（可选）网页搜索。体会模型如何自主选工具。

阶段 3：RAG 检索增强 ｜ 第 10–13 周

目标：让 Agent 基于「你的私有知识」回答，而不是瞎编。

学什么

  • 为什么需要 RAG（窗口有限 + 私有数据 + 降幻觉）。
  • 流程：文档切分 chunking → Embedding → 向量库 → 相似度检索 → 拼进 Prompt。
  • 进阶：切分策略、重排序 rerank、混合检索、标注来源。
  • 向量库选型：本地 pgvector / Chroma，托管 Qdrant / Pinecone。

📚 资源清单

✅ 实战项目 ③：文档问答机器人。上传 PDF/Markdown → 建索引 → 基于内容问答并标注出处。

🟢 第 14 周 = 整合周②：把项目 ②③ 合并思考，重构检索质量，补 RAG 笔记。

阶段 4：Agent 核心架构 ｜ 第 15–18 周 ⭐ 全程重点

目标：理解并实现真正的「自主循环」Agent。

学什么

  • Agent Loop（核心中的核心）：感知 → 思考 → 行动 → 观察 → 再思考 …… 直到完成目标。
  • 经典模式：ReAct、Plan-and-Execute、Reflection（自我反思修正）。
  • Memory：短期（对话历史）、长期（向量库 / DB）、上下文压缩与裁剪。
  • 上下文工程（Context Engineering）：在有限窗口塞进最有用的信息——高级 Agent 工程师的核心技能。
  • 终止条件、最大步数、防死循环/失控、Human-in-the-loop。

📚 资源清单

✅ 实战项目 ④：研究型 Agent。给定问题 → 自主拆解 → 多轮搜索 → 阅读 → 汇总 → 输出带引用的报告。

阶段 5：MCP 协议与工具生态 ｜ 第 19–21 周

目标：掌握 Agent 时代的「工具标准化协议」，让能力即插即用。

学什么

  • MCP 是什么、解决什么（统一 Agent 与外部工具/数据源的接口标准）。
  • 用现成 MCP Server（文件系统、GitHub、数据库、浏览器等）。
  • 自己写一个 MCP Server（前端友好：TS SDK）。
  • 在 Claude Code / Cursor 等客户端接入自己的 MCP。

📚 资源清单

✅ 实战项目 ⑤：自定义 MCP Server。把某个内部 API / SaaS 封装成 MCP 工具，供任意 Agent 调用。

🟢 第 22 周 = 整合周③：把项目 ④⑤ 打通——让研究型 Agent 通过 MCP 调用你的自定义工具。

阶段 6：多 Agent 与编排 ｜ 第 23–24 周

目标：用多个分工的 Agent 协作完成复杂任务（同时学会「克制」）。

学什么

  • 模式：Orchestrator-Worker（主管派活）、Pipeline（流水线）、辩论/投票、并行 fan-out。
  • Agent 间通信与状态共享。
  • 何时不该用多 Agent：多数问题单 Agent + 多工具就够，别过度设计。

📚 资源清单

✅ 实战项目 ⑥：内容生产流水线。选题 Agent → 写作 Agent → 审校 Agent → 配图（工具）→ 排版输出。

阶段 7：工程化、评估与可观测 ｜ 第 25–26 周 ⭐ 决定能否上生产

目标：把玩具变成可靠、可维护、可省钱的生产系统——前端工程化能力的主战场。

学什么

  • 评估（Eval）：建评估集，用「LLM as a Judge」或规则打分，量化每次改动的质量变化（类比回归测试）。
  • 可观测性：追踪每次调用的 prompt / token / 耗时 / 工具链路 / 成本。
  • 成本与性能：Prompt Caching、模型分级（简单任务用小模型）、上下文裁剪、并发与流式。
  • 可靠性 & 安全：重试/超时/降级、幻觉防护、Prompt 注入防护、工具权限最小化、输出校验。
  • 部署：Next.js + Vercel / Cloudflare Workers，Serverless 下的流式响应。

📚 资源清单

✅ 实战项目 ⑦：把前面任一项目「生产化」——接 Langfuse 监控 + 建 ≥20 条评估集 + 开 Prompt Caching + 部署上线。

🎓 收尾：毕业项目（融入最后整合周）

选一个你真实的工作/生活痛点，做端到端 Agent 产品并上线，具备： 工具调用 + RAG + 记忆 + 评估 + 监控 + 像样的前端。这就是你的转型作品集第一项。

四、26 周里程碑总览表

周次阶段里程碑
W1–2阶段 0跑通 API（普通+流式）、术语笔记
W3–5阶段 1项目① 结构化摘要卡片
W6整合周①重构项目①、补 Prompt 笔记
W7–9阶段 2项目② 多工具实时助手
W10–13阶段 3项目③ 文档问答机器人
W14整合周②优化检索质量、补 RAG 笔记
W15–18阶段 4项目④ 研究型 Agent（吃透 Agent Loop）
W19–21阶段 5项目⑤ 自定义 MCP Server
W22整合周③打通项目④⑤（Agent + MCP）
W23–24阶段 6项目⑥ 多 Agent 内容流水线
W25–26阶段 7项目⑦ 生产化 + 毕业项目上线

五、Python 要不要学？（半年版的安排）

  • W1–18 先不碰：用 TS 完全能做完整 Agent 项目，避免分心。
  • 建议在 W19 前后（约第 5 个月）花 1–2 周补 Python 基础：语法 + Anthropic/OpenAI SDK + 读懂 LangGraph / OpenAI Agents SDK 示例。
  • 目的：社区最前沿的论文复现、开源 Agent、研究代码大多是 Python，看得懂能极大拓宽视野。你不需要精通，能读、能跑、能改即可。
  • 📘 OpenAI Agents SDK（Python，作为对照阅读）：openai.github.io/openai-agen…

六、🇨🇳 中文资源专区（国内可直连，按阶段对应）

官方英文质量最高，但有语言门槛。以下中文资源（以 Datawhale、微软官方中文、社区精品为主）可作为「中文母语理解 + 英文官方查证」的双轨学习法。

通用入门（阶段 0–1）

Prompt 工程（阶段 1）

RAG（阶段 3）

Agent 核心架构（阶段 4）

MCP 协议（阶段 5）

多 Agent（阶段 6）

⚠️ 中文社区教程更新略滞后于官方，遇到 API/用法不一致时，一律以英文官方文档为准。

七、长期收藏夹（贯穿半年，反复回看）

官方文档（首选）

动手代码库 / 课程

学习方式忠告

  • 少看二手教程、多读官方 + 多动手：Agent 领域变化极快，二手内容易过时。
  • 把你正在用的 Claude Code / Cursor 当「活教材」研究其行为。

八、给前端转型者的 8 条忠告

  1. 接受不确定性：目标不是「100% 正确」，而是「在评估集上持续变好」。
  2. Prompt 也是代码：纳入版本管理，改 Prompt 要像改代码一样跑评估。
  3. 先单 Agent + 工具，别一上来就多 Agent，多数问题不需要复杂编排。
  4. 上下文工程 > 模型选择：把对的信息在对的时机喂给模型，比换模型更有效。
  5. 从第一天关注成本：Token 会偷偷烧钱，Prompt Caching 和模型分级尽早用。
  6. 可观测性要早接：没有 trace 的 Agent 是黑盒，无法迭代。
  7. 发挥前端长板：做出体验好的人机交互界面，是你区别于纯后端/算法的核心竞争力。
  8. 持续动手 + 持续读官方更新：这个领域三个月就变样，保持手感最重要。

半年看似漫长，但「稳扎稳打 + 每阶段都有可运行项目」远胜囫囵吞枣。 把本文件当 checklist，每完成一周就打勾，每个整合周认真复盘。🚀

avatar
文章
阅读
粉丝