Claude Code 完整学习手册：安装配置、CCR、MCP、插件与 Superpowers开发框架

本文介绍了2026年前沿的AI驱动开发范式，重点讲解Claude Code的安装配置与使用。主要内容包括：1）通过Claude Code Router(CCR)接入智谱、Kimi、ModelScope等国产大模型；2）使用CCSwitch工具一键切换模型配置；3）利用Superpowers工具解决AI编程代码混乱问题，实现TDD模式与子智能体分工；4）以Next.js 16、Supabase等技术

m0_59012280

486人浏览 · 2026-02-23 17:30:36

m0_59012280 · 2026-02-23 17:30:36 发布

文章目录

概要

本文聚焦 2026 年前沿的 AI 驱动开发范式，梳理了 Claude Code 从基础安装到工程化配置的全链路学习路径。借助Claude Code Router(CCR) 接入智谱、Kimi、ModelScope 等国产大模型，同时介绍 CCSwitch 工具一键切换接入模型的配置。

针对 AI 编程易出现的代码混乱问题，介绍 Superpowers 工具，通过 TDD 模式与子智能体分工机制，将 “自由生成式编码” 升级为标准化研发流程。最终，以制作一个 APP为例，整合 Next.js 16、Supabase（含实时数据库与鉴权）、Tailwind CSS 等技术栈，完整展示了从数据库设计、接口开发到前端交互的过程。

环境搭建与基础交互

安装Claude code：

Claude code 网站： Claude code 地址

在这里插入图片描述

在终端中执行命令：

curl -fsSL https://claude.ai/install.cmd -o install.cmd && install.cmd && del install.cmd

在这里插入图片描述
将 claude code 的安装目录添加到系统的环境变量PATH中，否则系统找不到claude.exe这个可执行文件。

在这里插入图片描述
新建项目文件夹，执行claude命令，效果如下，选择深色模式Dark mode即可：

在这里插入图片描述

选择如何认证并使用 Claude 的服务：

在这里插入图片描述

登录方式	适用人群	核心特点
Claude account with subscription	已订阅 Claude Pro、Max、Team 或 Enterprise 付费计划的个人或团队用户	使用 Claude.ai 账号登录，按订阅周期付费，可直接在命令行中使用 Claude 的全部功能，无需额外配置 API 密钥
Anthropic Console account	通过 Anthropic 开发者控制台（Anthropic Console）使用 Claude API 的开发者	按 API 调用量计费，需要在控制台创建 API 密钥并配置到 Claude Code 中，适合需要将 Claude 集成到自己的应用或工作流中的场景
3rd-party platform	通过亚马逊 Bedrock、微软 Foundry 或 Vertex AI 等第三方平台使用 Claude 的用户	Claude 模型由这些云服务商提供，用户需要在对应平台创建账号并获取访问凭证，然后在 Claude Code 中进行配置

在这里插入图片描述

Claude Code是一个通用的编程Agent，下面介绍两种使用claude code的方式，一种是使用 Claude Code router （ccr）把任意大模型的API接入Claude Code，另一种方式演示使用第三方中转平台调用 Claude 模型，订阅用户直接选择Claude account with subscription的登录方式即可。

Claude Code router （ccr）

Claude Code router 地址

Claude Code router 是一个开源项目，可以把任意的大模型 api 接入到 claude code 中。

在这里插入图片描述

命令行安装：

npm install -g @musistudio/claude-code-router

创建配置文件：需要自己创建.文件夹和config文件

在这里插入图片描述
GLM模型

智谱AI开放平台

首先获取模型API key

在这里插入图片描述
在claude中输入命令：

ccr ui

在这里插入图片描述
选择智谱供应商，配置信息如下：

在这里插入图片描述
点击保存并重启：

在这里插入图片描述
输入命令：

ccr code

检查模型
在这里插入图片描述

在这里插入图片描述

Kimi-K2

moonshot

配置信息如下：

在这里插入图片描述

使用 modelscope 模型

modelscope

modelscope 每天提供2000次的免费调用额度，同一模型可调用500次。

个人主页 -> 访问令牌 -> 复制 key

在这里插入图片描述

供应商配置信息如下：

在这里插入图片描述

第三方中转平台

尝试了很多第三方平台，选择了一个性价比最高的，1￥可以总换 5＄的额度，点击下面链接进入：第三方中转

找到Claude Code的配置文件夹，可以运行下面的命令，打开claude code的配置文件夹

start "" "%USERPROFILE%\.claude"

在这里插入图片描述
settings.json 文件中，写入如下内容，填入你自己的api和url：

{
  "env": {
    "ANTHROPIC_AUTH_TOKEN": "",
    "ANTHROPIC_BASE_URL": "", 
    "CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC": "1"
  }
}

CCSwitch

CCSwitch 下载地址

CCSwitch（CC-Switch）是一款专为开发者打造的AI 编程助手配置管理神器，能一键切换、统一管理多个 AI 编码工具的 API 与 MCP 配置，大幅提升多模型开发效率。

告别手动修改环境变量与配置文件，可视化、一键式管理 AI 编程工具链。

支持工具：Claude Code、Codex、OpenCode、Gemini CLI 四大主流 AI 编码 CLI。

windows系统推荐下载普通msi后缀的安装包进行安装

界面如下：
在这里插入图片描述

内置命令

命令	目的
/clear	清除对话历史
/compact [instructions]	使用可选焦点指令压缩对话，比如 /compact 主要保留前端对话
/config	打开设置界面（配置选项卡）
/context	将当前上下文使用情况可视化为彩色网格
/cost	显示令牌使用统计信息。有关特定于订阅的详细信息，请参阅成本跟踪指南。
/doctor	检查您的 Claude Code 安装的健康状况
/exit	退出 REPL
/export [filename]	将当前对话导出到文件或剪贴板
/help	获取使用帮助
/init	使用 CLAUDE.md 指南初始化项目
/mcp	管理 MCP server 连接和 OAuth 身份验证
/memory	编辑 CLAUDE.md 内存文件
/model	选择或更改 AI 模型
/permissions	查看或更新权限
/plan	直接从提示进入 Plan Mode
/rename	重命名当前会话以便于识别
/resume [session]	按 ID 或名称恢复对话，或打开会话选择器
/rewind	回退对话和/或代码
/stats	可视化每日使用情况、会话历史、连胜和模型偏好
/status	打开设置界面（状态选项卡），显示版本、模型、帐户和连接性
/statusline	设置 Claude Code 的状态行 UI
/security-review	对当前分支上待提交的变更，执行一次完整的安全审查
/tasks	列出并管理后台任务
/teleport	从 claude.ai 恢复远程会话（仅限订阅者）
/theme	更改颜色主题
/todos	列出当前 TODO 项
/usage	仅适用于订阅计划：显示计划使用限制和速率限制状态

补充：/ide命令

将claude code和vscode打通，在vscode中选中的代码，在claude code中会感知到。此外，每当ClaudeCode进行代码修改的时候，会在vscode中弹出一个页面，对比修改前后的差异，然后选择是否接收这些修改。

在这里插入图片描述

自定义命令：

在项目目录.claude中新建command文件夹，在其中用文件的形式自定义命令，每创建一个文件就可以增加一个自定义命令，文件的名字就是命令的名字（.md格式文件）。

列如：code_review.md

对比这个分支，$ARGUMENTS，与main分支的差异，并且提出你的review意见。

在这里插入图片描述

常规控制 - 快捷键

快捷键	描述	注释
/ 在开始	命令或 skil	l 请参阅内置命令和 skills
! 在开始	Bash 模式	直接运行命令并将执行输出添加到会话，比如！npm intall ，不需要再开一个窗口
@	文件路径提及	触发文件路径自动完成

快捷键	描述	上下文
Ctrl+C	取消当前输入或生成	标准中断
Ctrl+D	退出 Claude Code 会话	EOF 信号
Ctrl+G	在默认文本编辑器中打开	在默认文本编辑器中编辑您的提示或自定义响应
Ctrl+L	清除终端屏幕	保留对话历史
Ctrl+O	切换详细输出	显示详细的工具使用和执行情况
Ctrl+R	反向搜索命令历史	交互式搜索以前的命令
Ctrl+V 或 Cmd+V（iTerm2）或 Alt+V（Windows）	从剪贴板粘贴图像	粘贴图像或图像文件的路径
Ctrl+B	后台运行任务	后台运行 bash 命令和代理。Tmux 用户按两次
Left/Right arrows	在对话框选项卡之间循环	在权限对话框和菜单中的选项卡之间导航
Up/Down arrows	导航命令历史	回忆以前的输入
Esc + Esc	回退代码/对话	将代码和/或对话恢复到之前的状态
Shift+Tab 或 Alt+M（某些配置）	切换权限模式	在自动接受模式（accept edits on）、Plan Mode 和正常模式（？for shortcuts）之间切换
Option+P（macOS）或 Alt+P（Windows/Linux）	切换模型	在不清除提示的情况下切换模型
Option+T（macOS）或 Alt+T（Windows/Linux）	切换扩展思考	启用或禁用扩展思考模式。首先运行 /terminal-setup 以启用此快捷键

在这里插入图片描述

MCP服务

supabase

以supabase为例： Supabase地址

Supabase 是基于 PostgreSQL 的开源后端即服务（BaaS）平台，提供数据库、认证、实时数据、存储、API、边缘函数、向量存储等全栈能力。

免费版：1GB 数据库、500MB 存储、2GB 带宽、10 万次 API 调用 / 月、基础认证。

首先在控制台中创建一个新项目：

在这里插入图片描述
doc
来到supabase的文档站，在project中选择刚创建的项目

在这里插入图片描述
在claude中输入以下命令：

claude mcp add supabase --transport http https://mcp.supabase.com/mcp?project_ref=bidbtmiusogrttkkyzbr

在这里插入图片描述
启动claude ，登录supabase授权后显示 connected 。

在这里插入图片描述

测试功能：

使用nextjs写一个项目，实现用户登录，利用supabase的用户鉴权功能，页面可以简单生成，只实现用户登录就可以，使用mcp把supabase的环境变量填一下

在这里插入图片描述

vercel

vercel地址
Vercel 是前端优先、全栈友好的云开发与部署平台，也是 Next.js 的官方维护者，主打零配置、一键部署、全球加速、AI 赋能，让开发者专注写代码而非运维基础设施。

维度	Vercel	传统 IaaS（AWS EC2 / 阿里云 ECS）
上手成本	极低，零配置、一键部署	高，需配置服务器、网络、负载均衡
运维负担	几乎为零，平台托管	高，需自己管理服务器、安全、扩缩容
性能优化	内置全球 CDN、边缘计算、自动缓存	需自行配置 CDN、缓存策略
AI 集成	原生支持 v0、AI SDK、大模型接入	需自行集成、部署模型服务
成本	按量计费，起步免费	按服务器 / 带宽付费，初期成本高

vercel doc

在这里插入图片描述

命令行：

claude mcp add --transport http vercel https://mcp.vercel.com

启动claude 并认证vercel

在这里插入图片描述

plugin

plugin类似于一个全家桶安装包，把一系列的skill, SubAgent, Hook等能力打包在一起，只需要一键安装，claude code就可以获得整套高级能力。

Discover（发现插件）：

在这里插入图片描述

插件名称	安装量	核心功能
frontend-design	211.2K	生成高质量、可生产的前端界面
context7	127.1K	提供 Upstash Context7 最新文档上下文
code-review	104K	自动化 PR 代码审查，支持多维度分析
github	92.2K	官方 GitHub MCP 服务器，用于仓库管理
feature-dev	89.5K	提供完整的功能开发工作流

在这里插入图片描述

选项	作用范围	适用场景	特点
Install for you (user scope)	当前用户，所有项目	个人常用插件（如代码格式化、个人工作流）	配置保存在用户目录，不影响其他协作者
Install for all collaborators on this repository (project scope)	当前仓库，所有协作者	团队协作插件（如代码审查、CI/CD 集成、项目专属工具）	配置写入项目目录，便于团队共享和版本控制
Install for you, in this repo only (local scope)	当前用户，仅当前仓库	临时调试、个人项目专属工具	配置保存在项目本地，不提交到 Git，仅对当前用户可见
Open homepage	-	了解插件详情	打开官方主页或文档，查看功能、配置和更新日志
Back to plugin list	-	取消安装	返回插件列表界面，终止当前操作

superpowers 工程化开发框架

项目地址

Superpowers 是一套面向 AI 编程助手的工程化开发框架，其核心目标是将专业工程团队的标准化研发流程与最佳实践进行固化，避免 AI 在自由生成式编码（vibe coding）中出现代码结构混乱、工程规范缺失等问题。

在这里插入图片描述

该框架以测试驱动开发（TDD） 为核心特色，通过子智能体（sub-agent） 机制隔离不同开发任务，确保每个任务独立执行，有效避免上下文干扰与污染。

在实现上，Superpowers 将完整研发流程拆解为一系列可复用、可组合的技能（skills） 与标准化启动指令，依托指令体系 + 技能库 + 工作流编排的三层结构，使 AI 在开发全流程的各阶段都能遵循规范、执行正确动作，从而实现工程化、可复现、高质量的代码生成。

在这里插入图片描述

Superpowers 对 Cloud Code 具备更优的适配能力，可深度依托 Cloud Code 原生支持的 Skills 机制与插件化架构，实现能力的一键安装、动态加载与规则化自动触发，从而在工程化开发流程中无缝落地。

在这里插入图片描述

目录	核心作用	对应 superpowers 功能
agents	存放子智能体（Subagent）的定义和配置	对应 Subagent-Driven Development 能力，即 “子智能体驱动开发”。这个目录包含了如何创建、调度和管理子智能体的代码，让 AI 可以像团队成员一样分工协作完成复杂项目。
commands	定义可执行的命令集，如 Git、Bash、Supabase MCP 等	对应各种工具调用，如 git log、supabase - Apply migration 等。它是 AI 与外部系统（终端、数据库）交互的 “手脚”。
hooks	存放生命周期钩子（Hooks），在特定事件触发时执行	对应 AI 工作流中的自动化触发点，例如在任务开始 / 结束时自动检查 Git 状态，或在文件修改后自动格式化代码，确保开发流程的一致性。
skills	存放独立的技能模块，是 superpowers 的核心	这是使用的所有高级能力的 “技能库”，例如：writing-plans：编写详细的实现计划。subagent-driven-development：子智能体驱动开发。implementer-prompt：执行计划的提示模板
lib	提供共享的工具库和辅助函数	为所有 agents, commands, skills 提供底层支持，如日志记录、错误处理、文件操作等，是整个 superpowers 系统的基础设施。
docs	存放文档和说明	提供每个技能和命令的使用说明，帮助 AI 理解如何正确使用这些能力。
tests	存放测试用例	确保每个 superpower 在发布前都经过充分测试，保证稳定性。

在Claude Code中，先注册marketplace ：

/plugin marketplace add obra/superpowers-marketplace

然后从这个marketplace 安装plugin：

/plugin install superpowers@superpowers-marketplace

在这里插入图片描述

superpower支持的三条命令：

指令	功能定位	核心作用
/superpowers:brainstorm	创意与规划前置	强制要求在任何创造性工作前先进行头脑风暴，包括功能设计、架构构思等，避免直接进入无结构的 “vibe coding”。
/superpowers:write-plan	任务拆解与计划生成	将复杂需求拆解为一系列小而可控的任务（bite-sized tasks），生成详细的实现计划，确保开发路径清晰可控。
/superpowers:execute-plan	分阶段执行与检查	按批次执行计划，并在关键节点设置审查检查点（review checkpoints），确保每一步都符合预期，避免累积错误。

提示词：

设计一个本地小众活动约伴APP：发布/报名本地小众活动（如城市徒步，手作体验，桌游局），即时聊天匹配同好（基于兴趣标签，实践，地点），活动现场签到/简单打卡（体感反馈：签到成功有动画+音效），活动后短评/评分（轻量化输入，实施展示评分结果）。数据存储：使用supabase

在这里插入图片描述

中间出现卡顿可以执行下面的提示词
Please don’t generate all remaining tasks together.

在这里插入图片描述

选项	执行方式	特点	适用场景
Subagent-Driven (this session)	在当前会话中，为每个任务分配独立的子智能体（Subagent），任务间进行人工审核	✅ 快速迭代、便于即时反馈、可随时干预和调整	你希望快速推进开发，并在每个任务完成后进行审查和确认的场景
Parallel Session (separate)	开启新的独立会话，以检查点（Checkpoints）的方式批量执行计划	✅ 隔离上下文、减少卡顿、适合大规模任务批量执行	你希望后台执行，或计划中任务较多、需要避免上下文溢出的场景

 完成的功能：
  - Supabase 数据库：5张表（profiles, activities, registrations, messages, reviews）+ RLS 策略 + Storage bucket +
  Realtime
  - 认证：邮箱密码登录/注册，自动创建 profile
  - 首页：活动卡片列表，分类筛选（徒步/手作/桌游/其他），搜索
  - 发布活动：表单校验（Zod），封面图上传，创建者自动报名
  - 活动详情：报名按钮，签到按钮（confetti 动画 + 音效），参与者列表
  - 群聊：Supabase Realtime 实时消息
  - 评价：1-5 星评分 + 短评，平均分展示
  - 个人中心：资料展示/编辑，我发布的/我参加的活动

  技术栈： Next.js 16 (App Router) + TypeScript + Tailwind CSS v4 + shadcn/ui + Supabase + Zustand + Zod +
  canvas-confetti

效果如下：（可以借助figma或其他工具设计前端页面）

在这里插入图片描述

2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

云雾API接入Seedance2.0视频生成模型完整教程：从API密钥到生产环境部署

2048 AI社区

数据库范式那些事

简单的说，bc范式是在第三范式的基础上的一种特殊情况，既每个表中只有一个候选键（在一个数据库中每行的值都不相同，则可称为候选键），在上面第三范式的noNf表中可以看出，每一个员工的email都是唯一的（难道两个人用同一个email?数据库范式在数据库设计中的地位一直很暧昧，教科书中对于数据库范式倒是都给出了学术性的定义，但实际应用中范式的应用却不甚乐观，这篇文章会用简单的语言和一个简单的数据库DE