Claude Code 从 0 到 1 全攻略：MCP / SubAgent / Skill / Hook 完全指南

Claude Code 从 0 到 1 全攻略

本文整理自 B 站 UP 主 马克的技术工作坊 的视频 《Claude Code 从 0 到 1 全攻略》（84.9 万播放），并补充了额外的知识点和实践建议。

Claude Code 是 Anthropic 推出的命令行 AI 编程助手，它不只是”让 AI 写代码”，更是一个能读取代码库、编辑文件、运行命令、调用外部工具的完整编程 Agent。

本文将从安装到高级定制，系统梳理它的全部核心能力。

---

一、环境搭建与安装

1.1 安装

# 官方推荐方式
npm install -g @anthropic-ai/claude-code

# 或使用官方安装脚本
curl -fsSL https://claude.ai/install.sh | bash

补充： 如果安装慢，可使用镜像源：

npm install -g @anthropic-ai/claude-code --registry=https://registry.npmmirror.com

1.2 启动与登录

# 进入项目目录后启动
cd your-project
claude

# 手动触发登录
/login

接入方式：

• 订阅制：Claude Pro ($20/月) / Max ($100/月 或 $200/月) 会员直接使用
• API Key：按 Token 用量计费，适合重度用户

补充知识：不绑定 Claude 模型

Claude Code 是通用编程 Agent 框架，可通过环境变量配置使用其他模型：

# 使用 DeepSeek 等国产模型
export ANTHROPIC_BASE_URL=https://api.deepseek.com/anthropic
export ANTHROPIC_AUTH_TOKEN="your-api-key"
export ANTHROPIC_MODEL=deepseek-chat

---

二、三种交互模式

通过 Shift + Tab 在三种模式间循环切换：

模式	标识	行为	适用场景
默认模式	? for shortcuts	每次文件操作都询问确认	重要项目、谨慎操作
自动模式	accept edits on	自动创建/修改文件	快速迭代、信任度高
规划模式	Plan Mode On	只讨论方案不执行	架构设计、需求拆解

模式切换的黄金法则

复杂需求 → 规划模式（讨论方案）
         → 确认方案后切换到自动模式（执行）
         → 关键节点切回默认模式（人工把关）

---

三、常用快捷键与命令

3.1 快捷键速查

快捷键	功能
Shift + Tab	切换三种模式
Shift + Enter	输入框内换行
Ctrl + G	打开 VS Code 编辑长文本
Ctrl + V	粘贴图片（Mac 也用 Ctrl）
!	进入 Bash 模式执行终端命令
Ctrl + B	将运行中的任务放入后台
Ctrl + O	显示完整文件列表
ESC × 2	进入回滚页面

3.2 斜杠命令速查

命令	功能
/login	手动触发登录
/init	生成 CLAUDE.md 项目文档
/resume	恢复上次对话
/mcp	管理 MCP 工具
/compact	压缩上下文
/clear	清空所有上下文
/rewind	回滚（同 ESC × 2）
/tasks	查看后台任务
/memory	编辑 CLAUDE.md
/hooks	配置 Hooks
/skills	查看 Agent Skills
/agent	管理 SubAgents
/plugin	管理 Plugins
/model	选择模型
/cost	查看 Token 消耗
/context	查看上下文占用

---

四、终端命令与权限管理

4.1 执行终端命令

在输入框前加 ! 即可执行终端命令：

!open index.html    # 打开文件
!ls -la             # 列出目录
!npm run dev        # 启动开发服务器

4.2 权限管理策略

场景	默认行为
写入文件（自动模式）	自动通过
执行终端命令	始终询问（安全设计）
跳过所有权限检查	需启动参数

# ⚠️ 高风险模式：全自动，无询问
claude --dangerously-skip-permissions

安全建议： 这个参数让 Claude Code 拥有完整终端权限，仅在受控环境使用。生产项目务必配合 Git 版本控制。

4.3 后台任务管理

# 运行开发服务器后，按 Ctrl+B 放入后台
npm run dev
# [Ctrl + B] → 任务转入后台

# 查看后台任务
/tasks

# 在任务列表中按 k 结束指定任务

---

五、版本回滚

# 进入回滚界面
ESC ESC   # 按两下 ESC

# 或使用命令
/rewind

回滚选项：

1. 代码和会话都回滚 — 最彻底
2. 只回滚会话 — 保留代码修改
3. 只回滚代码 — 保留对话记录
4. 放弃回滚

重要限制： 只能回滚 Claude Code 直接写入的文件，终端命令（如 npm install、mkdir）产生的副作用无法回滚。

最佳实践： 关键节点手动 git commit，不要完全依赖回滚功能。

---

六、图片处理与多模态

6.1 输入图片

两种方式：

1. 拖拽法：直接将图片拖入终端窗口
2. 粘贴法：复制图片 → Ctrl + V 粘贴（Mac 也用 Ctrl，不是 Cmd）

6.2 图片 → 代码

可以截取 UI 设计图，让 Claude Code 还原为代码。但纯截图的精度有限，复杂页面建议配合 MCP 使用。

---

七、MCP（Model Context Protocol）集成

MCP 让 Claude Code 能接入外部工具获取精确数据，而不仅仅依赖图片猜测。

7.1 以 Figma MCP 为例

# 1. 安装 Figma MCP Server
claude mcp add --transport http figma https://mcp.figma.com/mcp

# 2. 重启 Claude Code
claude -c

# 3. 在 Claude Code 中授权
/mcp → 选择 figma → Authenticate

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

7.2 MCP vs 纯截图

方式	精度	信息量
截图	低，靠视觉猜测	只有像素信息
MCP	高，获取精确参数	间距、字体、颜色值、组件层级

7.3 MCP 管理命令

# 查看已安装的 MCP
claude mcp list

# 添加 MCP Server
claude mcp add --transport http <name> <url>

# 在会话中管理
/mcp

补充知识：常用 MCP Server

MCP Server	用途
Figma MCP	UI 设计稿精准还原
GitHub MCP	代码仓库操作
Postgres MCP	数据库查询
Filesystem MCP	文件系统操作
Brave Search MCP	网络搜索

---

八、上下文管理

8.1 上下文压缩

# 自动压缩，保留关键信息
/compact

# 按策略压缩（如只保留需求相关内容）
/compact 保留需求描述和代码结构

# 查看压缩后的上下文
Ctrl + O

8.2 清空上下文

/clear   # 彻底清空，适合开始全新任务

8.3 CLAUDE.md（项目记忆文件）

这是 Claude Code 最重要的配置之一——项目级的持久记忆。

# 自动生成
/init

# 手动编辑
/memory → 选择项目级或用户级

文件位置：

• 项目级：项目根目录/CLAUDE.md — 仅当前项目生效
• 用户级：~/.claude/CLAUDE.md — 全局生效

示例内容：

# 项目规范

## 技术栈
- React + TypeScript + Vite
- 样式使用 Tailwind CSS
- 状态管理使用 Zustand

## 编码规范
- 组件使用函数式编程
- 变量使用 const/let，禁止 var
- CSS 类名使用 kebab-case

## 项目结构
src/
├── components/   # UI 组件
├── hooks/        # 自定义 hooks
├── pages/        # 页面组件
├── services/     # API 调用
└── utils/        # 工具函数

## 注意事项
- 所有 API 请求使用 axios
- 错误处理统一使用 ErrorBoundary
- 每次回答最后追加：Happy Coding 🎉

最佳实践： 项目启动时第一件事就是创建 CLAUDE.md，定义好规范后，后续所有交互都会自动遵循。

---

九、Hook（自动化钩子）

Hook 让 Claude Code 在特定事件发生时自动执行脚本，类似 Git Hooks。

9.1 配置方式

/hooks   # 进入 Hook 配置界面

9.2 示例：文件保存后自动格式化

{
  "hooks": {
    "PostToolUse": [
      {
        "matcher": "Write|Edit",
        "hooks": [
          {
            "type": "command",
            "command": "jq -r '.tool_input.file_path' | xargs prettier --write"
          }
        ]
      }
    ]
  }
}

前提：需先安装 npm install -g prettier

9.3 Hook 保存范围

范围	说明
Local	仅本机本项目（会加入 .gitignore）
Project	项目级，随 Git 共享给团队
User	用户级，全局所有项目生效

补充：常见 Hook 场景

• PostToolUse + Write|Edit → 自动格式化代码
• PostToolUse + Write|Edit → 自动运行 ESLint
• PreToolUse + Bash → 审核危险命令
• PostToolUse + Bash → 命令执行后通知

---

十、Agent Skill（智能体技能）

Skill 是提前写好的”工作手册“，让 Claude Code 按特定格式和流程响应。

10.1 创建 Skill

# 创建目录
mkdir -p ~/.claude/skills/daily-report

# 编写 SKILL.md

10.2 Skill 文件示例（日报生成）

---
name: daily-report
description: 根据今日代码变更生成开发日报。当用户想要总结工作、写日报时触发。
---

# daily-report

## 格式要求

请严格按照以下 Markdown 格式输出：

# 🗓️ 开发日报 (YYYY-MM-DD)

## 💡 今日摘要
（用一句话总结今天的主要产出）

## 📝 详细变更

### ✨ 新增功能
- [模块名] 详情...

### 🐛 问题修复
- [模块名] 详情...

### 🔧 优化改进
- [模块名] 详情...

## 📅 明日计划
- 计划事项...

## ⚠️ 注意事项
- 使用中文
- 语气专业简洁

10.3 使用方式

# 查看已安装 Skills
/skills

# 自然语言触发（自动识别匹配的 Skill）
写一份今天的开发日报

# 或用斜杠命令
/daily-report

---

十一、SubAgent（子代理）

SubAgent 拥有独立的上下文，适合处理与主对话隔离的大量任务。

11.1 Skill vs SubAgent

特性	Agent Skill	SubAgent
上下文	共享主对话上下文	完全独立上下文
日志	全部记入主对话	仅最终结果返回
适用场景	与上下文关联大的轻量任务	与上下文关联小的大量任务
示例	写日报、格式化输出	代码审核、大规模重构

核心区别一句话： Skill 是”在同一张桌子上干活”，SubAgent 是”派到隔壁房间干活，只把结果拿回来”。

11.2 创建 SubAgent

/agent → Create new agent
# 1. 选择级别：Project / User
# 2. 选择方式：Claude 初始化 / 手动创建
# 3. 描述职责
# 4. 选择工具权限（代码审核建议 Read-only）
# 5. 选择模型和标识颜色

11.3 SubAgent 配置示例（代码审核员）

---
name: code-reviewer
description: 请求代码审查或 Code Review 时调用。
model: sonnet
color: green
tools: ["Read", "Grep", "Search"]
---

你是一个严格的代码规范审查员。

## 审查准则

1. **JS 变量**：严禁使用 `var`，必须用 `const` 或 `let`
2. **CSS 命名**：必须使用 `kebab-case`，禁止驼峰
3. **未使用变量**：检查 import 但未使用的模块
4. **安全风险**：检查 eval、innerHTML 等危险调用

## 输出格式

- ❌ **违反规则**：简述问题
- 📍 **位置**：文件名及行号
- 💡 **修正建议**：给出修改后的代码

如果代码符合规范：✅ 检查完毕，代码符合团队核心规范。

11.4 使用

# 自然语言触发
给我做一下代码审核

# SubAgent 的输出会以独特颜色标识（如绿色）

---

十二、Plugin（插件全家桶）

Plugin 将 Skill、SubAgent、Hook、MCP 等能力打包为可安装的插件。

12.1 管理插件

/plugin

选项	功能
Discover	发现新插件
Installed	查看已安装插件
Marketplaces	浏览插件市场

12.2 安装示例

/plugin → Discover → 搜索 "frontend-design"
# 选择安装范围：User / Project
# 安装后重启 Claude Code

12.3 使用

# 安装后查看新增的 Skills
/skills

# 使用
按照 frontend-design 的规范，做一个待办应用

---

十三、六大扩展点总结

Claude Code 的强大在于提供了六大扩展点，让你可以深度定制 AI 行为：

扩展点	作用	存储位置	类比
CLAUDE.md	项目记忆 & 规范	项目根目录 / ~/.claude/	员工手册
Hook	事件驱动的自动化	settings.json	Git Hooks
Agent Skill	动态 Prompt 模板	~/.claude/skills/	工作 SOP
SubAgent	独立上下文的子代理	~/.claude/agents/	专项团队
MCP	外部工具接入	claude mcp add	万能接口
Plugin	能力全家桶	/plugin 管理	应用商店

                    ┌─────────────┐
                    │  CLAUDE.md  │ ← 项目记忆
                    └──────┬──────┘
                           │
    ┌──────────┬───────────┼───────────┬──────────┐
    │          │           │           │          │
┌───┴──┐  ┌───┴───┐  ┌────┴────┐ ┌────┴───┐ ┌───┴────┐
│ Hook │  │ Skill │  │SubAgent│ │  MCP   │ │Plugin │
└──────┘  └───────┘  └────────┘ └────────┘ └───────┘
 自动化     Prompt     独立代理    工具接入    全家桶

---

十四、最佳实践与安全建议

安全建议

1. 慎用 --dangerously-skip-permissions — 仅在受控环境使用
2. 敏感操作前切回默认模式 — 人工确认关键修改
3. 配合 Git — 关键节点手动 commit，不完全依赖回滚
4. 定期 /compact — 防止上下文过长导致性能下降和费用增加

效率建议

1. 第一步创建 CLAUDE.md — 定义规范，减少重复说明
2. 复杂任务先 Plan Mode — 确定方案再执行
3. 长任务放后台 — Ctrl + B 不阻塞主流程
4. 善用 Hook — 自动化格式化、lint 等重复操作
5. 区分 Skill 和 SubAgent — 大量代码操作用 SubAgent 保护主上下文

推荐工作流

# 1. 初始化项目
mkdir new-project && cd new-project
claude

# 2. 生成项目记忆
/init
# 编辑 CLAUDE.md 添加项目规范

# 3. 规划复杂功能
Shift+Tab → Plan Mode
描述需求 → 审查计划 → 确认执行

# 4. 开发迭代
Shift+Tab → 自动模式
描述功能 → 自动编码

# 5. 代码审核
调用 SubAgent 审核

# 6. 上下文管理
/compact   # 定期压缩

# 7. 提交代码
!git add . && git commit -m "feat: ..."

---

十五、与同类工具对比

特性	Claude Code	Cursor	GitHub Copilot
运行环境	终端 CLI	IDE 内嵌	IDE 插件
终端命令执行	✅ 原生支持	⚠️ 有限	❌
MCP 协议	✅	✅	❌
SubAgent	✅	❌	❌
Hook 自动化	✅	❌	❌
模型灵活性	✅ 可换模型	✅ 可换模型	⚠️ 主要 GPT
学习曲线	较高	较低	最低
适合场景	工程化开发	日常编码	代码补全

一句话总结： Claude Code 更像一个”AI 工程师同事”，而 Cursor/Copilot 更像”AI 打字助手”。

---

参考资料

• 马克的技术工作坊 - Claude Code 从 0 到 1 全攻略
• Claude Code 官方文档
• MCP 官方规范
• Figma MCP Server