Claude Code 是 Anthropics 推出的 AI 代码开发辅助工具，核心定位是“全流程开发助手”，通过 Skills（技能包）、MCP Servers（外部连接）、CLAUDE.md（项目记忆）、Plan 模式（规划执行）四大核心功能，结合 Hooks、Plugins、子代理等扩展能力，大幅提升开发效率、规范项目管理、降低技术门槛。本文将对其核心功能进行全面、详细的拆解，搭配具体实操示例，覆盖从基础使用到进阶实战的全场景，适合所有开发相关角色学习使用。

Skills 是 Claude Code 最基础也最核心的扩展能力，本质是预封装的专业工作流，类比游戏中的“技能包”——将特定场景的专业知识、工具使用方法、模板材料、执行逻辑打包整合，让 Claude Code 快速具备对应领域的专业能力，无需重复配置和解释。

Skills 并非单一工具或指令，而是一套完整的“能力解决方案”，其核心构成包含三大模块，三者协同作用，让 Claude Code 能精准完成特定任务：

各模块详细说明：

• 指令文档（SKILL.md）：必需模块，核心是“告诉 Claude Code 如何使用这个 Skill”，包含功能描述、使用场景、操作步骤、规范要求等，相当于 Skill 的“说明书”。
• 代码脚本（scripts/）：可选模块，提供可直接执行的脚本工具（如 JavaScript、Python 脚本），Claude Code 可自动调用脚本完成复杂操作，无需手动编写。
• 参考资料（reference/assets/）：可选模块，包含任务所需的事实材料、模板、素材等（如品牌手册、代码规范、模板图片），确保 Claude Code 输出符合场景需求。

Skills 之所以能大幅提升开发效率，核心在于其四大优势，每个优势均对应具体的实际使用价值，避免“空泛化”，具体如下表所示：

这是 Skills 最关键的设计之一，核心目的是解决大模型“上下文窗口有限”的痛点——很多用户担心安装过多 Skills 会占用大量上下文，导致 Claude 响应变慢或出错，而渐进式加载机制完美解决了这个问题。

加载机制分为 3 个层级，按需加载、层层递进，具体如下：

1. Level 1：元数据（name + description）
   • 加载时机：始终加载，无论是否使用该 Skill。
   • 内容：仅包含 Skill 的名称（name）和简要描述（description），约占用 100 tokens（极少量上下文）。
   • 作用：让 Claude Code 知道“有这个 Skill”“这个 Skill 能做什么”，用于判断用户需求是否需要调用该 Skill。
2. Level 2：完整指令内容（SKILL.md 正文）
   • 加载时机：触发时加载，当 Claude 判断用户需求需要使用该 Skill 时，才加载 SKILL.md 的完整内容。
   • 内容：包含 Skill 的详细使用说明、操作步骤、规范要求等，建议控制在 5000 tokens 以内（避免占用过多上下文）。
   • 作用：让 Claude 知道“如何使用这个 Skill”，确保执行过程符合规范。
3. Level 3：资源文件（脚本/参考文档/素材）
   • 加载时机：按需动态加载，只有当 Claude 执行 Skill 时，需要用到某个资源文件（如脚本、模板），才会加载该文件。
   • 内容：scripts 目录下的可执行脚本、reference/assets 目录下的参考资料和素材，无大小限制（因为是动态加载，不占用上下文窗口）。
   • 作用：为 Skill 提供实际执行所需的工具和材料，确保任务能落地完成。

核心价值：可安装大量 Skills（甚至上百个），但不会影响 Claude Code 的响应速度和上下文性能，因为大部分内容都是“按需加载”，平时仅占用极少量 tokens。

Anthropic 提供了多个官方 Skills，覆盖前端、文档处理、代码管理等常用场景，无需手动创建，直接安装即可使用，具体如下表（含安装命令和适用场景，可直接复制执行）：

Skills 支持两种安装方式，分别适配新手（命令行一键安装）和进阶用户（手动安装，可自定义配置），步骤详细可落地，避免操作踩坑。

方法1：命令行安装（推荐新手，一键完成）

前提：需先安装 skills-installer 工具（首次安装 Skill 时，会自动下载安装，无需手动操作），安装命令如下（以安装 frontend-design 为例）：

# 1. 安装官方 Skill（以 frontend-design 为例） npx skills-installer install @anthropics/claude-code/frontend-design --client claude-code # 2. 查看已安装的 Skills（验证是否安装成功） claude /skills 

补充说明：

• 执行安装命令后，会自动下载 Skill 文件包，并安装到默认目录（用户级目录，所有项目共享）。
• 如果安装失败，大概率是网络问题，可尝试切换国内镜像源，或直接下载官方仓库的 Skill 文件包，用手动安装方式。

方法2：手动安装（推荐进阶用户，可自定义路径）

手动安装分为“项目级 Skills”（仅当前项目可用）和“用户级 Skills”（所有项目共享），步骤如下：

场景1：项目级 Skills（仅当前项目可用）

# 1. 在当前项目根目录，创建 Skills 存放目录（固定路径，不可修改） mkdir -p .claude/skills # 2. 将下载的 Skill 文件包（如 frontend-design/ 文件夹），完整放入 .claude/skills/ 目录 # 示例：将 frontend-design/ 文件夹复制到 .claude/skills/ 下，最终路径为 .claude/skills/frontend-design/ # 3. 重启 Claude Code（关闭后重新打开，让 Claude 识别新安装的 Skill） 

场景2：用户级 Skills（所有项目共享）

# 1. 在用户目录，创建 Skills 存放目录（固定路径，不可修改） # Windows：mkdir -p C:Users你的用户名.claudeskills # Mac/Linux：mkdir -p ~/.claude/skills # 2. 将下载的 Skill 文件包，完整放入该目录 # 3. 重启 Claude Code，即可在所有项目中使用该 Skill 

Skills 支持两种调用方式，操作简单，可根据需求灵活选择，无需复杂配置，具体示例如下：

方式1：显式调用（主动指定 Skill，精准控制）

核心：在 Claude Code 中，直接指定使用某个 Skill，适用于明确知道需要哪个 Skill 的场景，示例如下：

# 示例1：使用 frontend-design Skill 优化网页 使用 frontend-design skill 优化 https://example.com 的页面布局，要求适配移动端，配色简洁 # 示例2：使用 pdf Skill 提取表格数据 使用 pdf skill 提取 report.pdf 中的所有表格数据，整理成 Excel 格式 # 示例3：使用 commit Skill 生成 commit 消息 /commit # 内置 Skill，直接调用，会自动分析代码变更，生成规范 commit 消息 

方式2：隐式调用（自动匹配，无需手动指定）

核心：当用户的任务描述，与某个 Skill 的元数据（name + description）匹配时，Claude Code 会自动调用该 Skill，无需用户手动指定，适用于忘记 Skill 名称或不确定用哪个 Skill 的场景，示例如下：

# 场景1：自动触发 frontend-design Skill（任务描述与 Skill 功能匹配） 请帮我设计一个产品官网首页，要求响应式布局，包含导航栏、轮播图、产品列表 # 场景2：自动触发 pdf Skill（任务描述与 Skill 功能匹配） 请合并 report1.pdf、report2.pdf、report3.pdf 三个文件，生成一个新的 PDF 文件 # 场景3：自动触发 doc-coauthoring Skill（任务描述与 Skill 功能匹配） 帮我写一篇 API 技术文档，包含功能描述、请求参数、返回值、调用示例 

小贴士：隐式调用的关键是“任务描述清晰”，如果 Claude 没有自动触发目标 Skill，可改用显式调用，明确指定 Skill 名称。

官方 Skills 无法覆盖所有个性化需求（如企业专属规范、项目特定流程），此时可创建自定义 Skills，支持“自动生成”和“手动创建”两种方式，推荐新手先使用自动生成方式，进阶用户可手动创建并自定义配置。

方式1：使用 skill-creator 自动创建（推荐新手，零代码）

步骤简单，无需编写任何文件，仅用自然语言描述需求，Claude 会自动引导你完成 Skill 创建，具体步骤如下：

# 1. 先安装 skill-creator Skill（如果未安装） npx skills-installer install @anthropics/claude-code/skill-creator --client claude-code # 2. 打开 Claude Code，输入指令，触发 skill-creator 创建skill，能按照公司规范写技术文档，要求包含API描述、请求参数、返回值、错误码、调用示例 # 3. Claude 会自动引导你完成以下操作（无需手动干预）： # - 询问你公司技术文档的具体规范（如标题层级、表格样式、代码格式） # - 生成 SKILL.md 文件（包含完整的指令说明） # - 创建必要的脚本（如文档格式化脚本，如需） # - 提示你将生成的 Skill 文件包，安装到指定目录（项目级或用户级） 

方式2：手动创建 Skill（推荐进阶用户，可自定义）

手动创建需遵循固定的目录结构，确保 Claude Code 能识别，步骤如下：

步骤1：创建 Skill 目录结构（固定格式）

一个完整的自定义 Skill，目录结构如下（必需模块标注为“★”，可选模块标注为“○”）：

my-skill/ # Skill 根目录，名称可自定义（建议英文，如 company-doc-writer） ├── skill.md # Skill 指令文档（★ 必需） ├── scripts/ # 可执行脚本目录（○ 可选） │ └── process.js # 示例脚本（如文档格式化、数据处理脚本） ├── assets/ # 资源文件目录（○ 可选） │ └── template.png # 示例素材（如文档模板、图片素材） └── reference/ # 参考文档目录（○ 可选） └── guide.pdf # 示例参考资料（如公司规范文档、术语表） 

步骤2：编写 skill.md（核心，必需模块）

skill.md 是 Skill 的“灵魂”，Claude Code 通过它了解 Skill 的功能、使用方法和规范，以下是完整示例（以“公司技术文档写作助手”为例，可直接复制修改使用）：

--- name: company-doc-writer # Skill 名称（唯一，不可重复） description: 按照公司技术文档规范撰写各类技术文档，包括API文档、技术方案、系统设计文档等 --- # 公司技术文档写作助手 这个Skill帮助用户按照公司技术文档规范，快速撰写符合要求的技术文档，确保文档格式统一、内容完整。 使用场景 - API接口文档编写（最常用） - 技术方案文档撰写 - 系统设计文档编写 - 接口对接文档生成 文档规范（核心内容） 标题层级（严格遵循） - 一级标题（#）：文档名称（如“用户登录API文档”） - 二级标题（）：主要章节（如“功能描述”“请求参数”） - 三级标题（）：具体内容（如“参数说明”“错误码说明”） - 四级标题（#）：细分内容（如“必填参数”“可选参数”） 代码示例格式（严格遵循） 所有代码示例必须使用 语言格式，标注清晰的语言类型，示例如下： javascript // 正确示例：用户登录API调用示例 const login = async (username, password) => ) }); return response.json(); }; 

API文档模板（必需遵循，所有API文档均需按此模板编写）

每个API文档必须包含以下5个部分，缺一不可：

1. 功能描述：简要说明API的作用，1-2句话即可，清晰明了。
2. 请求参数：用表格呈现，包含参数名、类型、是否必需、说明4列。
3. 返回值：用代码块呈现JSON格式，标注字段说明。
4. 错误码：用表格呈现，包含错误码、错误描述、处理方式3列。
5. 调用示例：用代码块呈现完整的调用示例（支持JavaScript、Python等常用语言）。

根据用户ID，获取用户的详细信息（包括用户名、邮箱、手机号、角色等）。

{ "code": 200, "message": "success", "data": { "id": "abcdef", "name": "张三", "email": "", "phone": "", "role": "admin", "createTime": "2024-01-01 10:00:00" } } 

// 导入请求工具（项目内置工具） import { request } from '@/utils/api'; // 调用获取用户信息API const getUserInfo = async (userId) => , headers:  }); return response.data; } catch (error) { console.error('获取用户信息失败：', error.message); throw error; } }; // 调用示例 getUserInfo('abcdef').then(user => { console.log('用户信息：', user); }); 

 # 步骤3：添加可选模块（脚本、资源、参考资料） - scripts/ 目录：添加可执行脚本，比如“文档格式化脚本”（process.js），用于自动调整文档格式，示例如下： `// scripts/process.js // 功能：自动格式化技术文档，统一标题层级和代码格式 const fs = require('fs'); const path = require('path'); // 读取文档文件 const docPath = process.argv[2]; const content = fs.readFileSync(docPath, 'utf8'); // 格式化标题层级（确保一级标题唯一，二级标题不嵌套） let formattedContent = content.replace(/(#{5,})/g, ''); // 将5级及以上标题转为3级 formattedContent = formattedContent.replace(/^ (.*)$/gm, ' $1 '); // 二级标题前后加空行 // 保存格式化后的文档 fs.writeFileSync(docPath, formattedContent, 'utf8'); console.log('文档格式化完成！');` - assets/ 目录：添加文档模板、图片素材等，比如“API文档模板.png”，方便 Claude 参考使用。 - reference/ 目录：添加公司技术规范、术语表等参考资料，比如“公司代码规范.pdf”，确保 Claude 输出符合公司要求。 # 步骤4：安装并测试自定义 Skill bash # 1. 将 my-skill/ 目录，安装到指定路径（项目级或用户级） # 项目级：cp -r my-skill/ .claude/skills/ # 用户级（Mac/Linux）：cp -r my-skill/ ~/.claude/skills/ # 2. 重启 Claude Code # 3. 测试 Skill（显式调用） 使用 company-doc-writer skill 写一篇“用户注册API”技术文档 

测试成功后，Claude 会按照 skill.md 中的规范，生成符合公司要求的 API 技术文档，无需手动调整格式。

很多用户不知道何时需要创建自定义 Skill，结合实战经验，以下 3 个场景，强烈建议创建自定义 Skill，能大幅提升效率、减少重复工作：

场景1：反复解释同一件事（重复沟通成本高）

信号：你发现自己一直在向 Claude Code 重复同样的规则、规范或要求，每次执行类似任务都要重新说明。

# ❌ 不推荐：每次都重复说明规范 帮我把这段话改成我们公司的报告格式 不对，表格要用这种样式（表头居中、内容左对齐） 还有，图表要按公司品牌配色（主色#1E40AF，辅助色#3B82F6） 再调整一下标题层级，一级标题用黑体，二级标题用宋体 # ✅ 推荐：创建自定义 Skill 创建 skill，命名为 company-report-style，功能是按照公司报告规范格式化文档，包含表格样式、配色、标题层级等要求 # 后续只需调用 Skill，无需重复说明规范 使用 company-report-style skill 格式化这份报告 

场景2：需要特定知识材料才能做好（AI 缺专属信息）

信号：Claude Code 的通用能力足够，但缺少特定场景的专属知识、材料或规范，导致输出不符合需求。

典型场景：

• 技术文档写作：需要参考公司内部的代码规范、术语表、接口标准。
• 品牌设计：需要参考公司品牌手册、Logo 资源、配色规范。
• 数据分析：需要参考公司的指标定义、计算公式、数据统计规范。

解决方案：创建自定义 Skill，将这些专属知识、材料放入 reference/ 目录，Claude 会自动参考使用，无需每次手动上传。

场景3：任务需要多个流程协同完成（多步骤复杂任务）

信号：一个任务需要组合多个步骤、多个工具才能完成，手动串联步骤繁琐，效率低。

示例：竞品分析报告生成（需 4 个步骤协同）

# 传统方式：手动串联步骤，效率低 1. 用 web-search 检索竞品数据 2. 用 pdf 提取竞品PDF中的用户反馈 3. 用 data-analysis 分析数据并生成图表 4. 用 brand-guidelines 按公司规范制作PPT # ✅ 推荐：创建自定义 Skill（如 competitive-analysis） 将 4 个步骤的逻辑、工具调用方式、规范要求，写入 skill.md，后续只需调用一次 Skill 使用 competitive-analysis skill 生成某竞品的分析报告，包含数据、反馈、图表、PPT 

Claude Code 本身的能力有限，无法直接访问外部工具、服务或资源（如 GitHub、数据库、浏览器），而 MCP Servers 就是解决这个问题的核心——通过 MCP 协议，将 Claude Code 与外部世界连接，实现“AI 调用外部工具”的能力，统一外部服务接入标准，避免手动复制粘贴、切换工具的繁琐操作。

MCP（Model Context Protocol），即“模型上下文协议”，是一套标准化的 AI 扩展接口标准，本质是“Claude Code 与外部服务的连接器”。

核心价值：无需为每个外部工具编写专属对接代码，只需通过 MCP 协议，就能让 Claude Code 调用各类外部服务（如浏览器、数据库、GitHub），实现“一站式开发”，大幅提升效率。

很多用户会混淆 MCP 和 Skills，两者本质不同、侧重点不同，适用场景也不同，具体区别如下表所示（清晰对比，一目了然）：

官方和社区提供了多个常用 MCP Servers，覆盖开发、测试、设计等多个角色，无需手动开发，直接安装即可使用，具体如下表（含 Star 数，参考流行度）：

MCP 服务器支持“命令行安装”（推荐新手，一键完成）和“配置文件安装”（推荐多服务器场景，方便管理），步骤详细，可直接实操。

方法1：命令行安装（推荐新手，简单快捷）

直接通过 Claude Code 命令行，一键安装所需的 MCP 服务器，示例如下（以安装常用的 3 个 MCP 为例）：

# 1. 安装 chrome-devtools MCP（最常用，浏览器自动化） claude mcp add chrome-devtools npx chrome-devtools-mcp@latest # 2. 安装 GitHub MCP（GitHub 集成） claude mcp add github npx -y @modelcontextprotocol/server-github # 3. 安装 PostgreSQL MCP（数据库操作） # 注意：需替换 connection-string 为自己的数据库连接字符串 claude mcp add postgres npx -y @modelcontextprotocol/server-postgres --connection-string "postgresql://用户名:密码@localhost:5432/数据库名" 

补充说明：

• 安装命令格式：claude mcp add [MCP名称] [启动命令]，其中启动命令一般为 npx 包名。
• PostgreSQL MCP 需填写正确的数据库连接字符串，否则无法连接数据库。
• 安装完成后，无需重启 Claude Code，即可直接使用。

方法2：配置文件安装（推荐多服务器场景，方便管理）

当需要安装多个 MCP 服务器时，通过配置文件安装，可统一管理所有 MCP 的配置（如启动命令、环境变量），步骤如下：

步骤1：找到 MCP 配置文件

配置文件路径固定：

• Windows：C:Users你的用户名.claudemcp.json
• Mac/Linux：~/.claude/mcp.json

如果没有该文件，手动创建即可（无需手动创建文件夹，Claude Code 会自动识别）。

步骤2：编辑配置文件

在 mcp.json 中，添加需要安装的 MCP 服务器配置，示例如下（包含 chrome-devtools、github、postgres 三个 MCP）：

{ "mcpServers": { // chrome-devtools MCP 配置 "chrome-devtools": { "command": "npx", // 启动命令 "args": ["chrome-devtools-mcp@latest"], // 启动参数 "disabled": false // 是否禁用（false=启用，true=禁用） }, // GitHub MCP 配置（需填写自己的 GitHub Token） "github": { "command": "npx", "args": ["-y", "@modelcontextprotocol/server-github"], "env": { "GITHUB_TOKEN": "your_github_token_here" // 替换为自己的 GitHub Token }, "disabled": false }, // PostgreSQL MCP 配置（需填写自己的数据库连接字符串） "postgres": { "command": "npx", "args": ["-y", "@modelcontextprotocol/server-postgres"], "env": { "DATABASE_URL": "postgresql://user:password@localhost:5432/dbname" // 替换为自己的连接字符串 }, "disabled": false } } } 

配置参数说明：

• command：启动 MCP 服务器的命令（一般为 npx）。
• args：启动参数，主要是 MCP 包名和版本（如 chrome-devtools-mcp@latest）。
• env：环境变量，用于配置 MCP 所需的密钥、连接字符串等（如 GitHub Token、数据库连接字符串）。
• disabled：是否禁用该 MCP 服务器（false 表示启用，true 表示禁用）。

步骤3：应用配置

# 保存 mcp.json 文件后，执行以下命令，应用配置 claude mcp reload # 验证配置是否生效 claude mcp list 

安装完成后，需验证 MCP 服务器是否正常启动、能被 Claude Code 识别，步骤如下：

# 方法1：在 Claude Code 中查看已安装的 MCP /mcp # 方法2：通过命令行查看已安装的 MCP claude mcp list # 方法3：测试某个 MCP 是否能正常使用（以 chrome-devtools 为例） claude mcp test chrome-devtools # 预期结果：提示“Test passed”，表示 MCP 安装成功，可正常使用 

如果测试失败，常见原因及解决方案：

• 网络问题：无法下载 MCP 包，切换网络或国内镜像源。
• 配置错误：环境变量（如 GitHub Token、数据库连接字符串）填写错误，检查 mcp.json 配置。
• 版本不兼容：MCP 版本与 Claude Code 版本不匹配，安装指定版本的 MCP（如 chrome-devtools-mcp@1.0.0）。

chrome-devtools-mcp 是最常用的 MCP 服务器，内置 26 个工具，覆盖浏览器自动化的大部分场景，以下是完整实战示例，可直接复制到 Claude Code 中执行，快速掌握使用方法。

示例1：基础浏览器操作（导航、截图、提取链接）

# 在 Claude Code 中输入以下指令，自动调用 chrome-devtools MCP 用Chrome DevTools MCP打开 https://example.com，然后完成以下操作： 1. 导航到该网址，等待页面加载完成 2. 截取当前页面的完整截图，保存为 example-page.png 3. 提取页面中所有的链接（a标签href属性），整理成列表 4. 分析页面结构，输出页面的HTML层级概要 5. 获取页面的性能数据（加载时间、资源大小） 

预期结果：

• Claude Code 会自动调用 chrome-devtools MCP，打开 https://example.com。
• 生成 example-page.png 截图文件（保存到当前项目目录）。
• 输出页面所有链接的列表（如 https://example.com/about、https://example.com/contact 等）。
• 输出页面 HTML 层级概要（如 → → →
  等）。

• 输出页面性能数据（如加载时间：2.3s，资源大小：1.2MB 等）。

示例2：常用工具详解（26个工具核心用法）

chrome-devtools-mcp 内置 26 个工具，以下是最常用的 6 个工具，附功能和使用示例，覆盖大部分开发、测试场景：

示例3：复杂自动化场景（串联多工具，模拟完整用户操作）

结合多个工具，模拟用户从访问页面、登录、操作到退出的完整流程，适用于E2E测试、自动化操作场景，示例如下（可直接复制到Claude Code执行）：

# 用Chrome DevTools MCP模拟用户登录示例网站的完整流程 1. 调用navigate工具，打开测试登录页面：https://test-login.example.com 2. 调用fillForm工具，填充登录表单：用户名（）、密码（Test） 3. 调用click工具，点击登录按钮（选择器：.login-submit-btn），等待页面跳转 4. 调用screenshot工具，截取登录后的首页，保存为login-success.png 5. 调用extractLinks工具，提取首页中“个人中心”相关的链接 6. 调用navigate工具，导航到个人中心页面 7. 调用click工具，点击“退出登录”按钮（选择器：.logout-btn） 8. 调用screenshot工具，截取退出后的页面，保存为logout-success.png 9. 整理所有操作日志和结果，输出完整的操作报告 

预期结果：Claude Code会自动串联所有工具，完成从登录到退出的全流程操作，生成2张截图文件和1份操作报告，清晰呈现每一步的执行结果，无需手动干预。

小贴士：复杂场景中，可结合Skills和MCP联用——创建一个“login-automation”Skill，将上述操作流程写入skill.md，后续只需调用该Skill，即可重复执行完整的登录自动化操作，无需每次重复输入指令。

使用MCP服务器时，常遇到连接失败、工具调用报错等问题，结合实战经验，整理了6个高频问题及解决方案，帮你快速排查，避免踩坑：

• 问题1：MCP安装成功，但无法调用（提示“MCP server not found”）
  原因：MCP服务器未正常启动，或Claude Code未识别到MCP配置。
  解决方案：① 执行claude mcp list查看MCP状态，若为“disabled”，执行claude mcp enable 服务器名称启用；② 执行claude mcp reload重新加载配置；③ 重启Claude Code，重新验证。
  
  
  
  
  
  
• 问题2：调用Chrome DevTools MCP时，提示“浏览器无法启动”
  原因：本地未安装Chrome浏览器，或Chrome版本与MCP版本不兼容。
  解决方案：① 安装最新版Chrome浏览器；② 安装指定版本的Chrome DevTools MCP（如chrome-devtools-mcp@2.0.0），确保与Chrome版本匹配；③ 若为无头模式报错，添加环境变量CHROME_HEADLESS=true。
  
  
  
  
  
  
• 问题3：GitHub MCP调用失败，提示“权限不足”
  原因：GitHub Token未配置，或Token权限不足。
  解决方案：① 登录GitHub，创建一个具有“repo”“read:user”权限的Token；② 编辑mcp.json，在github配置的env中填写正确的Token；③ 执行claude mcp reload应用配置。
  
  
  
  
  
  
• 问题4：PostgreSQL MCP无法连接数据库，提示“connection refused”
  原因：数据库连接字符串错误、数据库未启动，或防火墙拦截。
  解决方案：① 检查连接字符串中的用户名、密码、主机、端口是否正确；② 确保PostgreSQL数据库已正常启动；③ 关闭本地防火墙，或开放数据库端口（默认5432）。
  
  
  
  
  
  
• 问题5：MCP调用时，响应缓慢或超时
  原因：网络不稳定、MCP服务器资源占用过高，或目标服务（如网页、数据库）响应缓慢。
  解决方案：① 切换稳定网络，或检查目标服务是否可正常访问；② 关闭其他占用资源的进程，重启MCP服务器（claude mcp restart 服务器名称）；③ 增加超时时间（在mcp.json中添加"timeout": 30000，单位毫秒）。
  
  
  
  
  
  
• 问题6：工具调用报错，提示“element not found”
  原因：页面元素选择器错误，或页面未加载完成就执行操作。
  解决方案：① 检查元素选择器（如id、class）是否正确，可通过Chrome开发者工具查看元素属性；② 在操作前添加“等待页面加载”逻辑（如navigate工具后，等待1-2秒再执行click操作）。
  
  
  
  
  
  

MCP单独使用时，仅能实现“调用外部工具”的基础功能，而与Skills联用后，可封装复杂工作流，实现“全流程自动化”，大幅提升开发效率，以下是2个高频联用场景，附完整示例：

场景1：网页自动化测试 Skill（结合 Chrome DevTools MCP）

创建一个“web-auto-test”Skill，封装网页测试的完整流程，调用Chrome DevTools MCP完成自动化测试，步骤如下：

# 1. 安装所需工具（skill-creator、chrome-devtools MCP） npx skills-installer install @anthropics/claude-code/skill-creator --client claude-code claude mcp add chrome-devtools npx chrome-devtools-mcp@latest # 2. 触发 skill-creator，创建自定义 Skill 创建skill，命名为web-auto-test，功能是通过Chrome DevTools MCP完成网页自动化测试，包含导航、表单填充、点击、截图验证等步骤，输出测试报告。 # 3. 引导 Claude 生成 skill.md，核心内容包含： # - 测试流程：导航→填充表单→登录→截图→验证元素→退出→生成报告 # - 调用逻辑：自动调用 chrome-devtools MCP 的 navigate、fillForm、click 等工具 # - 输出要求：测试通过/失败状态、操作日志、截图文件路径、异常信息（如有） # 4. 安装并测试 Skill 使用 web-auto-test skill 测试 https://test-login.example.com 的登录功能，用户名，密码Test 

预期结果：Skill会自动调用Chrome DevTools MCP，完成整个测试流程，生成测试报告，明确标注测试是否通过，若失败则提示异常原因（如元素未找到、登录失败）。

场景2：GitHub 代码管理 Skill（结合 GitHub MCP）

创建一个“github-code-manager”Skill，封装GitHub代码管理的常用操作，调用GitHub MCP完成PR审查、Issue跟踪等任务，示例如下：

# 1. 安装 GitHub MCP（已安装可跳过） claude mcp add github npx -y @modelcontextprotocol/server-github --env GITHUB_TOKEN=your_github_token # 2. 创建自定义 Skill 创建skill，命名为github-code-manager，功能是通过GitHub MCP管理代码仓库，包含PR审查、Issue回复、仓库统计等操作，支持自然语言指令触发。 # 3. 测试 Skill 调用 使用 github-code-manager skill 审查仓库 https://github.com/example/test-repo 的PR #123，检查代码是否符合规范，输出审查意见；同时查看该仓库的未关闭Issue，整理成列表。 

预期结果：Skill自动调用GitHub MCP，获取PR #123的代码内容，进行规范检查并输出审查意见，同时提取仓库未关闭的Issue，整理成包含Issue编号、标题、状态的列表，无需手动打开GitHub网页操作。

在开发过程中，用户经常需要反复向Claude Code说明项目背景、代码规范、接口标准等信息，每次切换任务或重启Claude，都要重新输入，重复沟通成本极高。而CLAUDE.md就是解决这个问题的核心——它是Claude Code的“项目记忆文件”，用于存储项目专属信息，让Claude Code记住项目的所有关键细节，无需重复说明，实现“一次配置，全程复用”。

CLAUDE.md 是一个位于项目根目录的Markdown文件，本质是项目专属的“记忆手册”，由用户手动编写或Claude Code自动生成，核心作用是将项目的关键信息（如代码规范、接口文档、项目背景、团队约定）集中存储，供Claude Code随时读取，形成“项目上下文记忆”。

核心价值：解决大模型“上下文遗忘”的痛点，让Claude Code长期记住项目细节，避免重复沟通；同时统一项目规范，确保Claude Code的输出（代码、文档）符合项目要求，减少后期修改成本。

关键特性：CLAUDE.md 会被自动加载到Claude Code的上下文，无需手动上传或引用；修改后无需重启Claude，实时生效；支持Markdown所有格式，可插入表格、代码块、链接等内容。

CLAUDE.md 的作用贯穿项目开发全流程，覆盖从需求对接、代码开发到文档撰写的所有场景，具体如下：

作用1：存储项目基础信息，避免重复说明

将项目背景、技术栈、开发环境、团队分工等基础信息写入CLAUDE.md，Claude Code会自动读取，无需每次沟通都重复说明，示例如下：

# 项目基础信息（CLAUDE.md 片段）

项目名称

用户管理系统（User Management System, UMS）

项目背景

为解决公司内部用户身份认证、权限管理混乱的问题，开发此系统，支持用户注册、登录、权限分配、信息查询等功能，服务于公司所有部门。

技术栈

• 前端：React 18、TypeScript、Ant Design 5.x、Vite
• 后端：Node.js、Express、PostgreSQL
• 部署：Docker、Nginx、AWS EC2

开发环境

• 前端：Node.js 18.x、npm 9.x
• 后端：Node.js 18.x、PostgreSQL 14.x
• 开发工具：VS Code、Git、Postman

团队分工

• 前端开发：张三（负责页面开发、交互实现）
• 后端开发：李四（负责接口开发、数据库设计）
• 测试：王五（负责功能测试、性能测试）
• 产品：赵六（负责需求对接、文档编写）

  后续与Claude沟通时，无需再说“我们项目用React 18开发”“数据库是PostgreSQL”，Claude会自动从CLAUDE.md中读取，精准响应需求。

  作用2：统一代码规范，确保输出一致

  将项目的代码规范（如命名规范、格式规范、注释规范）写入CLAUDE.md，Claude Code会严格按照规范生成代码，避免出现格式混乱、命名不统一的问题，示例如下：

  # 代码规范（CLAUDE.md 片段）

  前端代码规范

1. 命名规范：
   • 组件名：PascalCase（如 UserLogin、UserList）
   • 函数名：camelCase（如 handleLogin、getUserInfo）
   • 变量名：camelCase（如 userName、userList）
   • 常量名：UPPER_SNAKE_CASE（如 MAX_PAGE_SIZE、USER_ROLE_ADMIN）
2. 格式规范：
   • 缩进：2个空格（禁止使用Tab）
   • 分号：每行代码结尾必须加分号
   • 引号：字符串使用单引号（如 ‘userName’）
3. 注释规范：
   • 组件注释：使用JSDoc格式，说明组件功能、props、使用场景
   • 函数注释：说明函数功能、参数、返回值、异常情况
   • 复杂逻辑：添加行内注释，说明逻辑意图

后端代码规范

1. 接口命名：RESTful风格，如 GET /api/users（获取用户列表）、POST /api/users（创建用户）
2. 响应格式：统一返回JSON，格式如下： { “code”: 200, // 状态码（200=成功，400=参数错误，401=未授权，500=服务器错误） “message”: “success”, // 提示信息 “data”: {} // 响应数据（无数据时为null） }
3. 数据库规范：
   • 表名：snake_case（如 user_info、role_list）
   • 字段名：snake_case（如 user_id、user_name）
   • 主键：统一命名为 id（自增整数）

     当你让Claude生成代码时，它会自动遵循CLAUDE.md中的规范，无需手动调整格式，大幅减少后期修改成本。