前端转 AI Agent 工程师进阶指南

主题

前端转 AI Agent 工程师进阶指南从前端页面交付，升级到 AI Agent 工程闭环

一套面向前端工程师的 AI Agent / LLM 应用工程路线，覆盖模型调用、RAG、Workflow、Eval、上线治理、作品集与求职表达。

开始阅读
查看项目线
查看代码示例
01

12 章主线

从转型认知到求职闭环，覆盖单 Agent、RAG、Workflow、Eval、上线、安全与作品集。含 6 周 / 12 周 / 24 周三版学习路线。

12

12 个专题

补齐上下文工程、MCP、记忆、Agent UI、可观测性、成本优化、行业场景、交付方法、自托管部署与模型微调。

04

4 条项目线

企业知识问答、浏览器自动化、多步骤工作流、全栈自托管 Agent，帮助你把能力沉淀成可展示项目。

EX

示例与样本

提供代码示例、输出样本、截图清单、片段索引和可运行骨架，方便继续扩成真实项目仓。

前端转 AI Agent 工程师进阶指南 · 文档站首页 ​

欢迎来到这套指南的站点首页。 如果 README.md 更像一本书的总封面，这一页更像站内导航：帮助你按目标快速定位主线章节、专题、项目线、附录和代码示例。

快速入口

如果你不想从头翻目录，这里是最常用的几个入口。

主线总目录

从 12 章整体结构快速理解这套指南的能力地图。

12 周路线

按周拆学习节奏，适合第一次系统推进。

项目线入口

直接按项目驱动学习，优先做出可展示成果。

示例总索引

查看代码示例、输出样本、截图清单和片段索引。

求职闭环

作品集、简历、自我介绍与面试题库统一入口。

导航配置

查看文档站侧边栏草案和机器可读导航源。

Milestone 卡片

这套指南已经不只是内容提纲，而是具备主线、专题、项目、样本、代码骨架和文档站入口的成品化雏形。

12
主线章节
已全部升级为完整样章
8
专题文档
覆盖方法论、工程化与前端特色
3
项目线
可直接作为作品集主项目入口
6
附录模板
覆盖作品集、简历、面试与选型
3
可运行示例
已接统一 CLI 与展示页
VP
文档站骨架
VitePress 已可构建与预览

岗位能力地图卡片

先想清岗位要求、能力迁移和主项目主线，再开始做项目，会比“先学一堆工具”更稳。

查看样本

前端交互与状态管理

已具备
  • 复杂业务系统开发经验
  • 任务面板与状态管理实践

RAG 与检索增强

重点补齐
  • 知识问答 Agent 项目
  • 评测结果样本

评测与上线治理

重点补齐
  • 回归评测闭环
  • 灰度与回滚演练
推荐主项目主线：企业知识库问答 Agent
未来 12 周重点：单 Agent · RAG · Workflow · Eval · Production

章节进度卡片

主线 12 章覆盖从转型认知到求职闭环的完整路径。 前往学习仪表盘开始学习 →

— / 12开始学习后追踪你的进度
01模块 1

转型认知与岗位模型

未开始→
02模块 1

大模型应用基础

未开始→
03模块 1

工具调用与单智能体

未开始→
04模块 2

检索增强入门（RAG）

未开始→
05模块 2

检索增强进阶

未开始→
06模块 2

工作流编排

未开始→
07模块 2

多智能体协作

未开始→
08模块 3

评测体系建设

未开始→
09模块 3

工程化上线能力

未开始→
10模块 3

安全与合规治理

未开始→
11模块 4

作品集构建方法

未开始→
12模块 4

求职实战与面试表达

未开始→

学习路线

同一套内容，可以按不同目标进入：系统学习、项目优先、前端优势强化或求职冲刺。

第一次系统学习

路线 A · 12 周系统转型

  1. 按总目录理解全局结构
  2. 按 12 周计划推进
  3. 每章完成练习与验收
  4. 每两章沉淀一次证据与复盘
优先做作品集

路线 B · 项目驱动主线

  1. 先从项目线 A 开始
  2. 反补 RAG / Eval / Production 章节
  3. 再做项目线 B、C
  4. 把项目卡片和证据包一起整理
突出差异化价值

路线 C · 前端优势强化

  1. 先看 Agent UI / UX 与记忆设计
  2. 再看 Workflow 与协作专题
  3. 把状态、确认和任务面板做成作品集亮点
  4. 用前端能力解释 Agent 工程价值
项目已做完，准备投递

路线 D · 求职闭环冲刺

  1. 先整理作品集卡片
  2. 补齐简历与自我介绍
  3. 按题库做模拟面试
  4. 把项目讲法稳定成 1 分钟 / 3 分钟版本

项目成果卡片

如果你想最快做出能投递、能面试、能展示的成果，可以直接从这 3 条项目线切入。

RAG / 引用 / Eval

项目线 A · 企业知识库问答 Agent

查看项目

围绕企业制度、流程和知识文档构建可引用、可拒答、可评测的知识问答系统。

重点指标

  • 命中率基线
  • 引用准确率
  • 拒答准确率

证据材料

  • 回答样本
  • 评测结果
  • 引用卡片
Tool Calling / HITL / UI

项目线 B · 浏览器 / 办公自动化 Agent

查看项目

围绕多步骤任务执行，展示计划生成、人工确认、失败恢复和任务面板能力。

重点指标

  • 任务完成率
  • 确认通过率
  • 失败恢复率

证据材料

  • 执行计划
  • 步骤状态
  • 任务面板截图
Workflow / Production / Governance

项目线 C · 多步骤业务工作流 Agent

查看项目

围绕真实业务流程拆节点、做仲裁、补偿、审计和上线治理，体现系统设计深度。

重点指标

  • 节点成功率
  • 人工介入比例
  • 回滚与恢复能力

证据材料

  • 状态机样本
  • 发布清单
  • 安全治理样本

证据材料卡片

项目不只要能讲，还要能拿得出证据。这里把样本、截图、片段索引和代码骨架收拢成统一入口。

输出样本

查看

查看回答结果、评测结果、工作流状态、安全治理、作品集卡片和面试答题模板样本。

  • JSON 样本
  • Markdown 答题样本
  • 结果结构证据

截图清单

查看

查看示例页、任务面板、引用展开、失败状态等截图占位清单，方便后续补图。

  • 页面截图位
  • 状态截图位
  • 课程配图位

代码片段索引

查看

快速找到每一章、每个专题、每条项目线最适合挂什么代码片段和样本。

  • 章节映射
  • 专题映射
  • 项目线映射

可运行骨架

查看

从文档示例跳到代码骨架、统一 CLI 和静态展示页，形成“文档 + 样本 + 代码”闭环。

  • Python 示例
  • 统一 CLI
  • 静态展示页

示例运行状态卡片

如果你想马上跑起来，这里直接告诉你该用哪条命令、看什么页面、从哪一层开始验证。

统一 CLI 入口

查看入口

用一条命令列出或运行最小示例，适合快速验证单 Agent、RAG 和 Workflow。

python3 examples/run.py listpython3 examples/run.py example-01python3 examples/run.py example-02 "年假最晚什么时候提交申请？"python3 examples/run.py example-03 completed

静态展示页

查看入口

快速预览单 Agent、RAG 和 Workflow 的前端展示方式，适合录屏、做课件和作品集截图。

python3 examples/run.py showcase打开 http://127.0.0.1:8000/examples/showcase/index.html

文档站预览

查看入口

本地启动 VitePress 文档站，统一预览首页、样章、专题、项目线、附录和示例入口。

npm installnpm run docs:devnpm run docs:build

站点部署卡片

文档站已经可以本地预览和静态构建。这里把最常用的部署入口、构建命令和配置入口集中展示。

本地预览

查看说明

优先用于继续调整首页、导航、样式和内容结构。

npm installnpm run docs:dev

静态构建

查看说明

生成可发布的静态站点产物，适合接入 Pages、Vercel、Netlify 或对象存储。

npm run docs:build产物目录：docs/.vitepress/dist/

配置入口

查看说明

继续调整导航、主题和框架映射时，从这几个入口进入最省时间。

docs/.vitepress/config.tsdocs/site-navigation.jsondocs/sidebar.md

最终交付物

读完这套指南，你最终要沉淀的不是一堆知识点，而是一整套可验证、可展示、可投递的工程证据。

项目成果

  • 企业知识问答 Agent
  • 浏览器 / 办公自动化 Agent
  • 多步骤业务工作流 Agent

工程证据

  • 输出样本
  • 评测结果
  • 截图清单
  • 架构图 / 流程图

求职材料

  • 项目卡片
  • 简历 / 自我介绍
  • 面试题库
  • 1 分钟 / 3 分钟讲述稿

1. 你现在可以怎么开始 ​

我想按体系完整学习 ​

我想先看最成熟的样章 ​

我想先看项目 ​

我想先看代码和产物 ​

2. 按目标选择阅读路线 ​

路线 A：从前端转型到 Agent 工程 ​

适合第一次系统学习：

  1. 第1章 转型认知与岗位模型
  2. 第2章 大模型应用基础
  3. 第3章 工具调用与单智能体
  4. 第4章 检索增强入门
  5. 第8章 评测体系建设
  6. 第11章 作品集构建
  7. 第12章 求职与面试

路线 B：先做项目再反补知识 ​

适合想尽快做出作品集：

  1. 项目A 企业RAG Agent
  2. 项目B 浏览器自动化Agent
  3. 项目C 工作流Agent
  4. 再回读对应章节和专题

路线 E：自建 AI Agent，摆脱第三方依赖 ​

适合目标岗位涉及私有化部署或数据合规：

  1. 第2章 大模型应用基础（含本地模型替代）
  2. 第4章 检索增强入门（含自托管 RAG）
  3. 专题11 自托管 AI Agent 全栈指南
  4. 项目D 全栈自托管 Agent

路线 C：先补前端差异化优势 ​

适合想强调产品与交互价值：

  1. 专题4 Agent UI/UX
  2. 专题3 记忆与会话设计
  3. 第6章 工作流编排
  4. 专题8 交付与协作

路线 D：先补求职闭环 ​

适合已经做过项目、准备投递：

  1. 第11章 作品集构建
  2. 第12章 求职与面试
  3. 作品集模板
  4. 面试题库
  5. 简历与自我介绍模板

3. 主线地图 ​

模块 1：做出能跑的单智能体 ​

模块 2：做出可用的智能体系统 ​

模块 3：做出可上线的工程体系 ​

模块 4：做出可投递的求职闭环 ​

4. 专题导航 ​

方法论专题 ​

前端特色专题 ​

工程化专题 ​

自托管与定制化专题 ​

5. 附录导航 ​

术语与选型 ​

模板与求职材料 ​

6. 代码与证据层导航 ​

示例骨架 ​

输出样本 ​

  • docs/examples/assets/samples/README.md
  • docs/examples/assets/samples/example-01-success-response.json
  • docs/examples/assets/samples/example-02-rag-answer.json
  • docs/examples/assets/samples/example-03-workflow-state.json
  • docs/examples/assets/samples/example-09-release-checklist.json
  • docs/examples/assets/samples/example-10-security-controls.json
  • docs/examples/assets/samples/example-11-portfolio-card.json
  • 示例12 面试答题模板

证明材料 ​

7. 如果你想把这套内容继续做成成品 ​

最值得继续补的方向有三个：

  • 真实运行截图和配图素材
  • 与示例对应的可运行代码仓骨架
  • 适配静态站点的侧边栏与页面导航结构

8. 本地预览文档站 ​

  • 安装依赖：npm install
  • 启动预览：npm run docs:dev
  • 构建站点：npm run docs:build

9. 返回入口 ​