45 个 AI Agent 核心概念的系统化学习网站 —— 从"会聊天的 LLM"到"会干活的 Agent"
AI Agent 学习工坊 是一个面向开发者和产品同学的 AI Agent 核心概念速成站，目标是帮助你在 30 分钟内建立起对智能体系统（Agentic Systems）的完整认知框架。
内容覆盖从 基础定义（什么是 Agent、Workflow vs Agent）、核心架构（Tool Use、Planning、Memory、Reflection）、主流设计模式（ReAct、Prompt Chaining、Orchestrator-Workers、Evaluator-Optimizer）到 工程落地（Guardrails、Sandbox、Observability、Cost Control）等 9 大主题，共 45 个高密度概念卡片，每张卡片包含：
- 📖 核心定义：一句话讲清概念
- 🧠 深入解读：为什么重要、何时该用、边界与陷阱
- 🛠️ 应用案例：3 个真实场景示例（代码助手、研究 Agent、客服 Agent 等）
- ❓ 自测题：多选题快速验证掌握程度
| 入口 | URL |
|---|---|
| 🚀 生产环境（Vercel） | https://learn-agent-mu.vercel.app |
| 📦 GitHub 仓库 | https://github.com/dimayip/learn-agent |
| # | 主题 | 代表概念 |
|---|---|---|
| 1 | 基础概念 | AI Agent、Agentic Systems、Workflow vs Agent |
| 2 | 何时用 Agent | 成本权衡、错误容忍度、任务复杂度 |
| 3 | 核心能力 | Tool Use、Planning、Memory、Reflection |
| 4 | 工作流模式 | Prompt Chaining、Routing、Parallelization |
| 5 | Agent 设计模式 | ReAct、Orchestrator-Workers、Evaluator-Optimizer |
| 6 | 框架与实现 | 从零实现 vs 框架、上下文工程 |
| 7 | 工程落地 | Guardrails、Sandbox、人在回路（HITL） |
| 8 | 评估与可观测性 | Evals、Tracing、成本监控 |
| 9 | 常见陷阱 | 过度抽象、工具过载、幻觉级联 |
- 📱 PWA 支持：可安装到桌面/手机主屏，离线可用
- 🎴 闪卡复习模式：
flashcard.html卡片翻转 + 间隔重复 - 📚 渐进式学习：
learn.html一次专注一个概念，深入理解 - 🔖 概念索引：
roots.html/root-detail.html按主题快速导航 - 📊 进度追踪：
progress.html基于 localStorage 的已掌握标记 - 🧭 零依赖纯静态：HTML + CSS + 原生 JS，任何静态主机都能跑
- 前端：原生 HTML5 / CSS3 / ES2020 JavaScript，无任何构建步骤
- 样式：自研极简 CSS（
css/minimal.css），主题色#FBBF24（Amber） - 离线：Service Worker（
sw.js）+ Web App Manifest（manifest.json） - 数据：纯 JS 模块
js/wordData.js（45 个概念 × 每个概念 ~2KB 内容） - 持久化：
localStorage（已学习标记、进度、最近访问）
learn-agent/
├── index.html 首页（主题网格 + 9 大主题入口）
├── learn.html 渐进学习页（一次一个概念）
├── flashcard.html 闪卡复习页
├── roots.html 主题索引页
├── root-detail.html 主题详情页
├── progress.html 学习进度页
├── manifest.json PWA Manifest
├── sw.js Service Worker
├── sitemap.xml SEO 站点地图
├── robots.txt 爬虫规则
├── css/
│ └── minimal.css 极简样式
├── js/
│ ├── wordData.js 45 个概念的结构化数据
│ ├── siteConfig.js 站点配置
│ └── storage.js localStorage 封装
└── icons/ PWA 图标
任何静态服务器都能跑，推荐：
# Python 3
python3 -m http.server 8080
# 或 Node.js
npx serve .
# 然后访问 http://localhost:8080npx vercel --prodedgeone pages deploy . -n learn-agent -e production -a global欢迎提 Issue 和 PR，补充概念、修正描述、优化交互都非常欢迎。
MIT © dimayip
💡 配套项目：
- learn-eval-skills —— Agent Skills Evals 35 个核心概念
- learn-harness —— Agent Harness 设计 11 个主题
- learn-aiword —— AI 领域英文术语速成