-
Notifications
You must be signed in to change notification settings - Fork 42
Expand file tree
/
Copy pathindex.html
More file actions
311 lines (288 loc) · 20.5 KB
/
Copy pathindex.html
File metadata and controls
311 lines (288 loc) · 20.5 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
(function(){var s=localStorage.getItem('z2a-theme');var t=s||(window.matchMedia('(prefers-color-scheme:light)').matches?'light':'dark');document.documentElement.setAttribute('data-theme',t);})();
</script>
<meta name="description" content="面向程序员的 Agent 工程教程——从 Agent 基础概念到手写框架到生产部署，完整学习路线。">
<meta name="keywords" content="Agent, LLM, Claude Code, OpenClaw, LangGraph, AI Agent, 教程">
<title>Zero2Agent | 从会用 AI 到会开发 Agent</title>
<link rel="icon" type="image/svg+xml" href="assets/images/logo.svg">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Noto+Sans+SC:wght@400;500;700;800&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="assets/css/style.css?v=7">
</head>
<body>
<div class="page-shell">
<nav class="site-nav">
<div class="nav-inner">
<a href="#" class="brand">
<img src="assets/images/logo.svg" alt="Zero2Agent logo" class="brand-logo">
<span class="brand-text">Zero2Agent</span>
</a>
<button class="nav-toggle" type="button" aria-label="切换导航">
<span></span><span></span><span></span>
</button>
<div class="nav-links">
<a href="learn-agent-basic/index.html">Agent Basic</a>
<a href="learn-openclaw/index.html">OpenClaw</a>
<a href="learn-claude-code/index.html">Claude Code</a>
<div class="nav-dropdown">
<button class="nav-dropdown-trigger" type="button">Zero 系列 ▾</button>
<div class="nav-dropdown-menu">
<a href="https://onefly.top/zero2Agent/" target="_blank" rel="noopener">zero2Agent <span>AI Agent 工程</span></a>
<a href="https://onefly.top/zero2Leetcode/" target="_blank" rel="noopener">zero2Leetcode <span>程序设计算法刷题</span></a>
<a href="https://onefly.top/zero2algo/" target="_blank" rel="noopener">zero2algo <span>算法岗求职</span></a>
<a href="https://onefly.top/zero2PM/" target="_blank" rel="noopener">zero2PM <span>产品经理入门</span></a>
<a href="https://onefly.top/zero2DA/" target="_blank" rel="noopener">zero2DA <span>数据分析入门</span></a>
</div>
</div>
<a class="github-star-btn" href="https://github.com/ranxi2001/zero2Agent" target="_blank" rel="noopener" aria-label="在 GitHub 为 zero2Agent 点 Star">
<svg width="17" height="17" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M12 .7a11.5 11.5 0 0 0-3.64 22.41c.58.11.79-.25.79-.56v-2.22c-3.22.7-3.9-1.37-3.9-1.37-.53-1.34-1.29-1.7-1.29-1.7-1.05-.72.08-.71.08-.71 1.16.08 1.78 1.2 1.78 1.2 1.03 1.77 2.71 1.26 3.37.96.1-.75.4-1.26.73-1.55-2.57-.29-5.27-1.29-5.27-5.69 0-1.26.45-2.29 1.19-3.09-.12-.29-.52-1.47.11-3.05 0 0 .97-.31 3.16 1.18a10.94 10.94 0 0 1 5.76 0c2.19-1.49 3.16-1.18 3.16-1.18.63 1.58.23 2.76.11 3.05.74.8 1.19 1.83 1.19 3.09 0 4.41-2.71 5.39-5.29 5.68.42.36.79 1.06.79 2.14v3.16c0 .31.21.68.8.56A11.5 11.5 0 0 0 12 .7Z"/></svg>
<span>Star</span>
<span class="github-star-count" data-github-stars aria-label="GitHub Star 数量">—</span>
</a>
<button class="theme-toggle" id="theme-toggle" type="button" aria-label="切换主题" title="切换主题">
<svg class="icon-sun" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
<svg class="icon-moon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg>
</button>
<a href="learn-agent-basic/01-what-is-an-agent/index.html">开始阅读 →</a>
</div>
</div>
</nav>
<!-- Hero -->
<header class="hero">
<div class="hero-inner">
<section class="hero-copy">
<div class="eyebrow">🎯 从零开始构建 AI Agent · 面向开发者的工程实战教程</div>
<h1>从<span>会用 AI</span><br>到<span>会开发 Agent</span></h1>
<p>
面向程序员的 Agent 工程教程。不堆框架名词，不停留在 Demo——从核心机制出发，
覆盖 Agent 基础、手写框架、Code Agent 架构，最终落到真实业务项目。
</p>
<div class="hero-actions">
<a class="button button-secondary" href="learn-agent-basic/01-what-is-an-agent/index.html">从第一篇开始读</a>
<a class="button button-primary" href="learn-agent-interview/index.html">大厂面试真题系列</a>
</div>
<ul class="hero-meta">
<li>
<strong>129</strong>
<span>已完成文章</span>
</li>
<li>
<strong>12</strong>
<span>完整模块</span>
</li>
<li>
<strong>持续更新</strong>
<span>Agent 应用实战</span>
</li>
</ul>
</section>
</div>
<div class="hero-decoration">
<div class="hero-card">
<div class="terminal">
<div class="terminal-top">
<span class="terminal-dot"></span>
<span class="terminal-dot"></span>
<span class="terminal-dot"></span>
<span class="terminal-title">agent.py</span>
</div>
<div class="terminal-body"><div><span style="color:#c084fc">class</span> <span style="color:#60a5fa">Agent</span>:</div><div> <span style="color:#c084fc">def</span> <span style="color:#60a5fa">run</span>(<span style="color:#f59e0b">self</span>, goal: <span style="color:#60a5fa">str</span>):</div><div> <span style="color:#4a4a5a"># Agent Loop 核心</span></div><div> <span style="color:#c084fc">while not</span> self.done:</div><div> action = self.<span style="color:#34d399">think</span>(goal)</div><div> result = self.<span style="color:#34d399">use_tool</span>(action)</div><div> self.memory.<span style="color:#34d399">add</span>(result)</div><div> <span style="color:#c084fc">return</span> self.<span style="color:#34d399">output</span>()</div></div>
</div>
</div>
</div>
</header>
<!-- Modules -->
<section class="section" id="roadmap">
<div class="section-inner">
<div class="section-heading">
<h2>学习路线</h2>
<p>十三个模块按工程认知深度递进，从概念理解到框架手写、Harness 运行时和多 Agent 系统，最终落到真实业务项目。</p>
</div>
<div class="roadmap-grid">
<a class="roadmap-card" href="learn-agent-basic/index.html">
<div class="roadmap-card-head">
<div class="roadmap-index">01</div>
<span class="module-badge module-badge--done">17 篇 · 完成</span>
</div>
<h3>learn-agent-basic</h3>
<p>Agent 是什么、模型 API 输入输出、工具调用协议、Context / Memory、Loop / Infra，以及单 Agent vs 多 Agent 的边界。用可运行实验建立工程认知。</p>
</a>
<a class="roadmap-card" href="learn-langgraph/index.html">
<div class="roadmap-card-head">
<div class="roadmap-index">02</div>
<span class="module-badge module-badge--done">7 篇 · 完成</span>
</div>
<h3>learn-langgraph</h3>
<p>Graph 状态机、条件分支、并行 Fan-out/Fan-in、Prompt Chaining、接入 OpenAI 与 HuggingFace。从状态图角度理解可维护 Agent 系统的搭建方式。</p>
</a>
<a class="roadmap-card" href="learn-sdk-frameworks/index.html">
<div class="roadmap-card-head">
<div class="roadmap-index">03</div>
<span class="module-badge module-badge--done">4 篇 · 完成</span>
</div>
<h3>learn-sdk-frameworks</h3>
<p>OpenAI Agents SDK、Google Gemini SDK、Claude Anthropic SDK 核心用法精讲，三大原厂 SDK 横向对比与选型建议。</p>
</a>
<a class="roadmap-card" href="learn-agent-survey/index.html">
<div class="roadmap-card-head">
<div class="roadmap-index">04</div>
<span class="module-badge module-badge--done">13 篇 · 完成</span>
</div>
<h3>learn-agent-survey</h3>
<p>13 个框架横向调研：AgentScope、Mastra、Semantic Kernel、Eino、DeerFlow、LangChain、Google ADK、AutoGen、Vercel AI SDK 等。</p>
</a>
<a class="roadmap-card" href="learn-openclaw/index.html">
<div class="roadmap-card-head">
<div class="roadmap-index">05</div>
<span class="module-badge module-badge--done">9 篇 · 完成</span>
</div>
<h3>learn-openclaw</h3>
<p>60 行核心框架，从 Node → Workflow → Chatbot → Agent 完整推导。RAG、Tool/MCP/Skill、pi-mono 架构解析，以及部署和面试准备。</p>
</a>
<a class="roadmap-card" href="learn-claude-code/index.html">
<div class="roadmap-card-head">
<div class="roadmap-index">06</div>
<span class="module-badge module-badge--done">12 篇 · 完成</span>
</div>
<h3>learn-claude-code</h3>
<p>12 节课手写 Coding Agent。从 30 行 Loop 起步，逐步叠加 Tool Dispatch、Subagent、Context Compact、Task DAG、多 Agent Teams、Worktree 隔离。</p>
</a>
<a class="roadmap-card" href="learn-deepseek-harness/index.html">
<div class="roadmap-card-head">
<div class="roadmap-index">07</div>
<span class="module-badge module-badge--done">13 篇 · 完成</span>
</div>
<h3>learn-deepseek-harness</h3>
<p>从设计理念拆解一个无特权内核、可重新拼装的 Agent Runtime：插件组合、事件事实源、控制平面、安全边界与实验性自进化。</p>
</a>
<a class="roadmap-card" href="learn-agent-training/index.html">
<div class="roadmap-card-head">
<div class="roadmap-index">08</div>
<span class="module-badge module-badge--done">7 篇 · 完成</span>
</div>
<h3>learn-agent-training</h3>
<p>Agent 场景下的 SFT、RLHF 与训练环境工程。覆盖轨迹数据、Loss Mask、GRPO vs PPO、仿真沙箱、评估门禁、数据回流与部署。</p>
</a>
<a class="roadmap-card" href="learn-agent-practice/index.html">
<div class="roadmap-card-head">
<div class="roadmap-index">09</div>
<span class="module-badge module-badge--wip">5 篇 · 进行中</span>
</div>
<h3>learn-agent-practice</h3>
<p>从 Vibe Coding 和 AI Coding 面试进入 Context、Loop、Harness Engineering 日常实战，再把失败轨迹转化为可验证、可回滚的 Auto Harness 改进闭环。</p>
</a>
<a class="roadmap-card" href="learn-pi/index.html">
<div class="roadmap-card-head">
<div class="roadmap-index">10</div>
<span class="module-badge module-badge--done">8 篇 · 完成</span>
</div>
<h3>learn-pi</h3>
<p>从可验证的工具闭环出发，动手理解 Provider、扩展、MCP、安全边界与可恢复的树形 Session Runtime。</p>
</a>
<a class="roadmap-card" href="learn-codex/index.html">
<div class="roadmap-card-head">
<div class="roadmap-index">11</div>
<span class="module-badge module-badge--done">7 篇 · 完成</span>
</div>
<h3>learn-codex</h3>
<p>OpenAI 终端 Coding Agent：Rust 架构、TOML 配置、平台原生沙箱、MCP、SDK 与多 Harness 选型。</p>
</a>
<a class="roadmap-card" href="learn-agent-interview/index.html">
<div class="roadmap-card-head">
<div class="roadmap-index">12</div>
<span class="module-badge module-badge--done">17 篇 · 完成</span>
</div>
<h3>learn-agent-interview</h3>
<p>Agent 岗位高频面试题按 17 个维度拆解，覆盖 Agent Infra、AI Infra、架构、工具、容错与上下文，每道题对比新手答 vs 高手答。</p>
</a>
<a class="roadmap-card" href="final-project/index.html">
<div class="roadmap-card-head">
<div class="roadmap-index">13</div>
<span class="module-badge module-badge--done">12 篇 · 完成</span>
</div>
<h3>final-project</h3>
<p>OfferPilot 面试诊断 Agent 完整实战：从 PRD、查询引擎、知识库和权限，到 Sub-agent、语音、部署与 Web UI。</p>
</a>
</div>
</div>
</section>
<!-- Why this project -->
<section class="section" id="audience">
<div class="section-inner">
<div class="section-heading">
<h2>为什么做这个项目</h2>
<p>很多人已经会用 AI 工具，但一旦开始自己做 Agent，问题就来了。</p>
</div>
<div class="intro-grid">
<article class="intro-card">
<h3>不清楚 Agent 和 Workflow 的边界</h3>
<p>调 API、搭工作流、接 LangChain——能跑 Demo，但说不清楚为什么 Agent 比 Workflow 多了什么，以及什么时候该用哪个。</p>
</article>
<article class="intro-card">
<h3>Demo 能跑，落地就不稳定</h3>
<p>Tool Calling 偶尔失败、上下文窗口很快满、多轮任务容易漂移——这些不是调 Prompt 能解决的，是系统设计问题。</p>
</article>
<article class="intro-card">
<h3>框架太重，不知道里面做了什么</h3>
<p>LangChain / Dify 上手快，但出问题时翻三层抽象。真正上生产的 Coding Agent（Claude Code、Cursor）都用轻量级自定义方案。</p>
</article>
</div>
</div>
</section>
<!-- Stats bar -->
<section class="section stats-section">
<div class="section-inner">
<div class="stats-bar">
<div class="stats-item">
<span class="stats-value">129</span>
<span class="stats-label">已发布文章</span>
</div>
<div class="stats-divider"></div>
<div class="stats-item">
<span class="stats-value">12</span>
<span class="stats-label">完整模块</span>
</div>
<div class="stats-divider"></div>
<div class="stats-item">
<span class="stats-value">60</span>
<span class="stats-label">行核心框架代码</span>
</div>
<div class="stats-divider"></div>
<div class="stats-item">
<span class="stats-value stats-value--mono">s01→s12</span>
<span class="stats-label">Claude Code 渐进课程</span>
</div>
</div>
</div>
</section>
<footer class="site-footer">
<div class="footer-inner footer-inner--center">
<span class="footer-desc">Zero2Agent · 从零开始构建 AI Agent · Built for developers.</span>
<div class="footer-right">
<a href="https://onefly.top" target="_blank" rel="noopener" class="footer-link">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/>
<path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
</svg>
Onefly
</a>
<a href="https://github.com/ranxi2001/zero2Agent" target="_blank" rel="noopener" class="footer-link">
<svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0 1 12 6.844a9.59 9.59 0 0 1 2.504.337c1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.02 10.02 0 0 0 22 12.017C22 6.484 17.522 2 12 2z"/>
</svg>
GitHub
</a>
</div>
</div>
</footer>
</div>
<script src="assets/js/app.js?v=10"></script>
<script src="assets/js/github-stars.js?v=1"></script>
</body>
</html>