大家好，我是讯享网，很高兴认识大家。这里提供最前沿的Ai技术和互联网信息。



---

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

---

1.1 安装 Claude Code

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

1.2 登录方式

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

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

1.3 创建第一个项目

# 创建项目目录 mkdir MyStudio cd MyStudio

# 启动 Claude Code claude

1.4 第一个任务：待办软件

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

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

---

使用 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：

示例：

# 启动开发服务器 npm run dev

# 查看任务 /tasks

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

3.6 回滚功能

按 两次 ESC 进入回滚页面：

# 或使用命令 /revert 

回滚选项：

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

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

---

4.1 输入图片的两种方式

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 有两种：

示例：添加自定义指令

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

---

6.1 Hook（钩子）

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

配置 Hook

# 进入 Hook 配置页面 /hooks 

示例：自动格式化代码

{ “trigger”: “post-use”, “matcher”: “Write|Edit”, “command”: “echo ‘{}’ | jq -r ‘.file_path’ | xargs prettier –write” } 

保存位置选项：

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

6.4 Plugin（插件）

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

使用插件

# 进入插件管理器 /plugins

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

示例：Frontend Design 插件

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

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

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

---

---

Claude Code 的四个核心部分：

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