https://kungfuqoder.com/ai-index.html ->点击跳转
从移动开发转型 AI Agent 工程师：我做了一个开源学习系统
一名 10+ 年移动开发者的转型笔记，把整个学习路径打包成可交互的网页系统，分享给同样在转型路上的你。
写在前面
最近半年，AI Agent 这个方向的热度肉眼可见地在涨。作为一个在移动端摸爬滚打了十多年的老兵，我也在认真考虑转型------但市面上的资料要么太学术（直接从 Transformer 公式开始），要么太碎片（一篇博客只讲一个点），要么太框架化（"按 LangChain 这一套抄就行"）。
于是我干脆自己整理了一套完整的学习材料，并且把它做成了一个可交互的网页系统------既方便我自己边学边用，也希望对同样在转型的朋友有帮助。
整个系统已经放到了网上，主入口是 ai-index.html。下面介绍一下里面都有什么。
系统总览
打开 ai-index.html，会看到一个科幻任务控制台风格的入口页，里面有 7 个模块卡片，每个都是一个独立的学习页面：
| 模块 | 文件 | 用途 |
|---|---|---|
| Roadmap | AI-Agent-Developer-Roadmap.html |
完整学习路线 |
| Tasks | AI-Agent-Developer-Tasks.html |
分阶段任务清单 |
| Quest Game | Agent-Quest-Game.html |
游戏化学习 |
| Vocabulary | AI-Agent-Vocabulary.html |
英文词汇手册 |
| Video Academy | AI-Agent-Video-Academy.html |
YouTube 视频精选 |
| Video CN | AI-Agent-Video-CN.html |
国内视频精选 |
| Skill Tree | AI-Agent-Skill-Tree.html |
知识点技能树 |
整套系统的设计思路是：同一份知识体系，七种不同的呈现方式。读得累了可以换成游戏化练习，看视频看烦了可以回到技能树标记进度，碰到不认识的英文术语直接跳到词汇手册查发音。
下面分别介绍每个模块。
Module 00 · Roadmap 完整学习路线
AI-Agent-Developer-Roadmap.html 是整个系统的理论主干。
它把 AI Agent 学习路径切成了 7 个阶段：
- LLM 基础与 Prompt Engineering（2-3 周）
- Agent 核心架构（3-4 周）
- 核心框架实战（4-5 周）------ LangChain/LangGraph、CrewAI、Vercel AI SDK、MCP
- RAG 检索增强生成（3-4 周）
- 生产级 Agent 开发（3-4 周）------ 可观测性、评估、安全、部署
- Multi-Agent 系统与高级话题（3-4 周）
- 持续学习与职业发展（长期）
每个阶段都包含必学概念、Python + TypeScript 双栈代码示例、官方资源链接和时间预估。整体保守估计 18-24 周 可以达到独立承担 Agent 项目的水平------如果你已有工程基础和 API 调用经验，可以压缩到 3-4 个月。
页面顶部有一个 sticky 阶段导航栏，每个章节都可折叠展开，方便随时跳转。
Module 01 · Tasks 分阶段任务清单
如果说 Roadmap 是"知道要学什么"，那 Tasks 就是"知道这周做什么"。
AI-Agent-Developer-Tasks.html 把每个阶段进一步拆成具体任务：每周该读哪几篇文章、写哪个小项目、产出什么 deliverable、验收标准是什么。所有任务都带 checkbox，进度自动保存在浏览器 localStorage------关页面再开还在。
适合对自己学习节奏有规划要求的人。
Module 02 · Quest Game 游戏化学习
Agent-Quest-Game.html 是一个 RPG 风格的学习游戏，包含 4 种玩法：
- Quiz 答题模式：24 道选择题覆盖所有核心概念，答对加 XP，连击翻倍
- Skill Tree 技能树：18 个可解锁节点，需要积累 XP 才能点亮
- Flashcards 闪卡：20 张概念卡片，翻面查看解释，适合通勤路上刷
- Code Challenges 代码挑战：4 道编程题，带提示和参考答案
整个游戏有等级、连击、成就系统，进度全部本地保存。学累了来玩两把，比刷短视频强。
Module 03 · Vocabulary 英文词汇手册
读 AI 论文和官方文档绕不开英文。AI-Agent-Vocabulary.html 收录了 40+ 个核心术语，每个都有：
- IPA 国际音标
- 词性 / 中文释义 / 英文释义
- 真实场景例句（中英对照）
- 浏览器原生发音（点喇叭按钮即可朗读）
- "已掌握"标记
页面用 Crimson Pro + Noto Sans SC 字体搭配，做成温暖的纸质手册风格。学累了翻翻挺解压。
Module 04 · Video Academy YouTube 视频精选
AI-Agent-Video-Academy.html 收录了 30+ 条 YouTube 上质量过硬的 AI Agent 教学视频，按难度分成 6 个层级：
- Foundation 基础理论
- Prompt & API
- Agent Architecture
- Frameworks
- RAG
- Production
每条视频都标注了讲者、时长、推荐理由。还附了 3 条系统化播放列表的入口。适合想跟着视频系统学的同学。
Module 05 · Video CN 国内视频精选
考虑到 YouTube 不是所有人都能流畅访问，AI-Agent-Video-CN.html 单独整理了一份国内视频源，主要是 Bilibili 和 ModelScope 的内容，分成 8 个主题板块。
中文讲解、零门槛访问，对国内学习者更友好。
Module 06 · Skill Tree 知识点技能树
AI-Agent-Skill-Tree.html 是整个系统里我最喜欢的一个页面。
它把整个学习地图变成了一棵可视化的技能树：7 大阶段、40+ 知识节点，每个节点下面还有 4-6 个具体子项。每个节点有 4 种状态可以循环切换：
- 🔒 Locked（未开始）
- 📖 Learning（学习中）
- ✓ Learned（已学会）
- ★ Mastered（已精通）
页面顶部有全局统计：总数、学习中、已学会、已精通、完成百分比。可以按阶段筛选只看当前关注的部分。
这个页面解决的核心问题是：让"学习进度"从虚无的感觉变成可视化的数据。看到那个百分比一点点涨上去，比单纯刷题更有动力。
设计上的几个小心思
整个系统不是简单地把 Markdown 转 HTML 了事。在做的时候我刻意让每个页面有自己的"气质"：
- 入口页用了科幻任务控制台风格------扫描线、粒子、霓虹光效，营造"准备出发"的仪式感
- Roadmap 偏向严肃技术文档风格，配色克制
- Quest Game 用了像素 RPG 风格，全是大色块和发光按钮
- Vocabulary 用的是温暖纸质手册风格，方便长时间阅读
- Skill Tree 是 GitHub 暗色主题，极客感拉满
7 个页面之间用色和字体都不一样，但底层信息架构是统一的------这样在不同场景切换页面时不会觉得无聊，但也不会迷路。
所有交互页面都用了 localStorage 保存进度，关掉浏览器再开还在，不需要登录、不需要联网、不需要后端，纯静态部署即可。
怎么用
最推荐的使用顺序是：
- 先打开
ai-index.html，看一眼整个系统有哪些模块 - 从 Roadmap 开始，建立完整的知识地图
- 配合 Tasks 制定你这周要做什么
- 学到累了就去 Quest Game 答几题、刷几张闪卡放松一下
- 碰到生词直接跳到 Vocabulary 听发音
- 每完成一个知识点回到 Skill Tree 把状态从 📖 改成 ✓
- 想换种方式学习就去看视频（Video Academy / Video CN）
写在最后
这套材料是我边学边整理的，所以它不会是完美的------很多内容会随着 AI 行业的变化继续迭代，比如新的框架、新的最佳实践、新的视频资源。
如果你也是从其他领域转来 AI 的，希望这套东西能帮你少走点弯路。如果你发现哪里有错或者哪里可以更好，也欢迎反馈。
祝你在 AI Agent 这条路上玩得开心。
本文配套的全部 7 个 HTML 页面均已开源/在线部署，主入口为 ai-index.html。所有交互进度保存在浏览器本地，无需注册账号。