Claude Code 从零开始使用指南
一、什么是 Claude Code？
Claude Code 是 Anthropic 推出的 AI 编程工具，直接在终端里运行。你只需用自然语言描述需求，它就能自主分析项目、写代码、跑命令、修 Bug，全程自主执行。
核心能力：
- 基础代码生成与读写文件
- 执行终端命令
- 搜索代码
- 使用 Skills 技能包扩展能力
- 连接 MCP 外部服务
- Plugins 插件扩展
- 多智能体协作
二、安装 Claude Code
前置条件
安装命令
npm install -g @anthropic-ai/claude-code
可能报错解决报错方法
npm config set registry https://registry.npmmirror.com/
以管理员身份运行cmd
启动与登录
claude
{首次运行需要登录 Anthropic 账号。如果没有国外订阅账号,可以切换为国产模型（见下文）。
三、切换模型（使用国产模型）
Claude Code 支持切换模型，可以通过「修改环境变量」或「编辑配置文件」对接其他大模型的 API。
方式一：手动配置
参考对应模型厂商的官方文档，找到接入方法（如小米开放平台的 API 文档）。
方式二：使用 CC Switch（推荐）
CC Switch 是一个开源可视化配置管理工具，内置 50+ 供应商预设，支持一键切换不同模型供应商。
安装方式（Mac）：
brew tap farion1231/ccswitch
brew install --cask cc-switch
配置步骤：
- 运行 CC Switch，进入主界面
- 点击「添加模型供应商」，选择目标供应商（如 Xiaomi MiMo）
- 填写 API Key 和 Base URL
- 设置使用的模型名称
- 保存并启用
重要提示
- 如果使用免费套餐或订阅套餐，必须使用专属 API Key 和专属 Base URL
- 专属 Base URL 可在套餐页面查看
- 兼容 OpenAI 和 Anthropic 两种协议
四、安装扩展技能
Claude Code 默认具备基础能力，但要完成完整项目，建议安装以下 3 个扩展：
1. Frontend Design（前端美化技能）
让 AI 生成的页面更有设计感。
安装步骤：
# 添加官方技能市场
/plugin marketplace add anthropics/skills
# 在 Discover 菜单中选中 example-skills 并按回车安装
# 然后执行：
/reload-plugins
# 查看已安装技能
/skills
使用时输入 /frontend-design 即可触发。
2. Firecrawl（联网搜索和网页抓取）
让 AI 能获取最新的技术信息。
安装命令：
npx -y firecrawl-cli@latest init --all --browser
执行后会自动打开浏览器进行授权，安装完成后会自动注册 12 个 Firecrawl 相关技能。
3. Context7（技术文档查询工具）
让 AI 能获取各种框架和库的最新官方文档，避免使用过时的 API。
安装命令：
npx ctx7@latest setup
选择「CLI + Skills」安装方式（推荐），在弹出的网页中授权即可。
安装成功后会获得 find-docs 技能。
五、常用操作技巧
自动接受编辑模式
计划模式
提示词编写建议
- 角色定义：明确 AI 的角色（如前端工程师、全栈工程师）
- 技术栈说明：指定具体的技术栈和框架
- 任务描述：清晰描述要实现的功能模块
- 要求说明：明确质量要求、性能要求等
示例提示词结构：
## 角色
你是一个前端全栈工程师，擅长 Next.js + TypeScript 开发。
## 任务
开发一个 XXX 项目，包含以下模块...
## 技术栈
- 框架：Next.js + TypeScript
- UI 组件：...
## 要求
1. 页面设计要现代...
2. 响应式适配...
3. 必须生成完整可运行的代码
六、项目实战建议
- 每个项目单独新建文件夹，在 Claude Code 中打开
- 提前准备技术方案，让 AI 按方案执行
- 人工把控关键决策，不要完全依赖 AI
- 完成后自主验证，测试功能是否正常
七、做一个落地页项目
页面效果如下
八、总结
| 能力 | 评价 |
|---|---|
| 安装与配置 | 简单，npm 一键安装 |
| 模型切换 | 灵活，支持多种供应商 |
| 技能扩展 | 丰富，可安装多种技能包 |
| 代码生成 | 能力较强，但需明确提示词 |
| 适用场景 | 工具类小项目、日常编程问题、快速原型开发 |
