Claude Code 教程：从安装到第一个应用（2026 图文版）

先把 Claude Code 装起来

1. 1

   打开 Claude Code 官网，复制安装命令

   Claude Code 的官方页面（claude.com/claude-code）直接给出可复制的安装命令：Mac 用 bash 一行命令，Windows 用 PowerShell（irm https://claude.ai/install.ps1 | iex）。视频作者用脚本时踩了坑，所以下一步改走他更推荐的 npm 安装。两条路二选一即可。

   

2. 2

   先装 Node.js，再用 npm 安装 Claude Code

   如果原生脚本不顺利，先去 nodejs.org 装 Node.js，用 node -v 确认版本。接着运行 npm install -g @anthropic-ai/claude-code，看到“added 1 package in 1s”就说明装好了，任何终端里从此都有 claude 命令可用。

   

3. 3

   在 VS Code 的 terminal 里启动 Claude Code

   在任意终端输入 claude 就能启动，但作者的习惯是放进 VS Code：打开集成终端，在下拉菜单里选 Command Prompt，输入 claude 回车，按 1 信任当前目录。欢迎框里会出现“Run /init to create a CLAUDE.md”这类入门提示。

   

像工程师一样交代需求，在 plan mode 里开工

1. 4

   写一份分条列点的需求清单，别写一句模糊愿望

   别只写“帮我做个应用”。把硬性需求逐条列出：类似 Outlook 的日历视图、增删家务、按周期循环、指派给团队成员……结尾再加一句“Ask me questions to clarify the product requirements, technical requirements, engineering principles, and hard constraints”。用 Alt+Enter（Mac 是 Option+Enter）换行，不会误发送。

   

2. 5

   动手之前，先切到 plan mode

   按住 Shift 连按 Tab，直到输入框下方出现“plan mode on (shift+tab to cycle)”。plan mode 下 Claude 不会自动写代码：它先分析项目、跟你确认方案，第一步就走在正轨上。

   

3. 6

   回答 Claude 的澄清问题

   Claude 会抛出一份问卷，顶部有 Tech Stack、Data Storage、Authentication、Extra Features 几个标签页。用数字键选答案（比如 React 应用、无需登录），Tab 或方向键切题，全部确认后选 Submit。视频经验：这里答得越细，后面的计划越靠谱。

   

生成、测试并提交你的第一个应用

1. 7

   逐段审阅它交回的实施计划

   Claude 会给出完整的实施计划：技术栈（React 18 + Vite、TypeScript、状态管理、date-fns）、数据模型，以及标注好用途的组件文件树。重点盯它自作主张的部分——视频里作者就发现计划混进了 Vite、Tailwind 和 JavaScript，当场要求改回 TypeScript。

   

2. 8

   该批的工具调用就批，也可以设为不再询问

   执行 npm install 这类命令前，Claude 会问“Do you want to proceed?”，给出三个选项：同意；同意且不再为 npm install 命令询问；拒绝并告诉它该怎么做。作者对安全、常规的工具选第二项，让构建过程不被反复打断。

   

3. 9

   用真实数据测试刚生成的应用

   编辑自动批准后，Claude 会把整个应用搭完。开发服务器建议自己在另一个终端里跑（npm run dev），然后实际点一遍 UI：添加团队成员，再建一条 Kitchen 分类、指派给 Kevin、每周循环的“Bake Cookies”家务，看它是否如约出现在周视图里。

   

4. 10

   早提交、勤提交，随时能回滚

   每多写一条 prompt，就多一分引入回归的风险，所以好的状态要立刻提交。在 VS Code 的 Source Control 面板里暂存文件、填写提交信息、点 Commit 或 Publish Branch。记得一直在分支上工作，回滚到上一个可用状态只需一条命令。

   

用 CLAUDE.md 给 Claude 装上项目记忆

1. 11

   先搞懂 CLAUDE.md 为什么重要

   CLAUDE.md 的内容会注入每一次 Claude Code 会话：技术栈、每个组件的用途、你希望它的工作方式（跑测试、类型检查、先建分支）。视频引用的 Humanlayer 文章把它拆成 WHAT、WHY、HOW 三层，写的时候照着分层填即可。

   

2. 12

   用 /init 或结构化 prompt 生成 CLAUDE.md

   最快的办法是输入 /init（Initialize a new CLAUDE.md file with codebase documentation），斜杠菜单会自动补全。但作者认为 /init 的产出太薄，更推荐粘贴一段覆盖 what/why/how 和渐进式披露原则的 prompt，让 CLAUDE.md 用索引指向更多 markdown 文件。

   

3. 13

   用一句话 bug 报告验证记忆生效

   重启 Claude 后只描述现象：点日历添加家务时，时间对不上单元格。因为有了 CLAUDE.md，它已经认识这套技术栈，会先建修复分支再动手，最后给出根因分析——toISOString 把时间转成了 UTC，而输入框要本地时间——并列出所有改动的文件。

   

YOLO 模式提速，实战实时同步

1. 14

   弄清 YOLO 模式的代价再打开

   用 --dangerously-skip-permissions 启动 claude（俗称 YOLO 模式），Claude 不再请求任何批准，命令直接执行。Claude Code 会先给出红色警告，要求你确认承担全部责任。作者的用法：在已经提交过的项目里、追求速度时才开，平时用 Shift+Tab 按会话切换。

   

2. 15

   大的架构改动，让 Claude 给出三个方案

   比如“家务变动要实时同步到其他标签页”这种大改动，作者回到 plan mode，要求 Claude 先读相关文件、给出三个方案。结果：LocalStorage events、BroadcastChannel API、WebSocket 后端，各附一句取舍说明。要方案再拍板，就是把普通 LLM 的 prompt 技巧用在写代码上。

   

3. 16

   开两个浏览器窗口验收实时同步

   几分钟后 Claude 写完了 WebSocket 服务器。验收方式很直观：并排放两个浏览器窗口，在一边添加团队成员 Elizabeth 或新建“Feed the fish”家务，另一边立刻出现。剩下的，就是像对待队友的代码一样 review 它的产出。

   

常见问题