Claude Code 从 0 到 1 全攻略

---

目录

1. 环境搭建与基础交互
2. 三种工作模式
3. 复杂任务处理
4. [图片输入与 MCP 集成](#四图片输入与 mcp 集成)
5. 上下文管理
6. 高级功能扩展

---

一、环境搭建与基础交互

1.1 安装 Claude Code

# 访问官网复制安装命令，在终端执行
npx @anthropic-ai/claude-code

1.2 登录方式

执行 /login 触发登录流程，官方提供两种方式：

方式	说明
订阅制	Claude Pro 或 Max 会员直接授权登录
API Key	按 Token 用量计费，用多少花多少

也可使用国产模型（如 GLM、MiniMax）驱动 Claude Code，通过设置环境变量实现。

1.3 创建第一个项目

# 创建项目目录
mkdir MyStudio
cd MyStudio

# 启动 Claude Code
claude

1.4 第一个任务：待办软件

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

Claude Code 会创建 index.html 文件，有三种授权选项：

选项	说明
Yes（单次授权）	只同意创建当前文件，后续操作需再次确认
Yes, Allow all Edits during this session	本次会话期间所有文件操作自动通过
No（不同意）	拒绝，可继续输入修改意见

---

二、三种工作模式

使用 Shift + Tab 循环切换三种模式：

2.1 默认模式（Default Mode）

• 显示提示：? for shortcuts
• 最谨慎的模式，每次创建/修改文件前都会询问用户
• 适合需要精细控制的场景

2.2 自动模式（Auto Mode）

• 显示提示：/edit Auto 或 except edits on
• Claude Code 自动创建和修改文件，无需确认
• 最方便，适合信任 AI 的场景

2.3 规划模式（Plan Mode）

• 显示提示：Plan Mode
• 只讨论方案，不执行文件修改
• 适合探讨复杂任务、确定细节

---

三、复杂任务处理

3.1 使用 VS Code 编辑输入

按 Ctrl + G（Mac 也是 Ctrl+G，不是 Cmd+G）可在 VS Code 中编辑提示词：

• 支持多行编辑
• 回车随便按，不用担心误提交
• 保存关闭后自动同步到 Claude Code

3.2 项目重构示例

在 Plan Mode 中输入：

将当前的待办应用重构为使用 React + TypeScript + Vite 的效果
保留所有现有功能
且 UI 风格保持一致

按 Shift + Enter 换行。

3.3 执行计划选项

Claude Code 生成计划后，有三个选项：

选项	说明
执行并进入自动模式	执行计划，后续修改文件不再询问
执行并使用默认模式	执行计划，但每次修改前仍会询问
继续修改计划	对计划不满意可继续调整

3.4 终端命令权限

执行终端命令（如 mkdir、npm install）时，Claude Code 会单独询问：

# 危险模式启动（跳过所有权限检查）
claude --dangerously-skip-permissions

⚠️ 警告：此模式下 Claude Code 拥有完整的终端权限，可执行任何命令，谨慎使用！

3.5 后台任务管理

启动开发服务器后，服务会阻塞 Claude Code：

快捷键	功能
Ctrl + C	中断当前操作
Ctrl + \	将任务放入后台
/tasks	查看后台任务
k	结束后台任务

示例：

# 启动开发服务器
npm run dev

# 查看任务
/tasks

# 结束任务
/tasks kill <任务 ID>

3.6 回滚功能

按 **两次 **ESC 进入回滚页面：

# 或使用命令
/revert

回滚选项：

1. 代码和对话都回滚
2. 只回滚对话
3. 只回滚代码
4. 放弃回滚

⚠️ 注意：Claude Code 只能回滚它自己写入的文件，无法回滚通过终端命令（如 mkdir、npm install）生成的文件。精准回滚建议使用 Git。

---

四、图片输入与 MCP 集成

4.1 输入图片的两种方式

方式	操作
拖拽	直接将图片拖入 Claude Code 窗口
复制粘贴	复制图片后按 Ctrl + V 粘贴

4.2 MCP（Model Context Protocol）

MCP 是大模型与外界沟通的渠道。

安装 Figma MCP

# 安装 Figma MCP Server
npx -y figma-mcp@latest

授权与配置

# 查看已安装的 MCP
/mcp

# 选择 Figma -> Authenticate 进行授权
# 授权后查看可用工具
/mcp Figma -> View Tools

使用 MCP 还原 Figma 设计稿

1. 在 Figma 中复制设计稿链接（Copy link to selection）
2. 在 Claude Code 中输入：

修改当前页面，使它与 Figma 设计稿保持一致
[粘贴 Figma 链接]

Claude Code 会自动调用 MCP 工具获取设计稿的：

• 截图
• 组件信息
• 字体样式
• 颜色规范

---

五、上下文管理

5.1 压缩上下文

# 压缩上下文，保留关键信息
/compact

# 可选：指定压缩策略
/compact 重点保留用户提出的需求

压缩后：

• 性能更有保障
• Token 消耗量减少

5.2 清空上下文

# 清空所有上下文（极端操作）
/clear

适用于新任务与之前对话无关的场景。

5.3 CLAUDE.md 文件

让 Claude Code 每次启动时自动读取项目信息和用户偏好。

生成 CLAUDE.md

# 让 Claude Code 自动生成
/generate CLAUDE.md

编辑 CLAUDE.md

# 快速打开 CLAUDE.md
/memory

CLAUDE.md 有两种：

类型	作用范围	文件位置
项目级	仅当前项目	./CLAUDE.md
用户级	当前用户所有项目	~/.claude/CLAUDE.md

示例：添加自定义指令

## 注意事项
每次回答的最后，必须要追加一句：Happy Coding

---

六、高级功能扩展

6.1 Hook（钩子）

在工具执行前后自动执行自定义逻辑（如自动格式化代码）。

配置 Hook

# 进入 Hook 配置页面
/hooks

示例：自动格式化代码

{
  "trigger": "post-use",
  "matcher": "Write|Edit",
  "command": "echo '{}' | jq -r '.file_path' | xargs prettier --write"
}

保存位置选项：

级别	说明	文件位置
本地项目级	仅本项目生效	.claude/settings.local.json（加入 .gitignore）
项目级	所有使用者生效	.claude/settings.json（随 Git 分发）
用户级	当前用户所有项目	~/.claude/settings.json

6.2 Agent Skill

动态加载的 Prompt，用于标准化输出格式。

创建 Skill

# 目录结构
~/.claude/skills/DailyReport/skill.md

skill.md 示例

---
name: DailyReport
description: 生成每日开发总结
---

## 任务
根据今天的开发过程写一份每日总结

## 格式要求
1. 日期：YYYY-MM-DD
2. 开发摘要：200 字以内
3. 开发详情：分条列举
4. 遇到问题：可选
5. 明日计划：可选

使用 Skill

# 方式一：让 Claude Code 自动识别
写一份每日总结

# 方式二：主动调用
/skill DailyReport 写一份每日总结

6.3 SubAgent（子代理）

拥有独立上下文、独立工具的完整 Agent。

创建 SubAgent

/mkagent
# 或
/mkagent Agent

示例：代码审核 SubAgent

---
name: CodeReviewer
description: 用于代码审核的 SubAgent
model: sonnet
color: green
---

## 审查准则

### JavaScript/TypeScript
- 检查变量命名规范
- 检查函数复杂度
- 检查是否有未使用的导入

### CSS
- 检查是否有硬编码的颜色值
- 检查响应式设计

## 输出格式
1. 问题列表（按严重程度排序）
2. 改进建议
3. 代码示例

使用 SubAgent

# 方式一：让 Claude Code 自动识别
给我做一下代码审核

# 方式二：主动调用
/subagent CodeReviewer 审核当前代码

Agent Skill vs SubAgent

特性	Agent Skill	SubAgent
上下文	继承主对话上下文	独立上下文
日志	所有过程进入主对话	只返回最终结果
Token 消耗	较高	较低
适用场景	与上下文关联大的任务	独立的大型任务

6.4 Plugin（插件）

将 Skill、SubAgent、Hook 等能力打包成全家桶安装包。

使用插件

# 进入插件管理器
/plugins

# 选项：
# - Discover: 发现新插件
# - Installed: 已安装的插件
# - Marketplace: 插件市场

示例：Frontend Design 插件

# 安装插件
/plugins -> Discover -> Frontend Design -> Install

# 选择作用范围：
# - 当前用户
# - 当前项目
# - 当前用户的当前项目

安装后自动生成对应的 Agent Skill，可按需使用。

---

七、常用命令速查表

命令	功能
/login	登录
/compact	压缩上下文
/clear	清空上下文
/revert	回滚
/tasks	查看后台任务
/mcp	管理 MCP
/hooks	管理 Hook
/skills	管理 Skill
/subagent	管理 SubAgent
/plugins	管理插件
/memory	打开 CLAUDE.md
Ctrl + \	后台运行
Ctrl + G	VS Code 编辑
Shift + Tab	切换模式
两次 ESC	回滚页面

---

八、总结

Claude Code 的四个核心部分：

1. 环境搭建与基础交互 - 安装、登录、基本使用
2. 复杂任务处理与终端控制 - 三种模式、后台任务、回滚
3. 多模态与上下文管理 - 图片输入、MCP、上下文压缩
4. 高级功能扩展与定制 - Hook、Skill、SubAgent、Plugin