一篇搞懂 Claude Code+MCP+Skills,看完直接上手

张开发
2026/5/8 16:30:05 15 分钟阅读

分享文章

一篇搞懂 Claude Code+MCP+Skills,看完直接上手
新钛云服已累计为您分享889篇技术干货本文脉络新手从零上手Claude Code的最简流程。安装Node.js完成Claude Code的安装与配置解决地区限制问题。安装CC Switch配置国内外模型实现模型灵活切换。安装常用MCP工具如chrome-devtools、Figma拓展AI外部操作能力。下载或构建高频任务的Skills实现同类任务的标准化复用。01核心概念解析Claude Code简称CCCC是由Anthropic开发的命令行式AI编程助手。相比那些嵌入在编辑器里的工具它更能控制上下文任务执行也更连贯。它支持切换不同的模型和调用外部工具适合用于复杂的项目开发、代码重构和深度调试。MCPModel Context ProtocolMCP是Anthropic在2024年11月推出的一个协议可以让AI访问外部系统比如浏览器、数据库、代码仓库和设计工具等。这样AI就不再局限于处理本地内容可以与更多外部工具无缝对接。SkillsSkills是一种将特定任务的操作流程、规范、脚本和参考资料打包成结构化单元的方法。这样同类任务就可以标准化并高效复用减少重复沟通和操作的成本。02Claude Code安装与配置一、使用官方脚本安装官方下载地址https://code.claude.com/docs/en/quickstart#native-install-recommendedmacOS, Linux, WSL: curl -fsSL https://claude.ai/install.sh | bashWindows PowerShell:irm https://claude.ai/install.ps1 | iexWindows CMD: curl -fsSL https://claude.ai/install.cmd -o install.cmd install.cmd del install.cmd安装完成后,验证一下:claude --version二、使用 npm 安装你的电脑需要安装了 Node.jshttps://nodejs.org/安装验证在命令行输入node --version安装 Claude Code 打开命令行输入以下命令:npm install -g anthropic-ai/claude-code等待安装完成(可能需要几分钟)。安装完成后验证一下:claude --version三、常见问题如果遇到遇到地区不支持的错误信息。找到 .claude.json 文件MAC: /Users/用户名/.claude.json WindowsC:\Users\用户名\.claude.json在配置文件中增加一个参数 hasCompletedOnboarding: true重新启动claude选择信任文件完成使用03模型管理工具CC Switch安装与配置为了优化使用成本并实现不同模型之间的灵活切换我们建议安装模型管理工具CC Switch。该工具能够对国内外主流的大规模模型进行统一管理并且还具备对Skills、MCP以及Prompt进行集中管理的功能。这样不仅提高了工作效率也增强了系统配置的灵活性与可操作性。一、安装步骤CC Switch下载地址https://github.com/farion1231/cc-switch/releases二、模型配置建议根据任务复杂度选择合适的模型兼顾效率与成本国内模型推荐GLM-4.7、Kimi-K2.5国外模型推荐Claude 4.6、GPT 5.2选择模型供应商前往官网获取 API key以智谱为例子登录成功后去往个人中心。创建API key。复制填写到CC Switch中。04Claude Code指令与使用技巧一、常见启动指令查看Claude Code版本号claude --version更新到最新版本claude update直接启动命令行交互模式claude带初始问题启动Claude Codeclaude 今天星期几一次性执行并退出单次命令模式直接执行指令claude -p 今天星期几管道输入cat 123.py | claude -p 分析这段代码启动进入会话历史claude -r启动进入最近的会话claude -c权限绿通模式跳过权限检查claude --dangerously-skip-permissions二、常见内置斜杠命令基础操作命令命令描述/help查看所有可用命令及说明/cost查看token使用情况/exit退出当前交互式会话/clear清除当前对话历史会话管理命令命令描述rename name给当前会话起名字/resume [session]恢复历史会话按名称/ID/export [filename]导出对话到文件/剪贴板/rewind打开回溯菜单恢复之前状态/checkpoints列出当前会话所有检查点 ID工具配置命令命令描述/model切换 AI 模型sonnet/opus 等/theme更改终端颜色主题/vim启用 Vim 编辑模式实用功能命令命令描述/review请求代码审查/rewind退回对话/代码修改/cost查看令牌使用统计自定义命令类型命令描述项目命令.claude/commands/个人命令~/.claude/commands/插件命令插件的 commands/ 目录MCP命令由MCP服务器提供三、键盘快捷键通用控制快捷键描述CtrlC取消当前输入或生成CtrlD退出Claude Code 会话CtrlL清除终端屏幕上/下箭头导航命令历史EscEsc编辑上一条消息会话控制快捷键描述Escape停止当前响应非 CtrlCEsc Esc双击打开回溯菜单恢复历史状态CtrlR搜索历史命令↑ / ↓浏览输入历史Tab切换「深度思考模式」扩展推理CtrlO切换详细输出显示工具调用/思考过程CtrlG打开外部编辑器输入多行内容05MCP工具的安装与应用一、MCP核心价值MCP的主要功能就是消除AI与外部系统之间的障碍让Claude Code可以直接使用浏览器、数据库和代码仓库等工具。这样一来从提出需求到调用工具再到输出结果的整个过程都可以自动完成大大提高了开发效率。相较于传统AI编程工具MCP支持AI直接操作真实环境无需人工中转数据减少沟通成本与操作误差适用于数据抓取、自动化测试、数据库操作、代码部署等场景。二、MCP安装Claude Code中安装MCP的通用命令如下claude mcp add 工具名称 安装命令/地址列出已添加的所有MCP服务器claude mcp list安装完成后执行/mcp指令查看MCP服务状态显示“connected”即表示安装成功。三、调用谷歌MCP查询每日热点四、MCP资源获取渠道官方示例仓库https://github.com/modelcontextprotocol/servers提供MCP开发示例与SDK用法适用于开发者自主开发MCP。国内MCP集合https://github.com/yzfly/Awesome-MCP-ZH汇总各类实用MCP的使用案例与安装指南适配国内开发者需求。五、常用MCP推荐与安装以下为经过实际验证的高频实用MCP覆盖开发全流程可根据自身需求选择安装chrome-devtools MCP功能网页数据抓取、UI自动化测试、页面性能分析。安装命令claude mcp add chrome-devtools npx chrome-devtools-mcplatest应用场景公众号数据抓取、网页功能自动化测试、竞品数据采集等。Figma MCP功能读取Figma设计稿的结构、组件、样式信息直接生成对应代码核对设计与开发的一致性。安装命令claude mcp add --transport http figma https://mcp.figma.com/mcp官方文档https://developers.figma.com/docs/figma-mcp-server/remote-server-installation/#claude-codeSupabase MCP功能直接操作Supabase数据库支持表结构查看、数据读写、表创建等操作无需手动编写SQL。安装命令claude mcp add --scope project --transport http supabase https://mcp.supabase.com/mcp官方文档https://supabase.com/docs/guides/getting-started/mcpVercel MCP功能实现本地代码的一键部署自动处理环境变量、构建命令等配置解决部署过程中的技术壁垒。安装命令claude mcp add --transport http vercel https://mcp.vercel.com官方文档https://vercel.com/docs/ai-resources/vercel-mcpGitHup MCP功能访问GitHub代码仓库查看仓库结构、文件变更、提交记录理解PR与issue内容实现AI与代码仓库的无缝协同。安装命令claude mcp add-json github{type:http,url:https://api.githubcopilot.com/mcp,headers:{Authorization:Bearer YOUR_GITHUB_PAT}}需替换YOUR_GITHUB_PAT为个人授权码官方文档https://github.com/github/github-mcp-server/blob/main/docs/installation-guides/install-claude.md06Skills的构建与复用一、SKills核心价值Skills就是把一类任务的标准流程、操作规则、脚本和参考资料打包成一个结构化的单元主要是为了解决“每次做同样的任务都要重复沟通”和“执行步骤不统一”的问题这样就能把AI编程的能力保存下来并反复使用。你可以把Skills想象成一个超级提示词super Prompt。跟普通的提示词相比Skills可以重复使用、扩展并且有标准化的特点。你只需要构建一次就可以在多个项目里反复用而且还能根据需要不断改进逐步提高工作效率和结果质量。二、Skills基本结构Skills 用于增强 Claude Code 的功能通过创建一个 SKILL.md 文件以及可选的支持文件您可以将其作为“可复用的工具集”供 Claude 使用。这些 Skills 可以在适当的情境下由 Claude 自动加载也可以通过输入 /skill-name 命令手动调用。一个完整的Skill本质是一个文件夹核心结构如下其中SKILL.md为必备文件bashmy-skill/├── SKILL.md # 元数据执行指南必备├── scripts/ # 可执行脚本可选├── references/ # 参考文档可选└── assets/ # 资源文件可选Skills采用“渐进式披露”机制AI会根据任务需求逐层加载内容仅在需要时调用脚本、参考资料等避免冗余内容占用上下文兼顾功能完整性与执行效率。三、Skills的下载与安装1.存放路径Skills需放置在指定路径否则Claude Code无法正常加载不同工具的存放路径如下Claude Code.claude/skills/skill-name/SKILL.mdCodex.codex/skills/skill-name/SKILL.mdCursor.cursor/skills/skill-name/SKILL.mdAntigravity.agent/skills/skill-name/SKILL.md2.下载方式提示词自动下载帮我安装下 skill项目地址是https://github.com/anthropics/skills/blob/main/skills/pptx手动下载通过Skills市场或GitHub仓库下载开源Skills解压后放置在 .claude/skills/ 路径。注册命令使用此命令 /plugin marketplace add anthropics/skills 将此存储库注册为 Claude Code 插件市场3.Skills仓库官方Skills仓库https://github.com/anthropics/skills开源Skills合集https://github.com/ComposioHQ/awesome-claude-Skillshttps://github.com/travisvn/awesome-claude-Skillshttps://github.com/libukai/awesome-agent-Skills四、手动构建高质量SKills的核心原则元数据要清晰技能名称用“动词ing”的形式直接说明它能做什么描述里要清楚地写出这个功能是干嘛的在什么情况下用这样AI才能准确识别和调用。一个技能只做一件事每个技能只负责一类任务不要把太多功能混在一起这样AI更容易判断该用哪个技能也能提高执行的准确性。保持简洁高效SKILL.md文件不要超过500行只保留最重要的规则和流程去掉不必要的信息这样不会占用太多上下文空间。逐步完善先搭好基本框架目标、输入、输出跑通基础流程后再慢慢补充更多的规则和细节。同时针对不同模型的差异不断测试和优化提高兼容性。如有相关问题请在文章后面给小编留言小编安排作者第一时间和您联系为您答疑解惑。推荐阅读

更多文章