以下是为观看Bilibili视频《Claude Code 从 0 到 1 全攻略》（BV14rzQB9EJj）后整理的详细操作指令说明书。本手册以视频讲解的逻辑顺序为主线，结合Claude Code（截至2025–2026年主流版本）的实际使用规范，力求提供可直接复制执行的步骤。所有命令假设您已在终端（macOS/Linux/Windows WSL/PowerShell均可）中操作。

前置条件

• Node.js ≥ 18（推荐20+ LTS）
• Anthropic API Key（claude.ai 或 console.anthropic.com 获取）
• Git（可选，但强烈推荐用于项目管理）
• 具备基本的终端操作能力

I. 安装与首次登录

1. 全局安装 Claude Code

   npm install -g @anthropic-ai/claude-code
   

   或使用pnpm/yarn：

   pnpm add -g @anthropic-ai/claude-code
   

2. 验证安装

   claude --version
   

3. 首次启动并登录

   claude
   

   • 程序会输出一个URL，复制到浏览器打开
   • 使用Claude账号授权（OAuth）
   • 授权完成后终端会自动收到token并保存至 ~/.claude/config.json

4. （可选）手动配置API Key（国内网络或多账号场景）
   编辑 ~/.claude/config.json：

   {
     "apiKey": "sk-ant-您的key",
     "defaultModel": "claude-4-opus-2025XXXX"
   }
   

II. 三种核心交互模式

启动方式统一为：在项目目录下执行 claude 进入交互界面。

1. 默认模式（最常用）
   直接输入自然语言指令，例如：

   请帮我用Next.js 15 App Router 重构这个旧的 pages 目录结构
   

2. 自动批准模式（–yes / -y）
   适合信任Claude的场景，自动执行所有文件修改/命令

   claude -y
   

   或在会话中输入：

   /yes
   

3. 规划模式（Plan Mode，最安全）
   先输出完整计划，人工确认后再执行

   claude --plan
   

   或会话中：

   /plan
   请先给出完整实施方案，不执行任何修改
   

III. 危险参数与权限控制（谨慎使用）

跳过所有确认（极高风险，仅限可控环境）：

claude --dangerously-skip-permissions
# 或简写
claude -d

推荐替代方案：在会话开始输入：

/config dangerous_skip_permissions true

IV. 后台任务（Background Tasks）

1. 启动后台任务
   在claude会话中输入：

   /bg 开始长期任务：帮我分析整个 monorepo 的依赖冲突并提出升级方案
   

2. 查看任务列表

   /bg list
   

3. 查看特定任务日志

   /bg logs <task-id>
   

4. 终止任务

   /bg stop <task-id>
   

V. 多模态与图片处理

1. 上传图片
   在claude交互界面直接拖拽图片，或使用命令：

   /upload /path/to/screenshot.png
   

2. 典型指令示例

   这张Figma截图是登录页设计，请完全按照它生成React + Tailwind 的代码
   

VI. MCP Server（最强外接工具能力，以Figma为例）

1. 安装Composio MCP（目前最成熟的MCP方案）

   npm install -g @composio/mcp
   

2. 生成Figma专用MCP

   • 访问 https://mcp.composio.dev 或 Composio dashboard
   • 选择Figma → 创建integration → 复制生成的MCP URL（形如 https://xxxx.mcp.composio.dev/xxx）

3. 安装并命名

   npx @composio/mcp@latest setup "https://xxxx.mcp.composio.dev/xxxx" "figma-myproject"
   

4. 在Claude Code中使用
   会话中直接说：

   使用figma-myproject MCP，把这个Figma链接的文件第3帧的登录页面完全还原成代码：https://www.figma.com/file/xxxx
   

VII. 项目记忆与上下文管理

1. 创建项目级记忆文件（强烈推荐）
   在项目根目录创建 CLAUDE.md（或 .claude/CLAUDE.md）

   示例内容：

   # 项目规范
   
   - 技术栈：Next.js 15 App Router + TypeScript + Tailwind + shadcn/ui
   - 代码风格：使用单引号，semi: true，尾逗号
   - 文件命名：kebab-case for components
   - 所有API调用必须带错误处理和loading状态
   

2. 常用上下文管理命令

   • 清空当前会话上下文：/clear
   • 压缩上下文（保留关键信息）：/compress
   • 回滚到上N次状态：/rewind 3
   • 恢复历史会话：/resume <session-id>

VIII. 高级扩展开发

1. Agent Skill（轻量、可复用工具函数）

   • 在项目根创建 .claude/skills/my-skill.md

   • 内容示例：

     ---
     name: optimize-image
     description: 自动压缩并转换图片为WebP
     ---
     
     执行以下命令：
     npx sharp input.jpg -o output.webp --webp
     git add output.webp
     

   • 使用方式：

     /skill optimize-image public/hero.jpg
     

2. SubAgent（子代理，适合复杂多角色协作）

   • 手动创建：

     /agents create frontend-dev "你是一个Next.js专家，专注组件开发"
     /agents create reviewer "你是一个资深Code Reviewer，关注性能、安全、可读性"
     

   • 自动批量创建（高级）：

     根据以下角色模板，自动为我创建10个子代理：产品经理、后端工程师、UI设计师……
     

3. Hook（生命周期钩子，自动化前后置处理）

   • 在 .claude/hooks/pre-plan.js 中编写：

     module.exports = async (plan) => {
       console.log("即将执行计划：", plan.goal);
       // 可添加自动git commit等
     };
     

快速参考命令表

如在实际操作中遇到具体报错（例如MCP连接失败、模型限速、权限拒绝等），请提供错误截图或完整日志，我可进一步给出针对性解决方案。建议将本手册保存为本地Markdown文件，便于随时查阅。