Claude Code 完全指南：从安装到实战的 14 步教程

Claude Code 是一款强大的 AI 编程助手工具，能够显著提升开发效率。本文将为你提供从零开始到实战应用的全方位指南，涵盖安装配置、模式切换、基础使用、高级功能等 14 个关键步骤。

1. 安装与登录（从 0 开始）

1.1 安装 Claude Code

打开 Claude Code 官方页面（视频描述里有链接）。

复制页面上的安装命令（有一个复制按钮）。

回到终端粘贴并回车执行。完成后终端可以识别 claude 命令。

1 2	# 例子（具体命令以官网为准） claude

1.2 创建项目并进入

1
2
3

mkdir my-todo      # 创建项目文件夹
cd my-todo         # 进入项目
claude             # 启动 Claude Code

1.3 登录 Claude 账号

进入后如果没自动弹登录提示，输入：/login。

有两种方式：

订阅登录：你有 Claude Pro/Max 会员，直接选这一项。
API Key：用官方 API key，按 Token 用量计费。

完成网页授权后回到终端敲回车，登录成功。

没法用官方模型？

你可以用国产模型（如 GLM、MiniMax）来驱动 Claude Code，本质上它是"通用编程 Agent"，不绑死 Claude 模型，只要配置几个环境变量即可（网上搜索即可）。

2. 三种模式：默认 / 自动 / 规划

Claude Code 有 3 个核心模式，用 Shift + Tab 在三者间循环切换。

2.1 默认模式（最稳）

特征：输入框下方只显示一行灰字 ? for shortcuts。

每次创建或修改文件前都会询问你。
适合刚上手、怕误操作时使用。
安全但略啰嗦。

2.2 自动模式（最省心）

特征：输入框下方显示 accept edits on。

Claude Code 可以自动创建、修改文件，不再一遍遍问你同意。
适合你对它比较信任、想提高速度时使用。

进入方式：当它问你"是否创建/修改文件"时，选：
Yes, allow all edits during this session。

2.3 规划模式 Plan Mode（只聊不动手）

特征：底部显示 Plan Mode。

只讨论方案，不直接改文件。
适合"改架构、改大工程"时先把方案规划好。

进入方式： Shift + Tab 切到 Plan Mode，再输入你的需求。
换行要用 Shift + 回车（普通回车是直接发送）。

3. 基础使用：做一个待办（Todo）小网页

3.1 提需求，让它写代码

在 Claude Code 里输入（任意自然语言即可）：

1	给我做一个待办软件，用 HTML 实现。

它会提出创建 index.html 并询问你是否同意：

单次 Yes：只同意这一次文件操作。
Yes, allow all edits during this session：本会话内所有文件操作自动同意（自动模式）。

推荐：学习时先选自动模式，方便观察效果。

3.2 在 Claude Code 里跑终端命令

在输入框前加一个感叹号 ! 就可以执行终端命令：

1	!open index.html

这会在浏览器里打开页面，你就能看到 Todo 应用效果了。

这个 ! 代表进入 bash 模式，后面跟的就是普通终端命令。

4. 终端权限与 "危险模式"

4.1 为什么执行命令还要问？

即使你已经开了自动编辑模式，Claude Code执行终端命令（例如 mkdir、npm install、删除文件等）时仍会问你：

因为执行命令更危险，可能改动很多东西。
它会问你允许当前命令、或者允许访问某个目录（如 src/）等。

4.2 一键跳过所有权限提示（高风险）

可以在启动 Claude Code 时加参数跳过权限检查：

1	claude --dangerously-skip-permissions

启动后模式会显示为 bypass permissions on。

从此它执行任何终端命令（安装依赖、删文件等）都不再询问。

官方在参数名里带上 dangerously，说明这很危险，等于给了它和你一样的终端权限。

建议：新手不要开；熟练后在 虚拟机 / demo 环境 下可以考虑用来提升效率。

5. 后台任务与 /tasks

很多命令会启动"长时间运行的服务"，比如：npm run dev。

5.1 阻塞问题

如果服务器在前台运行，你再输入 Hi 等新请求，Claude Code不会回应，因为它在等那个命令结束。

5.2 放到后台

按 Ctrl + b：把当前任务放到后台，让 Claude Code 继续接收新指令。

然后你可以：

输入 /tasks 查看当前后台任务列表。
按 k 停止某个任务（例如关掉 npm run dev）。
按 Esc 返回主界面。

6. 回滚 /rewind：后悔了怎么办

Claude Code 会自动记录"回滚点"，你可以随时退回到某一次操作之前。

6.1 快速打开回滚界面

按两次 Esc，进入回滚界面。

每一次你给它新的请求，它都会创建一个回滚点。

你可以选择"某个时间点"回去。

6.2 回滚选项

选中一个回滚点回车后，会有 4 个选项：

回滚代码和会话（源码 + 聊天记录一起还原）。
只回滚会话（只改对话，不改文件）。
只回滚代码。
放弃回滚。

选择【代码和会话都回滚】，最常用。

6.3 回滚的局限：终端生成文件回不去

Claude Code 只能回滚它自己写入的文件内容。

比如通过 mkdir、npm install 等命令生成的文件，它不能自动清理。

常见做法：

用 ls 查看当前目录文件（按 Ctrl + o 显示完整列表）。
手动删除多余文件，只留下需要的（例如只保留 index.html）。
打开网页确认效果确实回到了老版本。

严肃项目建议：用 git 管理版本，用 git commit / git reset 做真正的版本回退。

7. 图片 + MCP：高精度还原 Figma 设计稿

7.1 简单方式：直接给 Claude 图片

在 Figma 里选中 Frame，点 export 导出 PNG。

把图片拖到 Claude Code 窗口里，或在文件管理器里复制后用 Ctrl + V 粘贴到 Claude Code（注意是 Ctrl，不是 Command）。

输入请求：

1	根据这张图把当前页面改成一样的布局和样式。

优点：简单；
缺点：还原程度有限，字体、间距等细节凭图片很难做到完全一致。

7.2 专业方式：安装 Figma MCP Server

MCP = 大模型与外界沟通的通道，Figma 提供了一个 MCP Server。

大致步骤：

按 Figma 官方文档，在终端执行一行安装命令（视频中复制的那一行）。
重新打开 Claude Code，输入 /mcp 查看已安装的 MCP 服务，确认有 figma。
选 figma → Authenticate，在弹出的网页中授权。
再次 /mcp 选择 figma → View tools 可以看到内部的工具列表（截图、获取设计信息等）。

7.3 用 Figma 链接驱动改版

在 Figma 中复制当前选中设计的链接（copy link to selection）。

回到 Claude Code：
输入：

1	修改当前页面，使它与 Figma 稿件保持一致。

然后粘贴刚才复制的 Figma 链接，回车。

Claude Code 会自动：

发现 figma MCP 可用；
调用 get design context 获取组件间距、字体样式等详细信息；
再调用 get screenshot 等工具；
最后按这些精确信息改你的代码。

实测：页面与设计稿的还原度非常高，只需要手工调整少量细节（如某些 NaN 显示问题）。

8. 上下文管理：/compact 和 /clear

Claude Code 执行久了，上下文里会堆积大量内容：代码、工具调用结果、日志等。

8.1 /compact：压缩上下文

输入命令：

/compact

它会把历史内容进行总结和提炼，只留下关键信息。

这样可以减少 Token 消耗，提高后续对话的性能。

压缩完可按 Ctrl + o 查看压缩后的上下文摘要。

也可以写成：/compact 重点保留我之前提过的需求，给一点策略提示。

8.2 /clear：直接清空上下文

/clear

会把当前会话的上下文全部清空。

适用场景：接下来要做的事情和之前完全无关。
注意：视频里作者没有演示，因为要用之前的上下文继续讲解。

9. CLAUDE.md：让它"记住你"的项目说明书

Claude Code 支持在项目目录里放一个 CLAUDE.md，作为它每次启动时自动阅读的"说明书"。

9.1 创建 CLAUDE.md

在项目内输入：

/init

它会自动生成一份 CLAUDE.md，通常是英文模板。

你可以打开这个文件（用 VS Code 或者 /memory）并把内容改为中文，写上项目背景、目标、技术栈、注意事项等。

例如可以添加一条注意事项：

1	每次回答的最后必须追加一句 "Happy Coding"。

保存后，重启 Claude Code 再随便说一句 Hi，你就会看到它自动加上"Happy Coding"。说明 CLAUDE.md 生效了。

9.2 项目级 / 用户级 CLAUDE.md

输入 /memory 可以看到两种级别：

项目级（当前目录生效）：文件在项目目录里，只对这个项目有效。
用户级（整个用户生效）：放在用户目录，对你所有项目都有效。

你可以选择要编辑哪一个，然后直接在编辑器里修改内容。删掉"Happy Coding"后，重启 Claude Code，就不会再自动加那句话。

10. Hook：自动执行脚本（如自动格式化）

Hook 允许你在特定节点插入自定义逻辑，比如"工具使用后自动执行 prettier 格式化代码"。

10.1 进入 Hook 配置

输入 /hooks 进入 Hook 管理界面。

选择执行时机，比如 PostToolUse（某个工具使用之后）。
选择 Add new matcher 指定哪些工具触发 Hook，例如 write 和 edit（即写文件或改文件时）。
再选 Add new hook 写入具体命令。

10.2 例子：用 prettier 自动格式化

视频里示例命令逻辑是：

接收一段 JSON 输入，其中包含 file_path（刚被编辑的文件路径）。
用 jq 解析 JSON 拿到这个路径。
用 xargs 把路径传给 prettier，对该文件执行格式化。

核心思路：
"写完文件 → Hook 被触发 → prettier 格式化这个文件"。

10.3 Hook 保存级别

创建完 Hook 后，Claude Code 会问你保存到哪一级：

本地项目级：配置写入项目目录下 settings.local.json，自动加入 .gitignore，不会被提交给别人。
项目级：配置写入 settings.json，会随着 git 分发给所有使用这个项目的人。
用户级：保存在用户目录，对你所有项目生效，不和项目绑定。

视频中选择了项目级，这样团队成员都能享受自动格式化。

测试方式：让 Claude 创建一个 test.html，要求全部写在一行；写完后 Hook 会自动把文件格式化成漂亮的多行 HTML。

11. Agent Skill：给模型看的"说明书模块"

Agent Skill 可以理解为：给大模型看的"文档+规则"，在需要的时候动态加载，相当于专用 Prompt 模块。

11.1 示例：自动写每日开发总结

需求：每天写一份日报，必须包含固定格式，比如日期、开发摘要、开发详情等。

如果你每天都把这段格式说明粘进输入框，很麻烦，于是可以：

1	mkdir -p ~/claude/skills/daily-report

在该目录下创建 SKILL.md：内容包含：

name：比如 daily-report。
description：描述这个 Skill 是干什么的。
正文：详细说明日报格式、字段含义等要求。

保存后重启 Claude Code，输入 /skills 可以看到 daily-report Skill 已被识别。

11.2 两种调用方式

被动调用：
在输入框里说：

1	写一份今日开发总结。

Claude Code 检测到你的请求和 daily-report 相关，会自动请求使用该 Skill，你点同意后，它按 Skill 格式输出日报。

主动调用：
直接输入：

1	/daily-report 今天主要做了……

这样是你直接指定用这个 Skill，更加可控，省掉意图识别。

12. SubAgent：有独立上下文的"专职小助手"

SubAgent 是一个有自己上下文、工具和 Skill 的独立 Agent，用来专门负责某类任务（例如代码审查）。

12.1 创建代码审核 SubAgent

输入 /agent，选择 Create new agent。

选择类型：

项目级：所有使用此项目的人都能用。
用户级：只对当前用户生效。

视频中选择项目级。

创建方式：选"用 Claude 初始化"（推荐）。

描述这个 Agent 要干什么，比如：

1	这是一个用于代码审核的 SubAgent，在用户要求代码审核时调用它。

选择可用工具：选择 Read-only tools，代表它只能读文件不能修改。

选模型（如 Sonnet）和颜色（比如绿色）。颜色会用于界面中区分 SubAgent 的回复。

按 E 编辑 SubAgent 描述，把里面的说明替换成你期望的结构，例如：

元数据：名字、描述、模型、颜色。
审查规则：JS 审查要点、CSS 审查要点。
输出格式要求。

保存后重启 Claude Code。

12.2 使用 SubAgent

直接在主对话里说：

1	给我做一下代码审核。

Claude Code 会：

调用你刚定义好的 SubAgent；
在界面上用绿色等特殊颜色显示它的内部对话；
最终给出一份符合你规则的代码审查报告。

12.3 Agent Skill vs SubAgent 的核心区别

Agent Skill：

共享主对话上下文。
它的中间过程也会写入主上下文，容易把上下文挤爆。
适合"跟当前对话关联大、但不会产生大量中间垃圾信息"的任务，比如写日报。

SubAgent：

有自己独立的上下文。
它看的所有代码、思考过程都不会写进主对话，只把最终结果告诉你。
适合"过程很长、会产生大量中间分析"的任务，比如审核一个几万行的代码仓库。

一句话记：

想要"轻量规则、贴着主对话"的，用 Agent Skill。
想要"独立开房间、干完再回来汇报"的，用 SubAgent。

13. Plugin 插件：一键装好一整套能力

Plugin 可以看成"全家桶安装包"：把多个 Skill、SubAgent、Hook、MCP 打包在一起，一键安装。

13.1 安装 frontend-design 插件

输入 /plugin 打开插件管理。

选 Discover，搜索并安装 frontend-design 插件。
选择安装范围：
- 当前用户
- 当前项目
- 当前用户 + 当前项目
  保持默认即可。

安装完成非常快。

13.2 查看插件内容并验证

再次 /plugin，选择 Installed，可以看到 frontend-design 已安装。

回车查看详情，会发现插件内部主要就是一个名为 frontend-design 的 Agent Skill。

/skills 列表中也会出现这个 Skill。

13.3 实测：用插件做 Todo 页面

新建目录并进入：

1
2
3

mkdir my-todo-2
cd my-todo-2
claude

输入：

1	按照 frontend-design 的要求，做一个代办软件，用 HTML 实现。

Claude Code 会先请求使用 frontend-design Skill，然后根据官方沉淀的 UI 设计"直觉"写出界面。

用 ls 确认生成了 index.html，再用 !open index.html 打开。

效果：相比最开始的 Demo，UI 风格更现代、排版更高级、色彩更协调，交互体验更好。

目前插件市场还在快速增长，除了 UI 设计，还有针对编程语言的 LSP 插件等，你也可以把自己的 Skill、SubAgent、MCP 打包成 Plugin 分享给团队或社区。

14. 给小白的实战路线（建议你这样练）

你可以按下面顺序自己动手练一遍：

安装 & 登录 Claude Code，并开一个 my-todo 目录。
用自然语言做一个最简单的 HTML Todo 应用，学会三种模式切换和 ! 终端命令。
学会 /tasks 管理后台任务，知道 Ctrl + b、k、Esc 的用法。
故意做几次修改，然后用 Esc Esc + /rewind 回滚，感受回滚的能力和局限。
在 Figma 随便画一个界面，用图片方式让它仿制，再试试按视频步骤配置 Figma MCP，提高还原度。
在项目里用 /init 生成 CLAUDE.md，写上项目说明和注意事项，看它是否真的按你写的规则回答。
把 prettier Hook 配起来，体验"写完自动格式化"的爽感。
写一个简单的日报 Agent Skill，然后再做一个专职"代码审查" SubAgent，对比两者使用体验。
最后安装 frontend-design 插件，用它重做一次 Todo app，对比 UI 差异。

总结

Claude Code 是一款功能强大的 AI 编程助手，通过本文的 14 步指南，你可以从零开始掌握其核心功能。从基础安装到高级功能如 MCP 集成、Hook 自动化、Agent Skill 和 SubAgent 使用，再到插件系统扩展，Claude Code 能够显著提升开发效率和代码质量。

无论你是前端开发者、后端工程师还是全栈开发者，熟练掌握 Claude Code 都将成为你编程工具箱中的重要利器。随着 AI 编程工具的不断发展，掌握这类工具的使用方法将成为开发者的核心竞争力之一。

Happy Coding!