Claude Code 完整实战攻略 （YouTube视频总结）
Claude Code 完整实战攻略
Claude Code 从 0 到 1 全攻略 —— MCP / SubAgent / Agent Skill / Hook / 图片 / 上下文处理/ 后台任务 / 权限 ......
目录
一、快速入门与安装
1.1 安装Claude Code
# 复制官方安装命令并执行
npm install -g @anthropic-ai/claude-code
1.2 启动与登录
# 进入项目目录后启动
cd your-project
claude
# 如果未自动提示登录，手动触发
/login
接入方式选择：
- 订阅制：Claude Pro/Max会员直接选择
- API Key：按Token用量计费
💡 提示：Claude Code是通用编程Agent，不绑定Claude模型。可通过环境变量配置使用国产模型（如GLM、MiniMax等）。
二、基础交互模式
2.1 三种核心模式（Shift + Tab 切换）
| 模式 | 标识 | 特点 | 适用场景 |
|---|---|---|---|
| 默认模式 | ? for shortcuts |
每次文件操作都询问用户 | 谨慎操作、重要项目 |
| 自动模式 | accept edits on |
自动创建/修改文件，不询问 | 快速迭代、信任度高 |
| 规划模式 | Plan Mode On |
只讨论不执行，用于方案设计 | 复杂需求、架构设计 |
2.2 常用快捷键
| 快捷键 | 功能 |
|---|---|
Shift + Tab |
切换三种模式 |
Shift + Enter |
输入框内换行 |
Ctrl + G |
打开VS Code编辑（需先安装VS Code） |
Ctrl + V |
粘贴图片（Mac也用Ctrl，非Cmd） |
! |
进入Bash模式执行终端命令 |
Ctrl + B |
将运行中的任务放入后台 |
Ctrl + O |
显示完整文件列表 |
ESC (按两下) |
进入回滚页面 |
2.3 基础命令示例
# 创建项目目录
mkdir my-todo && cd my-todo
# 打开Claude Code
claude
# 在Claude Code内执行终端命令（前面加!）
!open index.html
!ls -la
!npm run dev
三、复杂任务处理
3.1 规划模式（Plan Mode）使用流程
适用场景：架构重构、复杂功能开发
1. 按 Shift + Tab 进入 Plan Mode
2. 输入详细需求（Shift + Enter换行）
3. Claude生成执行计划
4. 选择：
- [执行并进入自动模式]
- [执行但保持询问模式]
- [继续修改计划]
示例：重构项目架构
将当前待办应用重构为使用 React + TypeScript + Vite 的项目
保留所有的现有功能
且 UI 风格保持一致
3.2 终端命令权限管理
| 场景 | 处理方式 |
|---|---|
| 写入文件（自动模式） | 自动通过，不询问 |
| 执行终端命令 | 始终询问（安全设计） |
| 跳过所有权限检查 | 启动时加 --dangerously-skip-permissions |
⚠️ 警告：--dangerously-skip-permissions 会让Claude Code拥有完整终端权限，存在理论风险，谨慎使用！
# 高风险模式（全自动，无询问）
claude --dangerously-skip-permissions
# 显示：bypass permissions on
3.3 后台任务管理
# 查看后台任务
/tasks
# 在任务列表中按 k 结束指定任务
# 按 ESC 返回主界面
典型场景：运行 npm run dev 开发服务器时，按 Ctrl + B 放入后台，不影响后续交互。
四、多模态与上下文管理
4.1 图片输入方式
- 拖拽法：直接将图片拖入终端
- 粘贴法：复制图片 →
Ctrl + V粘贴（Mac也是Ctrl）
4.2 MCP（Model Context Protocol）集成
以Figma MCP为例：
# 1. 安装MCP Server（按官方文档）
// npm install -g @figma/mcp-server
claude mcp add --transport http figma https://mcp.figma.com/mcp
# 2. 重启Claude Code `claude -c`
# 3. 鉴权使用
/mcp → 选择 figma → Authenticate
如果没有figma的账号需要注册一个登录后就可用mcp了。
# 4. 使用Figma设计稿
# 复制Figma设计稿链接，粘贴到需求中
修改当前的页面，使它与Figma稿件保持一致
[粘贴Figma链接]
优势：获取精确的设计参数（间距、字体、颜色值），而非仅靠图片猜测。
复杂的页面复原还是有问题，可能是大模型的能力有限。
可以做的：
- 将网页转换为 Figma 设计
- 将figma设计转换为 html
不可以：
- 从零开始创建新设计
4.3 上下文压缩与清理
| 命令 | 功能 | 使用场景 |
|---|---|---|
/compact |
压缩上下文，保留关键信息 | 上下文过长，性能下降 |
/compact [策略] |
按策略压缩（如保留需求） | 需要保留特定信息 |
/clear |
清空所有上下文 | 新任务与历史无关 |
# 查看压缩后的上下文
/compact
Ctrl + O # 查看压缩结果
4.4 回滚功能（Rewind）
# 进入回滚界面
ESC ESC # 按两下ESC
# 选择回滚点 → 选择回滚范围：
# - 代码和会话都回滚
# - 只回滚会话
# - 只回滚代码
# - 放弃回滚
⚠️ 限制：只能回滚Claude Code写入的文件，终端命令生成的文件（如npm install）无法回滚。建议重要项目配合Git使用。
五、高级功能扩展
5.1 CLAUDE.md（项目记忆）
作用：让Claude Code每次进入项目时自动读取，了解项目背景、规范要求。
# 自动生成
/init
# 手动编辑
# 文件位置：项目根目录 / CLAUDE.md
# 或用户目录 ~/.claude/CLAUDE.md（全局生效）
# 通过命令打开编辑
/memory → 选择项目级或用户级
示例内容：
# 项目规范
- 使用TypeScript严格模式
- 组件使用函数式编程
- 样式使用Tailwind CSS
## 注意事项
每次回答最后追加：Happy Coding
5.2 Hooks（自动化钩子）
配置路径：/hooks
示例：自动格式化代码
# 配置PostToolUse钩子
时机：PostToolUse
匹配工具：write 或 edit
命令：
echo '{"file_path": "<file_path>"}' | jq -r '.file_path' | xargs prettier --write
保存范围选择：
- Local：仅本机本项目（
.gitignore） - Project：项目级，随Git共享
- User：用户级，全局生效
5.3 Agent Skills（动态Prompt）
创建路径：~/.claude/skills/<skill-name>/SKILL.md
示例：日报生成Skill
---
name: daily-report
description: 根据今日开发内容生成日报
---
请根据今天的代码变更，生成一份日报，包含：
1. 日期
2. 开发摘要（3句话内）
3. 详细改动点
4. 明日计划
使用方法：
# 查看已安装Skills
/skills
# 方式1：自然语言触发（自动识别）
写一份每日总结
# 方式2：主动调用
/daily-report [具体需求]
5.4 SubAgents（独立Agent）
与Skill的区别：
| 特性 | Agent Skill | SubAgent |
|---|---|---|
| 上下文 | 共享主对话上下文 | 完全独立上下文 |
| 日志记录 | 全部记入主对话 | 仅最终结果返回 |
| 适用场景 | 与上下文关联大的轻量任务 | 与上下文关联小的大量任务 |
| 示例 | 写日报、格式化代码 | 代码审核、大规模重构 |
创建SubAgent：
/agent → Create new agent
# 选择：Project/User 级别
# 选择：Claude初始化 或 手动创建
# 描述Agent职责
# 选择工具权限（建议代码审核用Read-only）
# 选择模型和标识颜色
SubAgent配置示例（代码审核）：
---
name: code-reviewer
model: sonnet
color: green
tools: ["Read", "Grep", "Search"]
---
你是专业的代码审核员，审查时请重点关注：
1. JS代码：检查潜在Bug、性能问题
2. CSS代码：检查浏览器兼容性
3. 输出格式：按严重程度分级列出问题
调用方式：
# 自然语言触发
给我做一下代码审核
# 查看SubAgent输出（绿色标识）
5.5 Plugins（插件全家桶）
管理命令：/plugin
| 选项 | 功能 |
|---|---|
| Discover | 发现新插件 |
| Installed | 查看已安装插件 |
| Marketplaces | 浏览插件市场 |
安装示例（frontend-design插件）：
/plugin → Discover → 选择 frontend-design
# 选择生效范围：User / Project / User+Project
使用插件：
# 安装后重启Claude Code
# 查看已安装Skills（插件通常包含Skill）
/skills
# 使用
按照 frontend-design 的要求，做一个待办软件
六、最佳实践与安全建议
6.1 安全建议
- 慎用
--dangerously-skip-permissions：虽然能提升效率，但理论上存在风险 - 敏感操作前切换默认模式：重要文件修改前确保开启询问
- 结合Git使用：不要完全依赖Claude Code的回滚，关键节点手动commit
- 定期
/compact：防止上下文过长导致性能下降和Token浪费
6.2 效率建议
- 项目初始化时创建CLAUDE.md：定义好规范，减少重复说明
- 复杂任务先用Plan Mode：确定方案再执行，避免返工
- 长任务放入后台：使用
Ctrl + B，不阻塞主流程 - 善用Hooks：自动化格式化、 lint等重复操作
- 区分Skill和SubAgent：大量代码操作时用SubAgent保护主上下文
6.3 典型工作流程
# 1. 初始化项目
mkdir new-project && cd new-project
claude
# 2. 生成CLAUDE.md
/init
# 编辑CLAUDE.md，添加项目规范
# 3. 规划复杂功能
Shift+Tab（切换到Plan Mode）
描述需求 → 审查计划 → 同意执行
# 4. 开发迭代（自动模式）
Shift+Tab（切换到accept edits on）
描述功能 → 自动编码
# 5. 代码审核
调用SubAgent审核代码
# 6. 上下文管理
/compact # 定期压缩
附录：命令速查表
| 命令 | 功能 |
|---|---|
/login |
手动触发登录 |
/resume |
恢复上次对话 |
/mcp |
管理MCP工具 |
/compact |
压缩上下文 |
/clear |
清空上下文 |
/rewind |
回滚（同ESC ESC） |
/tasks |
查看后台任务 |
/memory |
编辑CLAUDE.md |
/hooks |
配置Hooks |
/skills |
查看Agent Skills |
/agent |
管理SubAgents |
/plugin |
管理Plugins |
claude -c |
启动并恢复上次对话 |
claude --dangerously-skip-permissions |
跳过所有权限（高风险） |
提示：Claude Code与Codex、OpenCode等同类工具原理相通，掌握后可快速迁移使用。
浙公网安备 33010602011771号