-
Notifications
You must be signed in to change notification settings - Fork 5
Expand file tree
/
Copy pathclaude-code-tutorial.html
More file actions
2079 lines (1935 loc) · 130 KB
/
claude-code-tutorial.html
File metadata and controls
2079 lines (1935 loc) · 130 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
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Claude Code 学习教程 — 从入门到精通</title>
<link rel="stylesheet" href="claude-code-tutorial.css">
</head>
<body>
<div class="progress-bar"><div class="progress-fill" id="progressFill"></div></div>
<button class="sb-toggle" id="sbToggle" onclick="toggleSidebar()">☰</button>
<button class="scroll-top" id="scrollTopBtn" onclick="window.scrollTo({top:0})">↑</button>
<div class="app">
<!-- ========== SIDEBAR ========== -->
<aside class="sidebar" id="sidebar">
<div class="sb-head"><h2>📖 Claude Code 教程</h2></div>
<div class="search-wrap"><input class="search-input" id="searchInput" placeholder="🔍 搜索内容..." oninput="filterNav(this.value)"></div>
<nav class="sb-nav" id="sbNav">
<div class="nav-sec">快速开始</div>
<div class="nav-item active" data-target="hero"><span class="nav-ic">🏠</span> 首页概览</div>
<div class="nav-item" data-target="install"><span class="nav-ic">⬇️</span> 安装与环境</div>
<div class="nav-item" data-target="tool-comparison"><span class="nav-ic">📊</span> 三大工具对比</div>
<div class="nav-sec">🌱 入门篇</div>
<div class="nav-item" data-target="basic-commands"><span class="nav-ic">💬</span> 基础命令</div>
<div class="nav-item" data-target="first-task"><span class="nav-ic">🚀</span> 第一个任务</div>
<div class="nav-item" data-target="slash-cmds"><span class="nav-ic">⚡</span> 斜杠命令</div>
<div class="nav-item" data-target="file-ref"><span class="nav-ic">📎</span> 文件引用语法</div>
<div class="nav-sec">🔧 中级篇</div>
<div class="nav-item" data-target="cli-flags"><span class="nav-ic">⚙️</span> CLI 高级标志</div>
<div class="nav-item" data-target="pipe-mode"><span class="nav-ic">🔌</span> 管道与脚本</div>
<div class="nav-item" data-target="claudemd"><span class="nav-ic">📝</span> CLAUDE.md 配置</div>
<div class="nav-item" data-target="git-flow"><span class="nav-ic">🔀</span> Git 工作流</div>
<div class="nav-item" data-target="multi-session"><span class="nav-ic">🔄</span> 多会话管理</div>
<div class="nav-sec">🚀 高级篇</div>
<div class="nav-item" data-target="hooks"><span class="nav-ic">🪝</span> Hooks 钩子系统</div>
<div class="nav-item" data-target="skills"><span class="nav-ic">🎯</span> 技能 (Skills)</div>
<div class="nav-item" data-target="mcp"><span class="nav-ic">🌐</span> MCP 集成</div>
<div class="nav-item" data-target="multi-agent"><span class="nav-ic">🤖</span> 多代理协作</div>
<div class="nav-item" data-target="ci-cd"><span class="nav-ic">🚢</span> CI/CD 自动化</div>
<div class="nav-item" data-target="permissions"><span class="nav-ic">🔐</span> 权限与安全模式</div>
<div class="nav-item" data-target="sub-agents"><span class="nav-ic">🧩</span> 子代理系统</div>
<div class="nav-item" data-target="memory"><span class="nav-ic">🧠</span> 记忆系统</div>
<div class="nav-item" data-target="channels"><span class="nav-ic">💬</span> 即时通讯集成</div>
<div class="nav-item" data-target="desktop"><span class="nav-ic">🖥️</span> 桌面端应用</div>
<div class="nav-item" data-target="top-skills"><span class="nav-ic">🏆</span> 热门 Skills</div>
<div class="nav-item" data-target="top-plugins"><span class="nav-ic">🔌</span> 热门插件</div>
<div class="nav-sec">附录</div>
<div class="nav-item" data-target="cheatsheet"><span class="nav-ic">📋</span> 速查表</div>
<div class="nav-item" data-target="faq"><span class="nav-ic">❓</span> 常见问题</div>
</nav>
</aside>
<!-- ========== MAIN ========== -->
<div class="main">
<!-- Hero -->
<section class="hero" id="hero">
<div class="hero-badge">✨ 2025 最新版 · 持续更新</div>
<h1>Claude Code 学习教程</h1>
<p>从零开始掌握 Anthropic 推出的 AI 编程助手 Claude Code，涵盖入门、中级、高级用法，配合实际示例让你快速上手。</p>
<!-- SVG: Architecture Overview -->
<div class="svg-wrap" style="margin-top:24px">
<svg viewBox="0 0 700 200" xmlns="http://www.w3.org/2000/svg" font-family="system-ui,sans-serif">
<!-- Claude Core -->
<rect x="240" y="60" width="220" height="80" rx="12" fill="#1c2333" stroke="#d97706" stroke-width="2"/>
<text x="350" y="95" text-anchor="middle" fill="#f59e0b" font-size="16" font-weight="700">Claude Code</text>
<text x="350" y="118" text-anchor="middle" fill="#8b949e" font-size="12">AI 编程引擎</text>
<!-- Left: Input -->
<rect x="20" y="55" width="160" height="90" rx="10" fill="#161b22" stroke="#30363d"/>
<text x="100" y="88" text-anchor="middle" fill="#58a6ff" font-size="13" font-weight="600">开发者输入</text>
<text x="100" y="108" text-anchor="middle" fill="#8b949e" font-size="11">自然语言 / CLI 命令</text>
<line x1="180" y1="100" x2="238" y2="100" stroke="#58a6ff" stroke-width="2" marker-end="url(#ah)"/>
<!-- Right: Output -->
<rect x="520" y="55" width="160" height="90" rx="10" fill="#161b22" stroke="#30363d"/>
<text x="600" y="88" text-anchor="middle" fill="#3fb950" font-size="13" font-weight="600">代码输出</text>
<text x="600" y="108" text-anchor="middle" fill="#8b949e" font-size="11">文件 / 命令 / Git</text>
<line x1="462" y1="100" x2="518" y2="100" stroke="#3fb950" stroke-width="2" marker-end="url(#ah2)"/>
<!-- Bottom: Tools -->
<rect x="270" y="165" width="160" height="30" rx="6" fill="#161b22" stroke="#30363d"/>
<text x="350" y="185" text-anchor="middle" fill="#bc8cff" font-size="11">MCP · Hooks · Skills</text>
<line x1="350" y1="142" x2="350" y2="163" stroke="#bc8cff" stroke-width="1.5" stroke-dasharray="4"/>
<defs>
<marker id="ah" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto"><polygon points="0,0 8,3 0,6" fill="#58a6ff"/></marker>
<marker id="ah2" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto"><polygon points="0,0 8,3 0,6" fill="#3fb950"/></marker>
</defs>
</svg>
<div class="svg-caption">Claude Code 核心架构：输入 → AI 引擎处理 → 输出，底层通过 MCP/Hooks/Skills 扩展</div>
</div>
</section>
<div class="content">
<!-- ===================== INSTALL ===================== -->
<section class="section" id="install">
<h2 class="section-title">⬇️ 安装与环境 <span class="badge badge-beginner">入门</span></h2>
<div class="sub">
<h3>安装 Claude Code</h3>
<p>支持 macOS、Linux、WSL 和 Windows（PowerShell）。推荐使用终端 CLI 方式：</p>
<div class="tabs">
<div class="tab-bar">
<button class="tab-btn active" onclick="switchTab(this,'install')">macOS / Linux</button>
<button class="tab-btn" onclick="switchTab(this,'install')">Windows</button>
<button class="tab-btn" onclick="switchTab(this,'install')">npm</button>
</div>
<div class="tab-panel active" data-tab-group="install">
<div class="code-block"><div class="code-header"><span class="lang">bash</span><button class="copy-btn" onclick="copyCode(this)">复制</button></div><div class="code-body">curl -fsSL https://claude.ai/install.sh | bash</div></div>
</div>
<div class="tab-panel" data-tab-group="install">
<div class="code-block"><div class="code-header"><span class="lang">powershell</span><button class="copy-btn" onclick="copyCode(this)">复制</button></div><div class="code-body">irm https://claude.ai/install.ps1 | iex</div></div>
</div>
<div class="tab-panel" data-tab-group="install">
<div class="code-block"><div class="code-header"><span class="lang">bash</span><button class="copy-btn" onclick="copyCode(this)">复制</button></div><div class="code-body">npm install -g @anthropic-ai/claude-code</div></div>
</div>
</div>
</div>
<div class="sub">
<h3>启动与登录</h3>
<div class="code-block"><div class="code-header"><span class="lang">bash</span><button class="copy-btn" onclick="copyCode(this)">复制</button></div><div class="code-body"># 进入你的项目目录
cd my-project
# 启动 Claude Code（首次使用需登录）
claude</div></div>
<div class="tip"><strong>💡 提示：</strong>也可以在 VS Code 扩展商店搜索 "Claude Code" 安装插件，或下载 Desktop 桌面版。</div>
</div>
</section>
<!-- ===================== TOOL COMPARISON ===================== -->
<section class="section" id="tool-comparison">
<h2 class="section-title">📊 三大终端 AI 编程工具对比 <span class="badge badge-beginner">入门</span></h2>
<div class="sub">
<h3>为什么要对比？</h3>
<p>2025-2026 年，终端 AI 编程工具爆发式增长。本文重点对比三款最具代表性的工具：<strong>Claude Code</strong>（Anthropic）、<strong>OpenAI Codex CLI</strong>（OpenAI）和 <strong>OpenCode</strong>（开源社区）。它们各有特色，适合不同的开发场景。了解它们的区别，能帮你做出最适合自己的选择。</p>
<!-- SVG: Three tools overview -->
<div class="svg-wrap">
<svg viewBox="0 0 700 180" xmlns="http://www.w3.org/2000/svg" font-family="system-ui,sans-serif">
<!-- Claude Code -->
<rect x="20" y="20" width="200" height="140" rx="12" fill="rgba(217,119,6,.08)" stroke="#d97706" stroke-width="2"/>
<text x="120" y="52" text-anchor="middle" fill="#f59e0b" font-size="15" font-weight="700">Claude Code</text>
<text x="120" y="72" text-anchor="middle" fill="#8b949e" font-size="10">Anthropic · 2025.2</text>
<rect x="40" y="85" width="160" height="22" rx="5" fill="#161b22" stroke="#d97706" stroke-width="1"/>
<text x="120" y="100" text-anchor="middle" fill="#f59e0b" font-size="10">🔥 深度推理 · 准确优先</text>
<rect x="40" y="113" width="160" height="22" rx="5" fill="#161b22" stroke="#d97706" stroke-width="1"/>
<text x="120" y="128" text-anchor="middle" fill="#d97706" font-size="10">SWE-bench: 80.8%</text>
<!-- OpenAI Codex -->
<rect x="250" y="20" width="200" height="140" rx="12" fill="rgba(88,166,255,.08)" stroke="#58a6ff" stroke-width="2"/>
<text x="350" y="52" text-anchor="middle" fill="#58a6ff" font-size="15" font-weight="700">OpenAI Codex CLI</text>
<text x="350" y="72" text-anchor="middle" fill="#8b949e" font-size="10">OpenAI · 2025.4</text>
<rect x="270" y="85" width="160" height="22" rx="5" fill="#161b22" stroke="#58a6ff" stroke-width="1"/>
<text x="350" y="100" text-anchor="middle" fill="#58a6ff" font-size="10">⚡ 速度优先 · 开源 CLI</text>
<rect x="270" y="113" width="160" height="22" rx="5" fill="#161b22" stroke="#58a6ff" stroke-width="1"/>
<text x="350" y="128" text-anchor="middle" fill="#58a6ff" font-size="10">SWE-bench: 64.7%</text>
<!-- OpenCode -->
<rect x="480" y="20" width="200" height="140" rx="12" fill="rgba(63,185,80,.08)" stroke="#3fb950" stroke-width="2"/>
<text x="580" y="52" text-anchor="middle" fill="#3fb950" font-size="15" font-weight="700">OpenCode</text>
<text x="580" y="72" text-anchor="middle" fill="#8b949e" font-size="10">开源社区 · 2025</text>
<rect x="500" y="85" width="160" height="22" rx="5" fill="#161b22" stroke="#3fb950" stroke-width="1"/>
<text x="580" y="100" text-anchor="middle" fill="#3fb950" font-size="10">🆓 多模型 · 完全免费</text>
<rect x="500" y="113" width="160" height="22" rx="5" fill="#161b22" stroke="#3fb950" stroke-width="1"/>
<text x="580" y="128" text-anchor="middle" fill="#3fb950" font-size="10">已归档 → Crush</text>
</svg>
<div class="svg-caption">三款主流终端 AI 编程工具：各自擅长的领域不同</div>
</div>
</div>
<div class="sub">
<h3>全面对比总览</h3>
<div class="tbl-wrap"><table>
<thead><tr><th>维度</th><th>Claude Code</th><th>OpenAI Codex CLI</th><th>OpenCode</th></tr></thead>
<tbody>
<tr><td><strong>开发商</strong></td><td>Anthropic</td><td>OpenAI</td><td>开源社区（Charmbracelet）</td></tr>
<tr><td><strong>发布时间</strong></td><td>2025 年 2 月</td><td>2025 年 4 月</td><td>2025 年初</td></tr>
<tr><td><strong>许可证</strong></td><td>闭源（专有）</td><td>开源（Apache 2.0）</td><td>开源（MIT）</td></tr>
<tr><td><strong>底层模型</strong></td><td>Claude Opus 4.6 / Sonnet 4.6</td><td>GPT-5.4 / GPT-5.3-Codex</td><td>多模型（Claude/GPT/Gemini 等）</td></tr>
<tr><td><strong>工作流哲学</strong></td><td>交互式 · 开发者在环</td><td>异步委派 · 事后审查</td><td>轻量交互 · 多模型切换</td></tr>
<tr><td><strong>运行环境</strong></td><td>本地优先（CLI/IDE/Desktop）</td><td>云端优先 + CLI</td><td>纯本地终端</td></tr>
<tr><td><strong>安装方式</strong></td><td><code>npm install -g @anthropic-ai/claude-code</code></td><td><code>npm install -g @openai/codex</code></td><td><code>brew install opencode-ai/tap/opencode</code></td></tr>
</tbody>
</table></div>
</div>
<div class="sub">
<h3>价格对比（2026 年 3 月）</h3>
<div class="tbl-wrap"><table>
<thead><tr><th>方案</th><th>Claude Code</th><th>OpenAI Codex</th><th>OpenCode</th></tr></thead>
<tbody>
<tr>
<td><strong>入门</strong></td>
<td>$20/月（Pro）</td>
<td>$20/月（ChatGPT Plus）</td>
<td><strong>免费</strong>（开源）</td>
</tr>
<tr>
<td><strong>进阶</strong></td>
<td>$100/月（Max 5x）</td>
<td>$200/月（ChatGPT Pro）</td>
<td>免费 + 自付 API 费用</td>
</tr>
<tr>
<td><strong>重度</strong></td>
<td>$200/月（Max 20x）</td>
<td>Business（定制价格）</td>
<td>免费 + 自付 API 费用</td>
</tr>
<tr>
<td><strong>团队</strong></td>
<td>$150/用户/月（Teams）</td>
<td>Enterprise（定制价格）</td>
<td>免费（自部署）</td>
</tr>
<tr>
<td><strong>API 计费</strong></td>
<td>Opus $5/$25 · Sonnet $3/$15（每百万 Token）</td>
<td>约 $0.01-0.12/1K Token</td>
<td>取决于所选模型</td>
</tr>
</tbody>
</table></div>
<div class="tip"><strong>💡 实际花费提示：</strong>Claude Code Pro（$20/月）可能产生超额费，重度使用时实际花费可能超 $100/月。OpenAI Codex 按「信用点」计费（5小时窗口滚动刷新），Plus 计划每 5 小时约 33-168 条消息。OpenCode 本身免费，但你需自行支付各模型的 API 费用。</div>
</div>
<div class="sub">
<h3>核心能力 Benchmarks</h3>
<div class="tbl-wrap"><table>
<thead><tr><th>基准测试</th><th>Claude Code</th><th>OpenAI Codex</th><th>说明</th></tr></thead>
<tbody>
<tr>
<td><strong>SWE-bench Verified</strong></td>
<td><span style="color:#3fb950;font-weight:700">80.8%</span></td>
<td>64.7%</td>
<td>真实 GitHub Issue 修复能力，越高越好</td>
</tr>
<tr>
<td><strong>Terminal-Bench 2.0</strong></td>
<td>65.4%</td>
<td><span style="color:#3fb950;font-weight:700">77.3%</span></td>
<td>终端调试能力，Codex 更擅长</td>
</tr>
<tr>
<td><strong>Token 效率</strong></td>
<td>标准（深度推理消耗大）</td>
<td><span style="color:#3fb950;font-weight:700">约 3x 更省</span></td>
<td>完成相同任务 Codex 约用 1/3 的 Token</td>
</tr>
<tr>
<td><strong>上下文窗口</strong></td>
<td>200K Token</td>
<td>128K Token</td>
<td>Claude Code 可同时阅读更多文件</td>
</tr>
</tbody>
</table></div>
</div>
<div class="sub">
<h3>各工具深度点评</h3>
<div class="accordion">
<div class="acc-item open">
<div class="acc-head" onclick="toggleAcc(this)"><span>🟠 Claude Code — 深度推理之王</span><span class="arrow">▶</span></div>
<div class="acc-body"><div class="acc-inner">
<div class="tbl-wrap"><table>
<thead><tr><th>维度</th><th>评价</th></tr></thead>
<tbody>
<tr><td><span style="color:#3fb950">✅ 优势</span></td><td>
<ul style="margin:0;padding-left:18px">
<li><strong>最强的代码理解力</strong>：SWE-bench 80.8% 遥遥领先，擅长复杂多文件重构和架构级任务</li>
<li><strong>超长上下文</strong>：200K Token 窗口，可同时理解整个大型代码库</li>
<li><strong>丰富的生态</strong>：Skills 系统、Hooks 钩子、MCP 协议、插件市场，扩展性极强</li>
<li><strong>精细化权限控制</strong>：6 种权限模式 + allow/deny 规则，安全性优秀</li>
<li><strong>多平台支持</strong>：CLI、VS Code、JetBrains、Desktop、Slack、Web 一应俱全</li>
<li><strong>自动记忆系统</strong>：CLAUDE.md + Auto Memory，跨会话记住项目规范</li>
</ul>
</td></tr>
<tr><td><span style="color:#f85149">❌ 不足</span></td><td>
<ul style="margin:0;padding-left:18px">
<li><strong>价格较高</strong>：深度推理消耗大量 Token，Pro 用户经常触发超额费</li>
<li><strong>闭源</strong>：代码不开源，无法自行审查或修改内部实现</li>
<li><strong>官方账号依赖</strong>：Desktop 只支持 Anthropic 官方 OAuth 登录</li>
<li><strong>终端调试偏弱</strong>：Terminal-Bench 得分低于 Codex</li>
</ul>
</td></tr>
<tr><td><span style="color:#d97706">🎯 适合谁</span></td><td>复杂架构设计、大型代码库重构、探索性编程、重视代码质量胜过成本的开发者</td></tr>
</tbody>
</table></div>
</div></div>
</div>
<div class="acc-item">
<div class="acc-head" onclick="toggleAcc(this)"><span>🔵 OpenAI Codex CLI — 效率与速度之王</span><span class="arrow">▶</span></div>
<div class="acc-body"><div class="acc-inner">
<div class="tbl-wrap"><table>
<thead><tr><th>维度</th><th>评价</th></tr></thead>
<tbody>
<tr><td><span style="color:#3fb950">✅ 优势</span></td><td>
<ul style="margin:0;padding-left:18px">
<li><strong>极速高效</strong>：Token 效率约为 Claude Code 的 3 倍，响应速度更快</li>
<li><strong>终端调试强</strong>：Terminal-Bench 77.3%，擅长定位和修复运行时错误</li>
<li><strong>开源 CLI</strong>：代码完全公开（Apache 2.0），可审查、修改、二次开发</li>
<li><strong>异步工作流</strong>：支持「定义任务 → 云端执行 → 审查结果」的委派模式</li>
<li><strong>GitHub 集成强</strong>：云端任务容器化执行，自动生成清晰的 PR</li>
<li><strong>生态丰富</strong>：ChatGPT 生态无缝衔接，可同时使用对话 AI 和编程代理</li>
</ul>
</td></tr>
<tr><td><span style="color:#f85149">❌ 不足</span></td><td>
<ul style="margin:0;padding-left:18px">
<li><strong>复杂推理偏弱</strong>：SWE-bench 64.7%，大型重构和架构任务不如 Claude</li>
<li><strong>上下文窗口小</strong>：128K Token，处理超大代码库时不如 Claude</li>
<li><strong>信用点限制</strong>：5 小时滚动窗口刷新，重度使用可能不够</li>
<li><strong>云端依赖</strong>：部分功能（云端任务、代码审查）需要 Business 以上计划</li>
<li><strong>可定制性有限</strong>：缺少 Claude 那样的 Skills/Hooks 系统</li>
</ul>
</td></tr>
<tr><td><span style="color:#d97706">🎯 适合谁</span></td><td>Bug 修复、终端调试、处理定义明确的工单、追求速度和成本效益的开发者</td></tr>
</tbody>
</table></div>
</div></div>
</div>
<div class="acc-item">
<div class="acc-head" onclick="toggleAcc(this)"><span>🟢 OpenCode — 开源多模型瑞士军刀</span><span class="arrow">▶</span></div>
<div class="acc-body"><div class="acc-inner">
<div class="tbl-wrap"><table>
<thead><tr><th>维度</th><th>评价</th></tr></thead>
<tbody>
<tr><td><span style="color:#3fb950">✅ 优势</span></td><td>
<ul style="margin:0;padding-left:18px">
<li><strong>完全免费开源</strong>：MIT 许可证，工具本身不收任何费用</li>
<li><strong>多模型自由切换</strong>：支持 Claude、GPT、Gemini、Copilot、Bedrock、Groq、Azure 等</li>
<li><strong>精美 TUI 界面</strong>：基于 Bubble Tea 构建，终端体验流畅美观</li>
<li><strong>轻量级</strong>：Go 语言编写，启动快、资源占用低</li>
<li><strong>MCP 支持</strong>：可扩展外部工具，支持 LSP 语言服务</li>
<li><strong>无厂商锁定</strong>：不被任何单一 AI 厂商绑定，随时切换模型</li>
</ul>
</td></tr>
<tr><td><span style="color:#f85149">❌ 不足</span></td><td>
<ul style="margin:0;padding-left:18px">
<li><strong>项目已归档</strong>：2025 年 9 月已归档，迁移至 <a href="https://github.com/charmbracelet/crush" target="_blank" style="color:#58a6ff">Crush</a>（仍处于早期开发阶段）</li>
<li><strong>功能较基础</strong>：缺少 Hooks、Skills、子代理等高级功能</li>
<li><strong>无官方支持</strong>：社区驱动，出问题需自行排查或依赖社区</li>
<li><strong>API 费用自理</strong>：虽然工具免费，但使用 Claude/GPT 等模型仍需付费</li>
<li><strong>生态不成熟</strong>：插件和扩展远不如 Claude Code 丰富</li>
</ul>
</td></tr>
<tr><td><span style="color:#d97706">🎯 适合谁</span></td><td>预算有限的学生/开发者、需要多模型切换、偏好开源工具、喜欢终端 TUI 体验的用户</td></tr>
</tbody>
</table></div>
</div></div>
</div>
</div>
</div>
<div class="sub">
<h3>功能矩阵对比</h3>
<div class="tbl-wrap"><table>
<thead><tr><th>功能</th><th>Claude Code</th><th>Codex CLI</th><th>OpenCode</th></tr></thead>
<tbody>
<tr><td>文件读写与编辑</td><td>✅</td><td>✅</td><td>✅</td></tr>
<tr><td>Shell 命令执行</td><td>✅</td><td>✅</td><td>✅</td></tr>
<tr><td>MCP 协议支持</td><td>✅ 内置</td><td>✅</td><td>✅</td></tr>
<tr><td>Git 深度集成</td><td>✅ Worktree/PR</td><td>✅ 云端 PR</td><td>⚠️ 基础</td></tr>
<tr><td>Hooks 钩子系统</td><td>✅ 4 种类型</td><td>⚠️ 有限</td><td>❌</td></tr>
<tr><td>Skills 技能系统</td><td>✅ 丰富</td><td>❌</td><td>⚠️ 自定义命令</td></tr>
<tr><td>子代理/多代理</td><td>✅ Task + Teams</td><td>⚠️ 多 Agent</td><td>❌</td></tr>
<tr><td>CLAUDE.md / 项目配置</td><td>✅ 多层级</td><td>⚠️ codex.md</td><td>⚠️ opencode.json</td></tr>
<tr><td>自动记忆</td><td>✅ Auto Memory</td><td>❌</td><td>⚠️ 会话保存</td></tr>
<tr><td>权限管理</td><td>✅ 6 种模式</td><td>✅ 3 种级别</td><td>⚠️ 基础</td></tr>
<tr><td>插件市场</td><td>✅ 官方市场</td><td>❌</td><td>❌</td></tr>
<tr><td>IDE 插件</td><td>✅ VS Code + JetBrains</td><td>✅ VS Code + JetBrains</td><td>❌</td></tr>
<tr><td>桌面应用</td><td>✅ Claude Desktop</td><td>✅ macOS App</td><td>❌</td></tr>
<tr><td>即时通讯集成</td><td>✅ Telegram/Discord 等</td><td>❌</td><td>❌</td></tr>
<tr><td>管道/脚本模式</td><td>✅ 完整支持</td><td>✅</td><td>✅ -p 模式</td></tr>
<tr><td>CI/CD 集成</td><td>✅ GitHub Actions</td><td>✅ GitHub Actions</td><td>⚠️ 需自行配置</td></tr>
</tbody>
</table></div>
</div>
<div class="sub">
<h3>如何选择？</h3>
<!-- SVG: Decision flow -->
<div class="svg-wrap">
<svg viewBox="0 0 700 240" xmlns="http://www.w3.org/2000/svg" font-family="system-ui,sans-serif">
<!-- Start -->
<rect x="240" y="5" width="220" height="36" rx="18" fill="rgba(217,119,6,.12)" stroke="#d97706" stroke-width="1.5"/>
<text x="350" y="28" text-anchor="middle" fill="#f59e0b" font-size="12" font-weight="700">你需要什么？</text>
<!-- Branch 1 -->
<line x1="300" y1="41" x2="120" y2="75" stroke="#d97706" stroke-width="1.5"/>
<rect x="20" y="75" width="200" height="40" rx="8" fill="rgba(217,119,6,.06)" stroke="#d97706"/>
<text x="120" y="100" text-anchor="middle" fill="#e6edf3" font-size="11">复杂重构 · 架构设计</text>
<line x1="120" y1="115" x2="120" y2="140" stroke="#d97706" stroke-width="1.5"/>
<rect x="30" y="140" width="180" height="35" rx="8" fill="rgba(217,119,6,.15)" stroke="#f59e0b" stroke-width="2"/>
<text x="120" y="162" text-anchor="middle" fill="#f59e0b" font-size="13" font-weight="700">→ Claude Code</text>
<!-- Branch 2 -->
<line x1="350" y1="41" x2="350" y2="75" stroke="#58a6ff" stroke-width="1.5"/>
<rect x="250" y="75" width="200" height="40" rx="8" fill="rgba(88,166,255,.06)" stroke="#58a6ff"/>
<text x="350" y="100" text-anchor="middle" fill="#e6edf3" font-size="11">Bug 修复 · 终端调试</text>
<line x1="350" y1="115" x2="350" y2="140" stroke="#58a6ff" stroke-width="1.5"/>
<rect x="260" y="140" width="180" height="35" rx="8" fill="rgba(88,166,255,.15)" stroke="#58a6ff" stroke-width="2"/>
<text x="350" y="162" text-anchor="middle" fill="#58a6ff" font-size="13" font-weight="700">→ OpenAI Codex</text>
<!-- Branch 3 -->
<line x1="400" y1="41" x2="580" y2="75" stroke="#3fb950" stroke-width="1.5"/>
<rect x="480" y="75" width="200" height="40" rx="8" fill="rgba(63,185,80,.06)" stroke="#3fb950"/>
<text x="580" y="100" text-anchor="middle" fill="#e6edf3" font-size="11">零预算 · 多模型切换</text>
<line x1="580" y1="115" x2="580" y2="140" stroke="#3fb950" stroke-width="1.5"/>
<rect x="490" y="140" width="180" height="35" rx="8" fill="rgba(63,185,80,.15)" stroke="#3fb950" stroke-width="2"/>
<text x="580" y="162" text-anchor="middle" fill="#3fb950" font-size="13" font-weight="700">→ OpenCode</text>
<!-- Bottom: Mix -->
<rect x="180" y="195" width="340" height="35" rx="10" fill="rgba(188,140,255,.08)" stroke="#bc8cff" stroke-width="1.5"/>
<text x="350" y="217" text-anchor="middle" fill="#bc8cff" font-size="12" font-weight="600">💡 高级建议：同时使用 Claude Code + Codex，各取所长</text>
</svg>
<div class="svg-caption">选择决策树：根据你的需求选择最适合的工具</div>
</div>
<div class="card" style="margin-top:12px">
<h4>🧠 高级用户的混合工作流</h4>
<p>许多资深开发者同时使用多个工具，发挥各自优势：</p>
<ul>
<li>用 <strong>Claude Code</strong> 进行<strong>功能开发和复杂重构</strong>（代码理解力强、准确率高）</li>
<li>用 <strong>OpenAI Codex</strong> 进行<strong>代码审查和 Bug 修复</strong>（速度快、成本低、终端调试强）</li>
<li>用 <strong>OpenCode</strong> 进行<strong>快速原型和小脚本开发</strong>（多模型、轻量免费）</li>
</ul>
</div>
</div>
<div class="sub">
<h3>安装对比</h3>
<div class="code-block"><div class="code-header"><span class="lang">bash — 三款工具一键安装</span><button class="copy-btn" onclick="copyCode(this)">复制</button></div><div class="code-body"># === Claude Code（Anthropic） ===
npm install -g @anthropic-ai/claude-code
# 或使用官方安装脚本
curl -fsSL https://claude.ai/install.sh | bash
# === OpenAI Codex CLI（OpenAI） ===
npm install -g @openai/codex
# === OpenCode（开源社区） ===
brew install opencode-ai/tap/opencode
# 或
go install github.com/opencode-ai/opencode@latest
# === 各自启动 ===
claude # Claude Code
codex # OpenAI Codex
opencode # OpenCode</div></div>
</div>
</section>
<!-- ===================== BASIC COMMANDS ===================== -->
<section class="section" id="basic-commands">
<h2 class="section-title">💬 基础命令 <span class="badge badge-beginner">入门</span></h2>
<div class="sub">
<h3>核心交互方式</h3>
<p>Claude Code 有三种基本使用方式：交互模式、非交互模式和管道模式。</p>
<!-- SVG: Three modes -->
<div class="svg-wrap">
<svg viewBox="0 0 680 160" xmlns="http://www.w3.org/2000/svg" font-family="system-ui,sans-serif">
<!-- Mode 1 -->
<rect x="10" y="20" width="200" height="120" rx="10" fill="#161b22" stroke="#3fb950" stroke-width="1.5"/>
<circle cx="110" cy="58" r="18" fill="rgba(63,185,80,.15)" stroke="#3fb950" stroke-width="1.5"/>
<text x="110" y="63" text-anchor="middle" fill="#3fb950" font-size="16">💬</text>
<text x="110" y="95" text-anchor="middle" fill="#e6edf3" font-size="14" font-weight="700">交互模式</text>
<text x="110" y="115" text-anchor="middle" fill="#8b949e" font-size="11">claude</text>
<!-- Mode 2 -->
<rect x="240" y="20" width="200" height="120" rx="10" fill="#161b22" stroke="#58a6ff" stroke-width="1.5"/>
<circle cx="340" cy="58" r="18" fill="rgba(88,166,255,.15)" stroke="#58a6ff" stroke-width="1.5"/>
<text x="340" y="63" text-anchor="middle" fill="#58a6ff" font-size="16">🖨️</text>
<text x="340" y="95" text-anchor="middle" fill="#e6edf3" font-size="14" font-weight="700">打印模式</text>
<text x="340" y="115" text-anchor="middle" fill="#8b949e" font-size="11">claude -p "..."</text>
<!-- Mode 3 -->
<rect x="470" y="20" width="200" height="120" rx="10" fill="#161b22" stroke="#bc8cff" stroke-width="1.5"/>
<circle cx="570" cy="58" r="18" fill="rgba(188,140,255,.15)" stroke="#bc8cff" stroke-width="1.5"/>
<text x="570" y="63" text-anchor="middle" fill="#bc8cff" font-size="16">🔌</text>
<text x="570" y="95" text-anchor="middle" fill="#e6edf3" font-size="14" font-weight="700">管道模式</text>
<text x="570" y="115" text-anchor="middle" fill="#8b949e" font-size="11">cat file | claude -p</text>
</svg>
<div class="svg-caption">Claude Code 三种核心使用模式</div>
</div>
<div class="tbl-wrap"><table>
<thead><tr><th>命令</th><th>说明</th><th>示例</th></tr></thead>
<tbody>
<tr><td><code>claude</code></td><td>启动交互式会话</td><td>进入项目后直接对话</td></tr>
<tr><td><code>claude "query"</code></td><td>带初始提示启动会话</td><td><code>claude "解释这个项目"</code></td></tr>
<tr><td><code>claude -p "query"</code></td><td>非交互打印模式</td><td><code>claude -p "列出所有 TODO"</code></td></tr>
<tr><td><code>claude -c</code></td><td>继续上次对话</td><td><code>claude -c</code></td></tr>
<tr><td><code>claude update</code></td><td>更新到最新版</td><td><code>claude update</code></td></tr>
</tbody>
</table></div>
</div>
</section>
<!-- ===================== FIRST TASK ===================== -->
<section class="section" id="first-task">
<h2 class="section-title">🚀 第一个任务 <span class="badge badge-beginner">入门</span></h2>
<div class="sub">
<h3>实战示例：为项目添加单元测试</h3>
<p>假设你有一个 <code>auth.js</code> 模块，想让它自动生成测试：</p>
<div class="code-block"><div class="code-header"><span class="lang">bash</span><button class="copy-btn" onclick="copyCode(this)">复制</button></div><div class="code-body"># 启动 Claude Code
claude
# 在交互模式中输入：
> 为 auth.js 模块编写单元测试，覆盖登录和注册功能，然后运行测试并修复失败用例</div></div>
<div class="tip"><strong>💡 实践要点：</strong>用自然语言描述需求，Claude Code 会自动读取文件、编写测试、运行并修复。</div>
</div>
<div class="sub">
<h3>实战示例：修复 Bug</h3>
<div class="code-block"><div class="code-header"><span class="lang">bash</span><button class="copy-btn" onclick="copyCode(this)">复制</button></div><div class="code-body"># 直接把错误信息交给 Claude
claude "修复这个 TypeError: Cannot read properties of undefined 错误，它在用户登录时出现"
# 或者用管道传入日志
cat error.log | claude -p "分析这个错误的根本原因并提供修复方案"</div></div>
</div>
</section>
<!-- ===================== SLASH COMMANDS ===================== -->
<section class="section" id="slash-cmds">
<h2 class="section-title">⚡ 斜杠命令 <span class="badge badge-beginner">入门</span></h2>
<div class="sub">
<p>在交互模式中输入 <code>/</code> 即可查看所有可用命令。以下是常用内置命令：</p>
<div class="accordion">
<div class="acc-item open">
<div class="acc-head" onclick="toggleAcc(this)"><span>📋 会话管理命令</span><span class="arrow">▶</span></div>
<div class="acc-body"><div class="acc-inner">
<div class="tbl-wrap"><table>
<thead><tr><th>命令</th><th>功能</th></tr></thead>
<tbody>
<tr><td><code>/clear</code></td><td>清除当前会话上下文</td></tr>
<tr><td><code>/compact</code></td><td>压缩会话内容（节省 token）</td></tr>
<tr><td><code>/cost</code></td><td>查看当前会话的 token 使用费用</td></tr>
<tr><td><code>/resume</code></td><td>浏览和恢复历史会话</td></tr>
<tr><td><code>/rename</code></td><td>给当前会话命名</td></tr>
</tbody>
</table></div>
</div></div>
</div>
<div class="acc-item">
<div class="acc-head" onclick="toggleAcc(this)"><span>⚙️ 配置与诊断命令</span><span class="arrow">▶</span></div>
<div class="acc-body"><div class="acc-inner">
<div class="tbl-wrap"><table>
<thead><tr><th>命令</th><th>功能</th></tr></thead>
<tbody>
<tr><td><code>/config</code></td><td>打开设置配置</td></tr>
<tr><td><code>/doctor</code></td><td>运行诊断检查</td></tr>
<tr><td><code>/help</code></td><td>显示帮助信息</td></tr>
<tr><td><code>/init</code></td><td>初始化项目（创建 CLAUDE.md）</td></tr>
<tr><td><code>/login / /logout</code></td><td>登录/登出账户</td></tr>
<tr><td><code>/terminal-setup</code></td><td>终端环境设置</td></tr>
</tbody>
</table></div>
</div></div>
</div>
<div class="acc-item">
<div class="acc-head" onclick="toggleAcc(this)"><span>🎯 捆绑技能命令</span><span class="arrow">▶</span></div>
<div class="acc-body"><div class="acc-inner">
<div class="tbl-wrap"><table>
<thead><tr><th>命令</th><th>功能</th></tr></thead>
<tbody>
<tr><td><code>/review</code></td><td>代码审查（检查 diff 或 PR）</td></tr>
<tr><td><code>/batch <instruction></code></td><td>大规模并行代码变更</td></tr>
<tr><td><code>/debug [desc]</code></td><td>启用调试模式</td></tr>
<tr><td><code>/loop [interval] <prompt></code></td><td>定时循环执行任务</td></tr>
<tr><td><code>/simplify [focus]</code></td><td>简化和优化代码</td></tr>
</tbody>
</table></div>
</div></div>
</div>
</div>
</div>
</section>
<!-- ===================== FILE REFERENCE ===================== -->
<section class="section" id="file-ref">
<h2 class="section-title">📎 文件引用语法 <span class="badge badge-beginner">入门</span></h2>
<div class="sub">
<p>在对话中可以用 <code>@</code> 符号引用文件或目录，Claude 会自动读取内容：</p>
<div class="tbl-wrap"><table>
<thead><tr><th>语法</th><th>说明</th><th>示例</th></tr></thead>
<tbody>
<tr><td><code>@src/utils/auth.js</code></td><td>引用单个文件内容</td><td>"解释 @src/auth.js 中的登录逻辑"</td></tr>
<tr><td><code>@src/components</code></td><td>引用整个目录结构</td><td>"列出 @src/components 中所有组件"</td></tr>
<tr><td><code>@server:resource</code></td><td>引用 MCP 服务器资源</td><td>"查看 @jira:PROJ-123 的详情"</td></tr>
</tbody>
</table></div>
<div class="tip"><strong>💡 技巧：</strong>引用文件可以让 Claude 精确理解你讨论的代码，避免歧义。</div>
</div>
</section>
<!-- ===================== CLI FLAGS ===================== -->
<section class="section" id="cli-flags">
<h2 class="section-title">⚙️ CLI 高级标志 <span class="badge badge-intermediate">中级</span></h2>
<div class="sub">
<h3>常用命令行标志</h3>
<div class="tbl-wrap"><table>
<thead><tr><th>标志</th><th>说明</th><th>示例</th></tr></thead>
<tbody>
<tr><td><code>--continue, -c</code></td><td>继续当前目录的最近对话</td><td><code>claude -c</code></td></tr>
<tr><td><code>--resume, -r</code></td><td>按 ID 或名称恢复特定会话</td><td><code>claude -r "auth-refactor"</code></td></tr>
<tr><td><code>--bare</code></td><td>精简模式（跳过钩子/技能发现）</td><td><code>claude --bare -p "query"</code></td></tr>
<tr><td><code>--max-turns N</code></td><td>限制 Agent 执行轮数</td><td><code>claude -p --max-turns 5 "fix lint"</code></td></tr>
<tr><td><code>--output-format</code></td><td>输出格式：text / json / stream-json</td><td><code>claude -p --output-format json "..."</code></td></tr>
<tr><td><code>--verbose</code></td><td>显示详细日志</td><td><code>claude --verbose</code></td></tr>
<tr><td><code>--no-session-persistence</code></td><td>不保存会话到磁盘</td><td><code>claude -p --no-session-persistence "..."</code></td></tr>
<tr><td><code>--worktree</code></td><td>在 Git worktree 中工作</td><td><code>claude --worktree feature-auth</code></td></tr>
</tbody>
</table></div>
</div>
<div class="sub">
<h3>系统提示词定制</h3>
<!-- SVG: System prompt layers -->
<div class="svg-wrap">
<svg viewBox="0 0 600 140" xmlns="http://www.w3.org/2000/svg" font-family="system-ui,sans-serif">
<rect x="50" y="10" width="500" height="30" rx="6" fill="rgba(139,148,158,.1)" stroke="#30363d"/>
<text x="300" y="30" text-anchor="middle" fill="#8b949e" font-size="12">Claude Code 默认系统提示词（内置能力）</text>
<rect x="80" y="50" width="440" height="30" rx="6" fill="rgba(217,119,6,.08)" stroke="#d97706" stroke-width="1.5" stroke-dasharray="6"/>
<text x="300" y="70" text-anchor="middle" fill="#d97706" font-size="12">--append-system-prompt 追加自定义规则</text>
<rect x="110" y="90" width="380" height="30" rx="6" fill="rgba(63,185,80,.08)" stroke="#3fb950" stroke-width="1.5" stroke-dasharray="6"/>
<text x="300" y="110" text-anchor="middle" fill="#3fb950" font-size="12">用户输入 / 项目文件上下文</text>
</svg>
<div class="svg-caption">系统提示词的三层叠加结构</div>
</div>
<div class="tbl-wrap"><table>
<thead><tr><th>标志</th><th>行为</th><th>推荐度</th></tr></thead>
<tbody>
<tr><td><code>--system-prompt</code></td><td>完全替换默认提示词</td><td>⚠️ 谨慎使用</td></tr>
<tr><td><code>--system-prompt-file</code></td><td>用文件内容替换默认提示词</td><td>⚠️ 谨慎使用</td></tr>
<tr><td><code>--append-system-prompt</code></td><td>在默认提示词后追加文本</td><td>✅ 推荐</td></tr>
<tr><td><code>--append-system-prompt-file</code></td><td>用文件内容追加到提示词后</td><td>✅ 推荐</td></tr>
</tbody>
</table></div>
<div class="code-block"><div class="code-header"><span class="lang">bash</span><button class="copy-btn" onclick="copyCode(this)">复制</button></div><div class="code-body"># 追加自定义规则（推荐）
claude -p --append-system-prompt "始终使用中文回复，代码注释使用中文" "解释这个文件"
# 使用规则文件
claude -p --append-system-prompt-file ./my-rules.txt "重构这个模块"</div></div>
</div>
</section>
<!-- ===================== PIPE MODE ===================== -->
<section class="section" id="pipe-mode">
<h2 class="section-title">🔌 管道与脚本模式 <span class="badge badge-intermediate">中级</span></h2>
<div class="sub">
<h3>Unix 管道集成</h3>
<p>Claude Code 可以作为 Unix 管道的一部分，接收其他命令的输出：</p>
<div class="code-block"><div class="code-header"><span class="lang">bash</span><button class="copy-btn" onclick="copyCode(this)">复制</button></div><div class="code-body"># 分析构建错误
cat build-error.log | claude -p "分析构建失败的根本原因"
# 审查 Git diff
git diff main | claude -p "审查这些代码变更，指出潜在问题"
# 分析日志异常
tail -200 app.log | claude -p "如果发现异常就告警"
# 提取信息并生成报告
npm audit --json | claude -p "生成安全漏洞修复优先级报告"</div></div>
</div>
<div class="sub">
<h3>脚本自动化</h3>
<div class="code-block"><div class="code-header"><span class="lang">bash</span><button class="copy-btn" onclick="copyCode(this)">复制</button></div><div class="code-body">#!/bin/bash
# auto-review.sh — 自动代码审查脚本
# 获取最新变更的文件
CHANGED=$(git diff --name-only HEAD~1)
# 让 Claude 审查每个文件
for file in $CHANGED; do
echo "=== 审查: $file ==="
claude -p --bare "审查这个文件的代码质量，只给出改进建议：" "$file"
done</div></div>
<div class="code-block"><div class="code-header"><span class="lang">bash</span><button class="copy-btn" onclick="copyCode(this)">复制</button></div><div class="code-body"># JSON 输出用于程序处理
claude -p --output-format json --max-turns 3 "列出所有 TODO 注释" | jq '.result'</div></div>
</div>
</section>
<!-- ===================== CLAUDE.md ===================== -->
<section class="section" id="claudemd">
<h2 class="section-title">📝 CLAUDE.md 项目配置 <span class="badge badge-intermediate">中级</span></h2>
<div class="sub">
<h3>什么是 CLAUDE.md？</h3>
<p>CLAUDE.md 是项目级别的指令文件，Claude Code 每次启动会自动读取。用于设定编码规范、架构约定和工作流程。</p>
<!-- SVG: CLAUDE.md layers -->
<div class="svg-wrap">
<svg viewBox="0 0 600 180" xmlns="http://www.w3.org/2000/svg" font-family="system-ui,sans-serif">
<rect x="60" y="10" width="480" height="36" rx="8" fill="rgba(188,140,255,.08)" stroke="#bc8cff" stroke-width="1.5"/>
<text x="300" y="33" text-anchor="middle" fill="#bc8cff" font-size="13" font-weight="600">~/.claude/CLAUDE.md — 用户级（个人偏好）</text>
<rect x="100" y="56" width="400" height="36" rx="8" fill="rgba(217,119,6,.08)" stroke="#d97706" stroke-width="1.5"/>
<text x="300" y="79" text-anchor="middle" fill="#d97706" font-size="13" font-weight="600">./CLAUDE.md — 项目级（团队共享，纳入版本控制）</text>
<rect x="140" y="102" width="320" height="36" rx="8" fill="rgba(63,185,80,.08)" stroke="#3fb950" stroke-width="1.5"/>
<text x="300" y="125" text-anchor="middle" fill="#3fb950" font-size="13" font-weight="600">.claude/rules/*.md — 规则文件（按主题拆分）</text>
<rect x="180" y="148" width="240" height="24" rx="6" fill="rgba(88,166,255,.08)" stroke="#58a6ff" stroke-width="1.5"/>
<text x="300" y="165" text-anchor="middle" fill="#58a6ff" font-size="11">自动记忆（Claude 自动生成）</text>
</svg>
<div class="svg-caption">CLAUDE.md 配置层级：优先级从高到低</div>
</div>
</div>
<div class="sub">
<h3>示例：创建项目 CLAUDE.md</h3>
<div class="code-block"><div class="code-header"><span class="lang">markdown</span><button class="copy-btn" onclick="copyCode(this)">复制</button></div><div class="code-body"># 项目规范
## 技术栈
- 框架：Next.js 14 + TypeScript
- 样式：Tailwind CSS
- 测试：Vitest + Testing Library
## 编码规范
- 使用 2 空格缩进
- 组件使用函数式写法 + hooks
- 文件命名使用 kebab-case
- 所有 API 响应必须有错误处理
## Git 规范
- 提交信息格式：type(scope): description
- 例如：feat(auth): add login page
## 测试命令
- `npm test` — 运行所有测试
- `npm test:watch` — 监听模式
## 架构说明
- src/app/ — Next.js App Router 页面
- src/components/ — 可复用组件
- src/lib/ — 工具函数和共享逻辑
- src/hooks/ — 自定义 Hooks</div></div>
<div class="tip"><strong>💡 最佳实践：</strong>用 <code>/init</code> 命令快速生成 CLAUDE.md 模板；文件大小建议控制在 200 行以内。</div>
</div>
<div class="sub">
<h3>规则文件拆分</h3>
<p>大型项目可以在 <code>.claude/rules/</code> 下按主题组织规则：</p>
<div class="code-block"><div class="code-header"><span class="lang">text</span><button class="copy-btn" onclick="copyCode(this)">复制</button></div><div class="code-body">.claude/
├── CLAUDE.md # 主配置文件
└── rules/
├── typescript.md # TS 相关规则
├── testing.md # 测试规范
└── api-design.md # API 设计约定</div></div>
</div>
</section>
<!-- ===================== GIT WORKFLOW ===================== -->
<section class="section" id="git-flow">
<h2 class="section-title">🔀 Git 工作流集成 <span class="badge badge-intermediate">中级</span></h2>
<div class="sub">
<h3>常用 Git 操作</h3>
<div class="code-block"><div class="code-header"><span class="lang">bash</span><button class="copy-btn" onclick="copyCode(this)">复制</button></div><div class="code-body"># 提交代码（Claude 自动生成提交信息）
claude "commit my changes with a descriptive message"
# 创建 Pull Request
claude "create a PR for the feature I just built"
# 查看差异并审查
claude "review the changes I made compared to main"
# 解决合并冲突
claude "resolve the merge conflicts in src/auth/login.ts"</div></div>
</div>
<div class="sub">
<h3>Git Worktree 并行开发</h3>
<p>使用 <code>--worktree</code> 可以在不同分支上同时运行多个 Claude 实例：</p>
<div class="code-block"><div class="code-header"><span class="lang">bash</span><button class="copy-btn" onclick="copyCode(this)">复制</button></div><div class="code-body"># 终端 1：在新功能分支上工作
claude --worktree feature-auth
# 终端 2：同时修复 bug
claude --worktree bugfix-123</div></div>
<div class="tip"><strong>💡 技巧：</strong>创建的 PR 会自动与当前会话关联，下次可以用 <code>claude --from-pr <number></code> 恢复。</div>
</div>
</section>
<!-- ===================== MULTI SESSION ===================== -->
<section class="section" id="multi-session">
<h2 class="section-title">🔄 多会话管理 <span class="badge badge-intermediate">中级</span></h2>
<div class="sub">
<h3>会话命名与恢复</h3>
<div class="code-block"><div class="code-header"><span class="lang">bash</span><button class="copy-btn" onclick="copyCode(this)">复制</button></div><div class="code-body"># 创建命名会话
claude -n auth-refactor
# 在会话中重命名
> /rename auth-refactor
# 恢复特定会话
claude --resume auth-refactor
# 继续最近一次对话
claude -c
# 在交互模式中浏览历史会话
> /resume</div></div>
</div>
<div class="sub">
<h3>会话切换与跨平台</h3>
<div class="card">
<h4>🌐 跨平台无缝切换</h4>
<ul>
<li><code>/desktop</code> — 将终端会话转移到 Desktop 应用</li>
<li><code>/teleport</code> — 将任务迁移到 Web 端继续</li>
<li>支持在 VS Code、JetBrains、终端、iOS 之间同步</li>
</ul>
</div>
</div>
</section>
<!-- ===================== HOOKS ===================== -->
<section class="section" id="hooks">
<h2 class="section-title">🪝 Hooks 钩子系统 <span class="badge badge-advanced">高级</span></h2>
<div class="sub">
<h3>钩子系统概述</h3>
<p>Hooks 是用户定义的自动化脚本，在 Claude Code 生命周期的特定节点自动执行。支持四种类型：</p>
<div class="tbl-wrap"><table>
<thead><tr><th>类型</th><th>说明</th><th>适用场景</th></tr></thead>
<tbody>
<tr><td><code>command</code></td><td>执行 Shell 命令</td><td>自动格式化、lint 检查</td></tr>
<tr><td><code>http</code></td><td>发送 HTTP POST 请求</td><td>通知外部系统、Webhook</td></tr>
<tr><td><code>prompt</code></td><td>LLM 单轮评估</td><td>代码质量检查、安全扫描</td></tr>
<tr><td><code>agent</code></td><td>生成子代理多轮验证</td><td>深度代码审查、复杂验证</td></tr>
</tbody>
</table></div>
<!-- SVG: Hook lifecycle -->
<div class="svg-wrap">
<svg viewBox="0 0 700 130" xmlns="http://www.w3.org/2000/svg" font-family="system-ui,sans-serif">
<rect x="10" y="40" width="100" height="50" rx="8" fill="rgba(88,166,255,.1)" stroke="#58a6ff"/>
<text x="60" y="70" text-anchor="middle" fill="#58a6ff" font-size="11" font-weight="600">SessionStart</text>
<rect x="140" y="40" width="100" height="50" rx="8" fill="rgba(248,81,73,.1)" stroke="#f85149"/>
<text x="190" y="63" text-anchor="middle" fill="#f85149" font-size="10" font-weight="600">PreToolUse</text>
<text x="190" y="78" text-anchor="middle" fill="#8b949e" font-size="9">拦截/修改</text>
<rect x="270" y="20" width="100" height="90" rx="8" fill="rgba(217,119,6,.1)" stroke="#d97706"/>
<text x="320" y="55" text-anchor="middle" fill="#d97706" font-size="11" font-weight="700">工具执行</text>
<text x="320" y="73" text-anchor="middle" fill="#8b949e" font-size="9">Bash/Read/</text>
<text x="320" y="87" text-anchor="middle" fill="#8b949e" font-size="9">Write/Edit</text>
<rect x="400" y="40" width="120" height="50" rx="8" fill="rgba(63,185,80,.1)" stroke="#3fb950"/>
<text x="460" y="63" text-anchor="middle" fill="#3fb950" font-size="10" font-weight="600">PostToolUse</text>
<text x="460" y="78" text-anchor="middle" fill="#8b949e" font-size="9">格式化/检查</text>
<rect x="550" y="40" width="120" height="50" rx="8" fill="rgba(188,140,255,.1)" stroke="#bc8cff"/>
<text x="610" y="63" text-anchor="middle" fill="#bc8cff" font-size="10" font-weight="600">Permission</text>
<text x="610" y="78" text-anchor="middle" fill="#8b949e" font-size="9">自动批准/拒绝</text>
<line x1="112" y1="65" x2="138" y2="65" stroke="#30363d" stroke-width="1.5" marker-end="url(#ar)"/>
<line x1="242" y1="65" x2="268" y2="65" stroke="#30363d" stroke-width="1.5" marker-end="url(#ar)"/>
<line x1="372" y1="65" x2="398" y2="65" stroke="#30363d" stroke-width="1.5" marker-end="url(#ar)"/>
<line x1="522" y1="65" x2="548" y2="65" stroke="#30363d" stroke-width="1.5" marker-end="url(#ar)"/>
<defs><marker id="ar" markerWidth="6" markerHeight="5" refX="6" refY="2.5" orient="auto"><polygon points="0,0 6,2.5 0,5" fill="#30363d"/></marker></defs>
</svg>
<div class="svg-caption">Hooks 生命周期：会话开始 → 工具调用前 → 执行 → 工具调用后 → 权限控制</div>
</div>
</div>
<div class="sub">
<h3>配置示例</h3>
<p>钩子配置在 <code>settings.json</code> 或 <code>.claude/settings.json</code> 中定义：</p>
<div class="tabs">
<div class="tab-bar">
<button class="tab-btn active" onclick="switchTab(this,'hook-ex')">阻止危险命令</button>
<button class="tab-btn" onclick="switchTab(this,'hook-ex')">自动格式化</button>
<button class="tab-btn" onclick="switchTab(this,'hook-ex')">权限自动批准</button>
</div>
<div class="tab-panel active" data-tab-group="hook-ex">
<div class="code-block"><div class="code-header"><span class="lang">json</span><button class="copy-btn" onclick="copyCode(this)">复制</button></div><div class="code-body">{
"hooks": {
"PreToolUse": [{
"matcher": "Bash",
"hooks": [{
"type": "command",
"if": "Bash(rm -rf *)",
"command": "echo '⛔ 危险命令已拦截！'"
}]
}]
}
}</div></div>
</div>
<div class="tab-panel" data-tab-group="hook-ex">
<div class="code-block"><div class="code-header"><span class="lang">json</span><button class="copy-btn" onclick="copyCode(this)">复制</button></div><div class="code-body">{
"hooks": {
"PostToolUse": [{
"matcher": "Write|Edit",
"hooks": [{
"type": "command",
"command": "prettier --write $FILE",
"async": true
}]
}]
}
}</div></div>
</div>
<div class="tab-panel" data-tab-group="hook-ex">
<div class="code-block"><div class="code-header"><span class="lang">json</span><button class="copy-btn" onclick="copyCode(this)">复制</button></div><div class="code-body">{
"hooks": {
"PermissionRequest": [{
"matcher": "Bash(npm test *)",
"hooks": [{
"type": "command",
"command": "echo 'approve'"
}]
}]
}
}</div></div>
</div>
</div>
<div class="tip"><strong>💡 提示：</strong>使用 <code>/hooks</code> 命令查看当前所有已配置的钩子。</div>
</div>
</section>
<!-- ===================== SKILLS ===================== -->
<section class="section" id="skills">
<h2 class="section-title">🎯 技能 (Skills) <span class="badge badge-advanced">高级</span></h2>
<div class="sub">
<h3>技能系统概述</h3>
<p>Skills 是基于提示词的可复用工作流，使用 <code>/skill-name</code> 调用。可以封装常用操作为自定义命令。</p>
<div class="card">
<h4>📁 技能文件结构</h4>
<div class="code-block" style="margin:8px 0"><div class="code-header"><span class="lang">text</span></div><div class="code-body">.claude/
└── commands/
├── review-pr.md # /review-pr 技能
├── deploy-staging.md # /deploy-staging 技能
└── gen-api-docs.md # /gen-api-docs 技能</div></div>
</div>
</div>
<div class="sub">
<h3>创建自定义技能</h3>
<div class="code-block"><div class="code-header"><span class="lang">markdown (.claude/commands/review-pr.md)</span><button class="copy-btn" onclick="copyCode(this)">复制</button></div><div class="code-body">---
description: 审查当前分支的 Pull Request
---
请审查当前分支相对于 main 分支的所有代码变更：
1. 列出所有变更文件
2. 对每个文件进行代码审查，关注：
- 代码质量和可读性
- 潜在的 bug 或安全问题
- 性能问题
- 是否符合项目的编码规范
3. 给出总体评价和改进建议
4. 如果发现严重问题，标注为 🔴 critical</div></div>
</div>
<div class="sub">
<h3>使用技能</h3>
<div class="code-block"><div class="code-header"><span class="lang">bash</span><button class="copy-btn" onclick="copyCode(this)">复制</button></div><div class="code-body"># 在交互模式中调用自定义技能
> /review-pr
# 调用内置技能
> /batch "将所有 console.log 替换为 logger"
> /loop 30 "运行测试，修复失败的用例"
> /debug "登录接口返回 500 错误"</div></div>
</div>
</section>
<!-- ===================== MCP ===================== -->
<section class="section" id="mcp">
<h2 class="section-title">🌐 MCP 集成 <span class="badge badge-advanced">高级</span></h2>
<div class="sub">
<h3>什么是 MCP？</h3>
<p>Model Context Protocol 让 Claude Code 连接外部数据源（如 Google Drive、Jira、Slack、数据库等），实现跨工具协作。</p>
<!-- SVG: MCP architecture -->
<div class="svg-wrap">
<svg viewBox="0 0 680 160" xmlns="http://www.w3.org/2000/svg" font-family="system-ui,sans-serif">
<rect x="240" y="50" width="200" height="60" rx="10" fill="rgba(217,119,6,.1)" stroke="#d97706" stroke-width="2"/>
<text x="340" y="75" text-anchor="middle" fill="#f59e0b" font-size="15" font-weight="700">Claude Code</text>
<text x="340" y="95" text-anchor="middle" fill="#8b949e" font-size="11">MCP Client</text>
<!-- Servers -->
<rect x="20" y="15" width="130" height="45" rx="8" fill="#161b22" stroke="#3fb950"/>
<text x="85" y="42" text-anchor="middle" fill="#3fb950" font-size="12" font-weight="600">📁 Google Drive</text>
<rect x="20" y="70" width="130" height="45" rx="8" fill="#161b22" stroke="#58a6ff"/>
<text x="85" y="97" text-anchor="middle" fill="#58a6ff" font-size="12" font-weight="600">📋 Jira</text>
<rect x="20" y="125" width="130" height="30" rx="8" fill="#161b22" stroke="#bc8cff"/>
<text x="85" y="145" text-anchor="middle" fill="#bc8cff" font-size="11" font-weight="600">💬 Slack</text>
<rect x="530" y="15" width="130" height="45" rx="8" fill="#161b22" stroke="#f0883e"/>
<text x="595" y="42" text-anchor="middle" fill="#f0883e" font-size="12" font-weight="600">🗄️ PostgreSQL</text>
<rect x="530" y="70" width="130" height="45" rx="8" fill="#161b22" stroke="#f85149"/>
<text x="595" y="97" text-anchor="middle" fill="#f85149" font-size="12" font-weight="600">🐙 GitHub</text>
<rect x="530" y="125" width="130" height="30" rx="8" fill="#161b22" stroke="#8b949e"/>
<text x="595" y="145" text-anchor="middle" fill="#8b949e" font-size="11" font-weight="600">🔧 自定义服务</text>
<line x1="152" y1="80" x2="238" y2="80" stroke="#30363d" stroke-width="1.5" stroke-dasharray="4"/>
<line x1="442" y1="80" x2="528" y2="80" stroke="#30363d" stroke-width="1.5" stroke-dasharray="4"/>
<text x="195" y="72" fill="#8b949e" font-size="9">MCP</text>
<text x="485" y="72" fill="#8b949e" font-size="9">MCP</text>
</svg>
<div class="svg-caption">MCP 架构：Claude Code 通过标准协议连接多种外部服务</div>
</div>
</div>
<div class="sub">
<h3>配置 MCP 服务器</h3>
<div class="code-block"><div class="code-header"><span class="lang">json (~/.claude/mcp.json)</span><button class="copy-btn" onclick="copyCode(this)">复制</button></div><div class="code-body">{
"mcpServers": {
"jira": {
"command": "npx",
"args": ["-y", "@anthropic/mcp-jira"],
"env": { "JIRA_API_TOKEN": "your-token" }
},
"postgres": {
"command": "npx",
"args": ["-y", "@anthropic/mcp-postgres"],
"env": { "DATABASE_URL": "postgresql://..." }
},
"filesystem": {
"command": "npx",
"args": ["-y", "@anthropic/mcp-filesystem", "/path/to/dir"]
}
}
}</div></div>
<div class="code-block"><div class="code-header"><span class="lang">bash</span><button class="copy-btn" onclick="copyCode(this)">复制</button></div><div class="code-body"># 配置后，在对话中直接引用 MCP 资源
> 查看 @jira:PROJ-123 的详情
> 在 @postgres:users 表中查找活跃用户
> 读取 @filesystem:docs/README.md 的内容</div></div>
</div>
</section>
<!-- ===================== MULTI-AGENT ===================== -->
<section class="section" id="multi-agent">
<h2 class="section-title">🤖 多代理协作 <span class="badge badge-advanced">高级</span></h2>
<div class="sub">
<h3>多代理工作模式</h3>
<p>Claude Code 支持同时运行多个代理实例，由主代理协调完成复杂任务。</p>
<!-- SVG: Multi-agent -->
<div class="svg-wrap">