↓ 跳过正文
Hideaway
  1. 所有文章/

Claude Code 全面上手指南：不只是写代码

·4501 字·9 分钟·
技术教程 AI Agent Claude Code Skill MCP
Aaron
作者
Aaron
I only know that I know nothing.
目录

前言
#

Claude Code 出来有一阵子了，身边不少朋友都试过，但大部分人还停留在「输入需求、等它写代码」的阶段。说真的，Claude Code 的能力远不止于此。想要真正把它用顺手、嵌入日常开发流程，有不少细节值得了解。这篇文章把我在实战中摸索出来的用法整理了一遍，从安装配置到高级定制，力求覆盖一条完整的链路。

另外，像 Codex、OpenCode 这些同类产品，底层架构和使用方式跟 Claude Code 大同小异。把 Claude Code 摸透了，迁移到其他工具基本没什么门槛。

安装与登录
#

安装就一行命令，去 Claude Code 官网复制安装脚本，在终端粘贴执行即可。

安装完成后，在项目目录下运行 claude 命令启动。首次使用会提示登录，也可以手动执行 /login 触发。Claude Code 提供两种接入方式：

  • 订阅制：购买了 Claude Pro 或 Max 会员，直接授权使用，省心
  • API Key 按量计费：用多少花多少，适合轻量使用

如果你无法访问 Claude 官方服务，Claude Code 本身并不绑定特定模型。通过设置环境变量，可以接入 GLM、Minimax 等国产模型来驱动1。

三种交互模式
#

Claude Code 有三种工作模式，通过 Shift+Tab 循环切换。理解它们的区别，是用好 Claude Code 的基础。

默认模式
#

启动后的初始模式。底栏只显示一行灰色提示 ? for shortcuts，没有额外的模式标签。这种「什么都不标注」的状态就是默认模式。

在这个模式下，Claude Code 每次创建或修改文件前都会征求你的同意。三个选项分别是：

  • Yes：单次授权，仅同意当前这次操作
  • Yes, allow all edits during this session：本次会话期间，所有文件操作自动通过
  • No：拒绝，你可以继续输入想法

默认模式最为稳妥，适合对代码变更比较敏感的场景。

自动模式（Accept Edits On）
#

底栏显示 Accept Edits On 时表示处于自动模式。此时 Claude Code 会直接创建和修改文件，不再逐一询问。做需求迭代的时候效率很高，尤其是那种「让它一口气改十几个文件」的场景。

规划模式（Plan Mode）
#

底栏显示 Plan Mode On。这个模式只讨论方案，不写入任何文件。适合在动手之前理清思路、确定细节，后面会单独展开讲。

Plan Mode：先想清楚再动手
#

假设你有一个用 HTML 写的小项目，想迁移到 React + TypeScript + Vite 的架构。这种涉及目录结构调整的大改动，直接让 Claude Code 开干容易翻车。更好的做法是先进入 Plan Mode，把方案聊清楚。

操作流程是这样的：

  1. 按 Shift+Tab 切到 Plan Mode
  2. 输入你的需求，比如「将当前项目重构为 React + TypeScript + Vite，保留所有现有功能，UI 风格保持一致」

这里有个小技巧：输入多行内容时，按 Shift+Enter 换行，直接按 Enter 会提交请求。如果你觉得终端的输入框不够好用，可以按 Ctrl+G 打开 VS Code 编辑器来写，保存关闭后内容会自动回到 Claude Code 的输入框里。

Claude Code 会输出一份完整的计划，包含目标、文件清单、目录结构等。它还会给你三个选项：

  • 执行计划并进入自动模式：后续改文件不再询问
  • 执行计划并保持默认模式：后续改文件仍需逐一确认
  • 继续修改计划：对方案不满意，可以继续补充需求

比如你觉得计划里少了「给每个待办事项增加优先级标记（高/中/低），用不同颜色区分」这个需求，就选第三个选项补充进去。Claude Code 会重新生成一份修改后的计划。

确认计划后选择执行，Claude Code 就开始按步骤实施了。

一个容易踩的坑：自动模式只针对文件读写操作。终端命令（比如 mkdir、npm install）属于更敏感的操作，Claude Code 默认每次都会询问。如果你希望彻底跳过所有权限检查，可以在启动时加上 --dangerously-skip-permissions 参数。顾名思义，官方在参数名里就写了「dangerously」，意味着 Claude Code 将拥有完整的终端权限，不会征求任何确认。效率拉满，但风险自担。

终端命令与后台任务
#

执行终端命令
#

在 Claude Code 的输入框里输入 ! 开头，就进入了 Bash 模式，可以运行任意终端命令。比如 ! ls 查看文件列表，! open index.html 在浏览器中打开页面。

后台任务
#

有一个容易忽略的点：某些命令（比如 npm run dev 启动开发服务器）会阻塞 Claude Code。服务在跑的时候，Claude Code 无法响应新的请求。

解决办法是按 Ctrl+B 把任务放到后台。之后你可以继续和 Claude Code 交互。用 /tasks 命令查看当前运行的后台任务，在任务列表里按 K 可以关掉指定的后台服务。

回滚操作
#

Claude Code 在你每次提交请求时都会自动创建一个回滚点。连按两下 Esc 就能进入回滚页面，选择一个回滚点后，有四种操作：

  • 回滚代码和会话：文件内容和对话记录都恢复
  • 仅回滚会话：只恢复对话，文件不动
  • 仅回滚代码：只恢复文件，对话保留
  • 放弃回滚

回滚功能用起来很方便，但有一个限制：它只能回滚 Claude Code 自己写入的文件。通过终端命令创建的目录、安装的依赖包等，Claude Code 无法自动清理。如果你需要精准回滚，还是得靠 Git。

图片输入与 Figma MCP
#

直接传图片
#

想让 Claude Code 照着设计稿写页面？直接把图片拖进终端，或者复制图片后按 Ctrl+V 粘贴。注意，即使在 macOS 上也要用 Ctrl+V，Cmd+V 不起作用。

传完图片后继续输入需求，Claude Code 就会参考图片来生成代码。不过说实话，纯靠图片做 UI 还原精度有限，字体大小、间距这些细节很难做到像素级准确。

接入 Figma MCP
#

如果设计稿在 Figma 上，有一个更精确的方案：接入 Figma 的 MCP Server2。

MCP（Model Context Protocol）是大模型与外部工具通信的协议。通过 Figma MCP，Claude Code 不仅能拿到设计稿的截图，还能获取完整的组件间距、字体样式、颜色值等结构化信息。

配置步骤：

  1. 安装 Figma MCP Server（一行命令，官方文档有写）
  2. 重启 Claude Code，用 -c 参数（claude -c）恢复上次对话
  3. 执行 /mcp 命令，选择 Figma 工具进行授权
  4. 授权完成后，直接输入需求，比如「修改当前页面，使它与 Figma 稿件保持一致」，附上 Figma 的设计稿链接

Claude Code 会自动识别到 Figma MCP，调用 get_design_context 和 get_screenshot 等工具获取设计信息，然后根据这些结构化数据来修改代码。还原精度比单纯看图片高很多。

上下文管理
#

对话进行到一定阶段，上下文里会堆积大量代码片段、工具调用结果等信息。这些信息中有用的和无用的混杂在一起，既影响模型性能，又浪费 Token。

/compact：压缩上下文
#

执行 /compact 命令可以对上下文做智能压缩，Claude Code 会把冗余信息精简掉，保留核心内容。压缩完成后按 Ctrl+O 可以查看压缩结果。你会发现之前一大段对话内容被浓缩成了几行关键信息。

你还可以在 /compact 后面附加具体的压缩策略，比如 /compact 重点保留用户提出的需求，让压缩结果更符合你的预期。

不过压缩的可控性有限，你没法直接编辑压缩后的内容。

/clear：清空上下文
#

比压缩更彻底。/clear 直接把所有上下文内容清空，适合前后任务完全无关的场景。

CLAUDE.md：让 Claude Code 更懂你
#

无论是压缩还是清空，上下文始终和某次会话绑定。换个会话 Claude Code 就什么都不知道了。有没有办法让 Claude Code 每次启动都自动读取一些预设信息？

这就是 CLAUDE.md 的作用。你可以在里面写明项目的技术栈、代码风格偏好、注意事项等等。Claude Code 每次启动都会自动加载这个文件。

用 /init 命令可以自动生成一份初始的 CLAUDE.md，然后根据需要修改。比如我在末尾加了一条：「每次回答的最后必须追加 Happy Coding」。重启后随便问个问题，Claude Code 果然在回复末尾加上了这句话。

CLAUDE.md 分两个级别：

  • 项目级：放在项目根目录，对这个项目生效，可以提交到 Git 供团队共享
  • 用户级：放在用户目录下，对所有项目生效

用 /memory 命令可以快速打开对应级别的 CLAUDE.md 文件，不用在文件管理器里翻。

Hook：自动化你的工作流
#

Hook 允许你在特定时机（工具执行前/后、执行失败时等）自动运行一段自定义逻辑。一个典型的应用场景是代码格式化：让 Claude Code 每次写完文件后自动跑一遍 Prettier。

配置方式：

  1. 执行 /hooks 进入 Hook 配置页面
  2. 选择触发时机，比如 Post Tool Use（工具执行后）
  3. 选择匹配的工具，比如 Write 或 Edit
  4. 输入要执行的命令

命令大概长这样：

echo '$TOOL_INPUT' | jq -r '.file_path' | xargs prettier --write

Claude Code 在触发 Hook 时会传入一个 JSON，其中 file_path 就是刚编辑完的文件路径。用 jq 提取路径，再传给 Prettier 格式化。

Hook 的保存位置有三个选项：

  • 本地项目级（settings.local.json）：只在本机本项目生效，不进 Git
  • 项目级（settings.json）：所有使用这个项目的人都生效，会随 Git 分发
  • 用户级：对当前用户的所有项目生效

Agent Skill：可复用的提示词模板
#

如果你经常需要 Claude Code 按特定格式输出内容（比如每天写一份包含日期、开发摘要、开发详情的开发日志），每次手动粘贴格式要求太麻烦。这种场景适合用 Agent Skill 来解决3。

Agent Skill 本质上是一个动态加载的 Prompt。你把格式要求写在 skill.md 里，Claude Code 会根据用户请求自动匹配并加载对应 Skill。它也可以通过 /skill-name 的方式手动调用，省去模型意图识别的环节。

SubAgent：独立上下文的利器
#

Agent Skill 运行时完全共享当前对话的上下文。这意味着 Skill 执行过程中的所有日志、思考过程都会塞进你的上下文窗口。对于轻量任务没什么问题，但如果让 Skill 去审核一个几万行代码的项目，中间过程会把上下文撑爆，Token 消耗飙升，模型也会因为上下文过载而变慢。

SubAgent 解决了这个问题。它拥有完全独立的上下文，启动时开辟一个全新的对话窗口，所有中间过程都在那个窗口里完成。只有最终的执行结果会汇报回主对话。

两者在上下文处理上的区别决定了各自的适用场景：

维度 Agent Skill SubAgent
上下文 共享主对话 完全独立
适合场景 与上下文强关联、对上下文影响小 与上下文弱关联、对上下文影响大
典型任务 写开发总结、格式转换 代码审核、大规模重构分析

创建 SubAgent 的流程：执行 /agent 命令，选择「Create New Agent」，描述它的职责，配置可用工具（比如只读权限）和使用的模型。Claude Code 会生成一份初始描述文件，你可以根据需要修改。之后在对话中提出相关需求，Claude Code 会自动调用对应的 SubAgent。

Plugin：一键安装全家桶
#

Plugin 把 Skill、SubAgent、Hook、MCP 等能力打包成一个安装包，一键就能给 Claude Code 装备一整套高级能力。

在 Claude Code 里执行 /plugin 进入插件管理器，可以浏览、安装和查看已安装的插件。安装时选择生效范围（用户级、项目级等），然后重启 Claude Code 即可生效。

举个例子，Anthropic 官方提供了一个 frontend-design 插件，内置了一套 UI 设计规范。安装后让 Claude Code 做前端页面，它会自动加载这套规范，输出的界面在配色、排版、交互上都比默认效果好看不少。

Plugin 市场正在快速增长。除了 UI 设计类的插件，还有针对特定编程语言的 LSP 插件等。如果你觉得自己积累的配置足够成熟，也可以打包成 Plugin 分享给团队或社区。

总结
#

这篇文章覆盖了 Claude Code 从入门到进阶的完整链路：

  • 三种模式（默认/自动/规划）灵活切换，适应不同场景
  • Plan Mode 先规划后执行，降低改动风险
  • 后台任务 解决长时间运行命令的阻塞问题
  • 回滚功能 提供安全网，但复杂场景还是得靠 Git
  • 图片和 Figma MCP 实现设计稿到代码的转换
  • 上下文管理（/compact、/clear）控制 Token 消耗
  • CLAUDE.md 让 Claude Code 自动读取项目配置
  • Hook 在关键节点自动执行自定义逻辑
  • Agent Skill 和 SubAgent 分别处理轻量和重量级任务
  • Plugin 一键安装整套能力扩展

每个功能单独看都不复杂，组合起来就是一个相当完备的开发工作流。希望这篇梳理对你有帮助。

  1. 具体配置方法网上有很多教程，核心就是设置几个环境变量来指定模型接口地址和认证信息。 ↩︎

  2. 关于 MCP 的详细使用方法和设计原理，我在之前的文章里有专门讨论。 ↩︎

  3. 关于 Agent Skill 的完整用法和底层设计思路，可以参考我之前写的 Agent Skill 专题文章。 ↩︎