概述
从"人写代码"转向"人用自然语言指挥 AI 完成开发"，本文介绍 Vibe Coding 的基本理念，并手把手记录 Claude Code 的安装、VS Code 插件配置、cc-switch 模型切换，以及如何用自然语言提示词驱动 AI 完成开发任务，适合想尝试 AI 编程工作流的开发者。
安装 Claude Code
安装claude-code的前提是已经安装了node、npm、git的版本
bash
npm install -g @anthropic-ai/claude-code
claude --version
安装插件Claude Code for VS Code,使用CC Switch配置模型的key和秘钥,git链接：cc-switch 是Claude Code切换模型的工具，可以配置主流的大模型厂商，是非常推荐的工具。
bash
# github 连接
https://github.com/farion1231/cc-switch/blob/main/README_ZH.md大模型模式
Sonnet 是日常默认主力；Haiku 快、便宜，适合简单高频；Opus 深度推理最强，用来啃硬骨头、复杂架构、疑难 Bug。
| 维度 | Haiku | Sonnet | Opus |
|---|---|---|---|
| 定位 | 轻量极速版 | 均衡主力（Claude Code 默认） | 深度推理旗舰 |
| 速度 | ✅ 最快 | ⭕ 中等，流畅 | ❌ 最慢，思考久 |
| 价格 | 最低 | 中等 | 最贵 |
| 编码强项 | 小修改、查文档、单行代码、简单重构、批量提取、格式化 | 绝大多数开发：写业务、调试、多文件重构、单元测试、CR、方案设计 | 复杂系统架构、隐晦深层 Bug、跨模块疑难问题、底层逻辑、安全审计、高难度算法 |
| 短板 | 复杂架构、长依赖链、深度边界推理容易出错 | 极难、反直觉、多层嵌套耦合问题容易卡壳 | 慢、token 消耗高，简单任务性价比很差 |
| 适合什么时候切 | 改一行代码、查 API、正则、翻译、日志解析、批量小任务 | 90% 日常开发，优先选它 | Sonnet 反复搞不定、架构评审、底层疑难坑、大型代码库全局分析 |
Haiku
主打低延迟、低成本、高吞吐，不是用来做大型架构设计的。
- 优点：响应几乎秒出，适合循环调用、大量小修改、脚本片段、正则、提取日志、简单转换
- 局限：长依赖、复杂状态、多文件联动推理偏弱；遇到需要反复推演边界的问题容易幻觉
- Claude Code 用法：快速小补丁、查语法、生成简单 shell 脚本、格式化代码
Sonnet（推荐绝大多数场景）
Anthropic 目前编码综合最优平衡点，也是 Claude Code 默认模型
- 优点：代码理解、调试、多文件重构、写测试、需求转实现都很强；速度可接受，成本可控，SWE-bench 成绩优秀
- 特性：工具调用、bash、文件读写、Computer Use 都很稳，适合写完整模块、微服务、前后端业务
- 适合：业务开发、接口、CR、重构、中等复杂度 Bug，拿不准的时候直接用 Sonnet
Opus
最强推理能力，深度思考、长程逻辑、细微边界感知最好，但慢且贵
- 优点：能看懂高度耦合、隐晦的底层逻辑；定位 Sonnet 抓不住的隐性 Bug；做架构权衡、安全漏洞审计、复杂协议实现、高难度算法
- 缺点：输出等待明显变长，消耗 token 多，简单任务完全没必要上 Opus
- 适合：Sonnet 试了 2～3 轮依然定位不了的诡异问题、大型项目架构方案评审、底层核心模块设计
Claude.md 核心配置用法
一句话定位：CLAUDE.md 是 Claude Code 的持久会话指令文件，每次新建会话自动加载，不需要你在对话里重复说明项目规范、架构、命令、约束；它是上下文提示，不是强锁死的强制配置（和 Hook 不一样）
查找顺序：从全局 → 用户 → 项目 → 子目录，全部拼接注入上下文，不是覆盖！
| 文件路径 | 作用域 | 说明 |
|---|---|---|
组织托管 managed-settings.json 内 claudeMd |
组织全局 | 企业统一规范，优先加载 |
~/.claude/CLAUDE.md |
用户全局（本机所有项目） | 个人偏好：包管理器、默认测试习惯等 |
仓库根目录 CLAUDE.md / .claude/CLAUDE.md |
项目级（Git 提交、团队共享） | 最常用，项目架构、编码规范、目录、命令 |
仓库根目录 CLAUDE.local.md |
本机私有 | 加入 .gitignore，本机个人临时规则，在同目录 CLAUDE.md 之后追加 |
子目录 xxx/CLAUDE.md |
按需加载 | 不会会话启动就读；只有读取该目录下文件时才加载，适合 monorepo 子包独立规则Claude |
加载顺序：由上层目录往下拼接；同目录：
CLAUDE.md在前，CLAUDE.local.md在后。多条规则冲突时，由模型自行权衡，不是后面覆盖前面。
内置命令： 1、/init：自动扫描仓库，自动生成 CLAUDE.md ，识别构建脚本、测试命令、目录结构；已有文件会提示合并，非常适合已有项目快速初始化 2、/config:配置 Claude Code 加载策略，控制是否读取 CLAUDE.md/ AGENTS.md
claude-md-or-agents-md：默认，优先读 CLAUDE.md，没有则读 AGENTS.mdclaude-md-and-agents-md：两者都加载claude-md：只加载 CLAUDE.mdmanaged-only：只加载组织托管规则，忽略用户 / 项目本地 CLAUDE.md
3、/memory：查看自动记忆（区分：CLAUDE.md 是你写的静态规则；Auto Memory 是 Claude 自己学习沉淀的记忆）
Skills
利用优雅的Skills可以做很多工作，可以在cc-switch中通过界面安装，也可以在Claude Code命令行里安装，如果都没有成功把代码从github里下载下来，直接安装，安装后可以问：我本地安装的skills有多少，请展示一下，全局和局部的都显示一下，https://github.com/anthropics/skills,输出下面的对话，算是安装成功了，在我本地电脑上，全局（用户级）21 个 skills。
位置：C:\Users\15117\.claude\skills\
| # | 技能名 | 用途 |
|---|---|---|
| 1 | academy-guide | Claude Academy 课程推荐 |
| 2 | algorithmic-art | 算法艺术生成 |
| 3 | brand-guidelines | Anthropic 品牌风格 |
| 4 | canvas-design | Canvas 设计 |
| 5 | claude-api | Claude API/SDK 参考 |
| 6 | discernment-nudge | 建议后追问核对 |
| 7 | doc-coauthoring | 文档协作撰写 |
| 8 | docx | Word 文档处理 |
| 9 | frontend-design | 前端 UI 视觉设计 |
| 10 | internal-comms | 内部沟通写作 |
| 11 | mcp-builder | 构建 MCP 服务器 |
| 12 | PDF 处理 | |
| 13 | pptx | PPT 处理 |
| 14 | skill-creator | 创建/优化技能 |
| 15 | slack-gif-creator | Slack GIF 制作 |
| 16 | theme-factory | 主题定制 |
| 17 | ui-ux-pro-max | UI/UX 设计智能体 |
| 18 | web-artifacts-builder | Web 组件构建 |
| 19 | webapp-testing | Web 应用测试 |
| 20 | weekly-report | 日报/周报生成 |
| 21 | xlsx | Excel 处理 |
UI图 Stitch
Stitch 访问上可能有点难度，得翻墙才能访问，使用以后的感受非常好，咱们国产有个mastergo的，但是这个体验比那个好多了，之前使用mastergo的时候，动不动积分就不够了，Stitch试用了好久还有token，他还能对每个页面单独调整, 官网 https://stitch.google.com/ 。 调整完就可以导出想要的UI图了和html代码了。
提示词如下，跟据提示词，Claude Code帮我们自动调整顺序、和项目结构了，关于页面的细节部分也可以根据对话进行微调。
bash
在 "003.前端代码"的文件夹下 是使用Stitch生成的原型页面，请你来优化一下，
使得当前页面可以相互跳转，并整理项目的目录结构，使其更加优雅，
更有可读性，更加符合开发规范。项目文档如下：
bash
003.前端代码/web/
├── index.html # 新增：原型导航入口页（站点地图）
├── README.md # 新增：结构与导航机制说明
├── DESIGN.md # 设计系统（从 mint_ocean_bookkeeping 上移）
├── assets/
│ └── nav.js # 新增：共享导航脚本
├── mobile/ # 移动端（6 页）
│ ├── home.html # 首页·账单明细 ← _1
│ ├── record.html # 快速记账 ← _2
│ ├── statistics.html # 统计分析 ← _3
│ ├── category-detail.html # 分类明细下钻 ← _4
│ ├── category-new.html # 新增分类 ← _5
│ └── budget.html # 预算管理 ← _6
├── desktop/ # 桌面端（4 页）
│ ├── overview.html # 工作台总览 ← pc
│ ├── transactions.html # 账单流水明细 ← _8
│ ├── analytics.html # 统计报表中心 ← _7
│ └── budget-monitor.html # 预算与分类管理 ← _9
└── previews/ # 各页面截图（语义化命名）总结
我是仿照鲨鱼极速记账的App来进行模仿的，Claude Code 已经很智能了，能自动生成很多东西，可以切换和绑定各个主流厂商的大模型，暂时我先实践到这里，还有后端服务的代码、服务、数据库、联调，内容留着后续再更新。