VibeCoding

环境准备

基础理论

Claude Code

Skill扩展

实战落地

Node.js + Git

Claude Code安装

cc-switch切换

VibeCoding四原则

Agentic & SDD

CLAUDE.md记忆

Plan/Normal模式

上下文管理

SKILL.md结构

MCP协议

Superpowers插件

Git存档习惯

小步迭代验证

项目三原则


1. PowerShell

1.1 打开

  1. 按下键盘上的 Win + R 键(Win 是键盘左下角带 Windows 标志的键)
  2. 在弹出的"运行"对话框中输入 powershell
  3. 按回车键

1.2 几个终端命令

  • pwd —— 打印当前目录(路径)
  • ls —— 打印当前路径内容
  • cd —— 进入某个目录
  • mkdir —— 创建新文件夹
  • clear —— 清屏

注:可使用table进行名称补全


2. Node.js 安装

Node.js 是一个让 JavaScript 能在电脑上运行的环境

是 Claude Code 官方安装前置条件之一

访问 Node.js 官网:https://nodejs.org/
选LTS(长期支持版)
保持默认选项安装即可

注意:安装时请确保勾选了"Add to PATH"选项

验证安装:

# 检查 Node.js 版本
$ node -v
# 检查 npm 版本(npm 是 Node.js 自带的包管理器)
$ npm -v

3. Git

"版本控制"工具

# 设置你的名字(用英文,可以是昵称)
$ git config --global user.name "Your Name"

# 设置你的邮箱
$ git config --global user.email "your.email@example.com"
# 1. 在项目文件夹中初始化 Git 仓库(只需要做一次)
$ git init

# 2. 查看当前文件状态(哪些文件被修改了)
$ git status

# 3. 把修改的文件添加到"暂存区"(准备提交)
$ git add .

# 4. 提交一个版本(附带说明信息)
$ git commit -m "描述这次修改做了什么"

# 5. 将代码推送到远程仓库(如GitHub)
$ git push

# 6. 从远程仓库拉取最新代码
$ git pull

避坑
使用AI编程工具时,养成一个好习惯 —— 在让AI做大的修改之前,先 git add . && git commit -m "保存当前进度"
这样即使AI改坏了,你也能用 git checkout . 恢复到之前的状态
这是无数开发者总结出的血泪经验


4. Claude Code 安装与配置

4.1 安装

powershell输入以下指令:

npm install -g @anthropic-ai/claude-code

验证安装:

$ claude --version

4.2 接入DeepSeek

或使用配置文件(推荐,不需重启终端):
在C盘中的.claude文件夹中创建settings.json文件复制粘贴一下内容

{
  "env": {
   "ANTHROPIC_BASE_URL": "https://api.deepseek.com/anthropic",
   "ANTHROPIC_AUTH_TOKEN": "<你的 DeepSeek API Key>",
   "ANTHROPIC_MODEL": "deepseek-v4-pro[1m]",
   "ANTHROPIC_DEFAULT_OPUS_MODEL": "deepseek-v4-pro[1m]",
   "ANTHROPIC_DEFAULT_SONNET_MODEL": "deepseek-v4-pro[1m]",
   "ANTHROPIC_DEFAULT_HAIKU_MODEL": "deepseek-v4-flash",
   "CLAUDE_CODE_SUBAGENT_MODEL": "deepseek-v4-flash",
   "CLAUDE_CODE_EFFORT_LEVEL": "max"
  }
}

注意密钥不包含<>

/model HAIKU -> 切换为deepseek-v4-flash
/model OPUS -> 切换为deepseek-v4-pro

/status ->验证


5. cc-switch

多模型并存管理的可视化切换工具

下载:
Release CC Switch v3.17.0 · farion1231/cc-switch · GitHub
翻到底部,下载CC-Switch-v3.17.0-Windows.msi

默认安装即可


一. AI编程基础理论

  • token
  • 上下文窗口
  • AI幻觉
  • VibeCoding
    Vibe Coding 的核心原则:
    1. 意图优先:先描述你想要什么效果,而不是告诉AI怎么写代码
    2. 快速迭代:不追求一次完美,拥抱"生成 → 测试 → 修正"的循环
    3. 信任但验证:相信AI的能力,但始终检查关键逻辑
    4. 上下文经营:持续维护和优化提供给AI的背景信息
  • Agentic Engineering:工程化升级范式
    纯vibecoding小项目可,大项目会出现问题
    • 智能体(能自主规划、执行、验证任务的AI系统)
    • 智能体协作模式
  • 规范驱动开发 SDD(Specification-Driven Development)
    • 需求规范:PRD文档(“做什么”)
    • 技术规范:SPEC文档(“怎么做”)
    • 质量规范
    • 规范文件的组织与管理
  • Temperature: AI回复的"随机性"(0~1,0最稳定,1最随机)

二. AI编程工具的层级与评估标准

1. 层级分类

L5 自主工程 ─── 端到端自主完成项目(探索中)
   ↑
L4 项目管理 ─── 多Agent协同、任务分解(Qoder)
   ↑
L3 任务执行 ─── 自主修改文件、运行命令(Claude Code、Cursor Agent)我们重点学这个
   ↑
L2 代码生成 ─── 生成完整代码块(ChatGPT、Claude.ai)
   ↑
L1 代码补全 ─── 行级/函数级补全(Copilot、TabNine)

2. 评估标准

维度 说明 为什么重要
上下文能力 能理解多大范围的代码库 项目越大,需要理解的代码越多
工具使用 能否操作终端、文件系统 决定AI能不能真正"动手"
自主性 能否自主规划和执行 越自主,你需要干预的越少
准确性 生成代码的正确率 直接影响你的工作效率
速度 响应和完成任务的速度 太慢会严重影响体验
成本 订阅费 + API费用 影响长期可持续性
扩展性 插件/技能/自定义能力 能否适应你的特殊需求
中文支持 中文理解和生成质量 对中文用户尤为重要

三. Claude Code 使用技巧

7 层扩展(Harness)

基础(重要):

  1. CLAUDE.md — 项目说明书,每次会话自动加载
  2. Hooks — 事件触发器,在特定时机自动执行
  3. Skills — 专业知识包,AI 按需加载

高级扩展:

  1. Plugins — 把 Skills + Hooks + MCP 打包分发
  2. LSP — 给 AI 装上 IDE 级的代码导航
  3. MCP — 连接外部工具和数据源
  4. 子 Agent — 独立上下文并行干活

1. 模型选择与切换

基本:能力与价格匹配

方法一:启动时指定(临时使用)

# 使用模型别名(推荐,自动指向最新版本)
$ claude --model opus      # 最强推理
$ claude --model sonnet    # 日常编码(默认)
$ claude --model haiku     # 快速轻量

# 使用具体模型名时,请以当前服务商官方文档为准
$ claude --model opus
$ claude --model "deepseek-v4-pro[1m]"

方法二:运行中切换(使用斜杠命令)

在 Claude Code 对话中直接输入:

> /model           # 打开模型选择器(交互式)
> /model sonnet      # 直接切换到 Sonnet
> /model opus       # 直接切换到 Opus

选择后会保存到用户设置,下次启动也会生效。

VSCode中直接选择swich model即可选择

方法三:环境变量持久设置

方法四:配置文件持久设置(推荐)


2. 核心配置

配置层级:

全局配置(影响所有项目)
  └── ~/.claude/settings.json

项目级配置(只影响当前项目)
  └── 项目根目录/.claude/settings.json

项目上下文文件(告诉AI项目背景信息)
  └── 项目根目录/CLAUDE.md ← 最重要!

2.1 settings.json 配置文件

注意:配置文件中不要写注释

常用配置项:

{
  // 允许 Claude Code 执行的操作(不再需要每次确认)
  "permissions": {
   "allow": [
     "Read",        // 读取文件
     "Write",       // 写入文件
     "Bash(npm *)",   // 执行 npm 命令
     "Bash(git *)",   // 执行 git 命令
     "Bash(node *)"   // 执行 node 命令
   ],
   "deny": [
     "Bash(rm -rf *)" // 禁止执行危险的删除命令
   ]
  },
  // 默认使用的模型
  "model": "sonnet",
  // 自动紧凑阈值(上下文使用超过此比例时自动压缩)
  "autoCompactThreshold": 80
}
  • 在用户自己的settings.json中写env(或者CCSwitch中)
  • 在项目工作目录中创建claude/settings.json,添加允许、禁止的操作

2.2 CLAUDE.md:项目"说明书"

告诉AI这个项目的背景、技术栈、编码规范和当前进度,提升ai工作效率

claude.md 也可以由ai生成

CLAUDE.md 的三个层级

层级 路径 作用范围 适合写什么
全局级 ~/.claude/CLAUDE.md 所有项目都会读 个人习惯、身份、翻译偏好(如"永远用中文回答"、“我是 xx、从事 xx”)
项目级 项目根目录/CLAUDE.md 仅本项目 项目技术栈、架构、规范、进度(可提交 Git,团队共享)
文件夹级 子目录/CLAUDE.md 仅该子目录 模块专属约定(如 src/payment/CLAUDE.md 写支付模块踩过的坑)

全局CLAUDE.md 模板(参考):

## 沟通方式

- 默认中文回复;代码、命令、变量名、文件路径保持英文
- 结论先行,简洁直接,不先铺垫背景
- 不谄媚,不夸“这是个很好的问题”,不以“当然可以”开头
- 给真实判断——方案有问题直接指出,发现更好做法主动说明

## Git

- 不自动 `git commit` 或 `git push`,除非我明确要求
- 提交前先展示将要提交的变更摘要
- commit message 使用简洁英文

## 红线操作

以下操作即使在 auto-accept 模式下也必须先问我:

- 删除文件、目录或 git 历史
- 修改 `.env`、密钥、token、证书、CI/CD 配置
- `git push`、`git rebase`、`git reset --hard`、强制推送
- 公开发布(`npm publish`、生产部署等)

项目级CLAUDE.md 模板(参考):

# 项目名称 // 自己写

## 项目概述 // 自己写
一句话描述这个项目做什么。

## 技术栈 // 可AI生成
- 前端:Next.js 14 + TypeScript + Tailwind CSS
- 后端:Next.js API Routes
- 数据库:Prisma + SQLite
- 部署:Vercel

## 项目结构 // 可AI生成
​```
src/
├── app/         # Next.js App Router 页面
│   ├── api/      # API 路由
│   ├── layout.tsx # 全局布局
│   └── page.tsx   # 首页
├── components/   # React 组件
│   ├── ui/      # 通用UI组件
│   └── features/  # 业务组件
├── lib/         # 工具函数和配置
├── prisma/      # 数据库 schema 和迁移
└── types/       # TypeScript 类型定义
​```

## 编码规范 // 可参考行业大佬
- 使用函数式组件 + React Hooks
- 组件文件使用 PascalCase 命名(如 BookmarkCard.tsx)
- 工具函数使用 camelCase 命名
- API 路由返回统一格式:{ success: boolean, data?: any, error?: string }
- 所有数据库操作通过 Prisma Client 执行

## 当前开发状态 // 开发到哪写到哪,claude开发过程中也会自动更新
-  项目初始化完成
-  数据库 Schema 设计完成
-  书签 CRUD API 开发中
-  前端页面待开发
-  搜索功能待开发

## 注意事项 // 自己写
- SQLite 数据库文件在 prisma/dev.db,不要提交到 Git
- 环境变量在 .env 文件中,不要提交到 Git
- 所有新功能先创建 Git 分支再开发

CLAUDE.md的创建与读取:

  • 方法一(空项目推荐):

    • 直接在文件夹中创建
  • 方法二(已有项目推荐):

    • /init 创建项目级

      • 在项目根目录下运行 claude 后输入 /init,cc 会自动扫描项目并生成一份 CLAUDE.md 初稿,你再调整
      • 官方建议:项目有一定规模再 /init 效果更好(太空它扫不出什么东西)
    • /memory 编辑全局级

      • 在 cc 会话里输入 /memory 选择“全局 CLAUDE.md”,会用默认编辑器打开该文件供你修改
      • 修改全局后需重启 cc 才生效

实际生产开发中的一些建议:

  1. 保持更新:项目级 CLAUDE.md 应该是动态的——项目加了功能、踩了坑,就同步更新

  2. 足够具体:技术栈写明具体版本号,目录结构要与实际一致

  3. 写明禁忌:把"不要做什么"也写清楚(如"不要修改数据库迁移文件")

  4. 适度简洁:不要写成论文,AI需要的是关键信息而非赘述

  5. 只放"顶层不变原则":CLAUDE.md 不该塞太多

    • 受 Karpathy 启发的 Claude Code 指南
      • 问题:ai会一错再错,会写屎山,会做不该做的事
      • 解决:编码前思考、简洁优先、精准修改、目标驱动执行(详见上述链接)

2.3 第二层记忆:Auto Memory(cc 自己的笔记本)

CLAUDE.md 是规矩(明规则)
Auto Memory 是 cc 在干活过程中记下的设计笔记(隐规则)

没显式写进 CLAUDE.md 的习惯、反馈、项目踩坑,会被一个后台 agent 静静记录

启用与关闭:

# 在 cc 会话中输入
/memory

# 在弹出的菜单里选第一个选项 “启用 Auto Memory”
# 启用后菜单里会多出“打开自动记忆文件夹”选项

注意:一般建议打开

Auto Memory 会记的东西:

类型 含义 举例
user 关于你 你的角色、偏好(如“不喜欢深色 UI”)
feedback 你给过的反馈 “不要这样做"、“对,就这样"
project 项目相关 进度、决策、技术选型
reference 外部资源索引 “某份设计文档在 docs/design.md”

注意:

  • 只在当前项目生效(文件存在项目目录下),换项目需重新积累
  • 启用后 cc 不会每次都把所有记忆全部加载进上下文,只会读一份memory.md 索引——遇到具体问题才去读对应的子文件,占 token 很少
  • 随时可以用快捷键 Ctrl+O 在会话中查看实际被调用过的记忆内容
  • 记错了就说:“忘掉刚刚说的不喜欢深色主题”,它会自己删掉

2.4 第三层记忆:自建参考文档(渐进式披露)

仿照 Skill 的"渐进式披露"机制为 cc 手动打造的一套专项参考文档

应用场景:某些东西不适合全部塞进 CLAUDE.md(太长、太专门),但 cc 需要的时候必须能查到

[!示例]

比如做个产品,你希望:

  • 品牌视觉规范:颜色、字体、间距 → docs/brand-visual.md
  • 产品文本风格:语调、术语表 → docs/copywriting-style.md
  • API 约定:请求响应格式、错误码 → docs/api-conventions.md

然后在 CLAUDE.md 里加上指引:

## 外部参考文档

- 修改前端视觉、调颜色、调间距时 → 必读 `docs/brand-visual.md`
- 写产品文案、按钮文字、提示语时 → 必读 `docs/copywriting-style.md`
- 写 API 、定义返回格式时 → 必读 `docs/api-conventions.md`

这样 cc 只在"需要的时候"才去读完整文档,既保证了准确性,又不占多余上下文


2.5 三层记忆总览

位置 优先级 加载方式 谁在维护
1 CLAUDE.md(三级) 会话启动全量加载 手动维护
2 Auto Memory 先读索引、按需读子文件 cc 自己写、校对修改
3 参考文档 按需 cc 遇到对应任务才读 手动维护

本质认知
agent 的所有"记忆",本质上都是在合适的时候向大模型注入压缩过的上下文
也可以说这些记忆机制本质上还是提示词工程,只不过由 cc 帮你组织了层次


2.6 .claudeignore 文件

类似于 .gitignore,用来告诉 Claude Code 哪些文件/目录不需要关注

注意:该文件非必要

# .claudeignore 示例
node_modules/      # 依赖包目录(太大了,AI不需要看)
.next/            # Next.js 构建产物
dist/            # 编译输出
*.log            # 日志文件
.env             # 环境变量(包含敏感信息)

3. 核心命令与日常使用

3.1 启动与基本交互

# 最基本的启动方式(在当前目录启动)
$ claude

# 指定项目目录启动
$ claude --project-dir /path/to/your/project

# 使用指定模型启动
$ claude --model sonnet

# 单次执行模式(执行完就退出,适合脚本调用)
$ claude -p "请列出当前目录下所有的 JavaScript 文件"

3.2 权限确认机制

Claude Code 在执行以下操作前会先询问你:

操作类型 示例 提示信息
创建文件 创建 index.html “Will create file: index.html”
修改文件 修改 app.js 的第10行 “Will edit file: app.js”
执行命令 运行 npm install express “Will run: npm install express”
删除文件 删除 temp.txt “Will delete file: temp.txt”

你可以:

  • Enter 或输入 y → 确认执行
  • 输入 n → 拒绝执行
  • 输入补充信息 → 修改AI的计划

提示:如果你发现每次确认很烦,可以在 settings.json 中配置自动允许的操作(见 4.2 节)。但初学者建议保持默认,让自己有机会审查AI的每一步操作。


3.3 核心斜杠命令

/ 开头的命令是“斜杠命令”

  • 打一个 / 就会弹出完整命令清单
  • /help 列出所有可用指令

基础高频命令:

命令 作用 使用场景
/help 显示帮助信息 忘记命令时查看
/model 查看/切换当前模型(高/中/低档) 需要换用更强/更快的模型时
/compact 压缩当前对话的上下文 对话太长,AI开始“遗忘”早期内容时
/clear 完全清空当前对话 开始全新的任务时
/context 详细查看上下文占比(各 MCP/Skill 各占多少) 优化 token、诊断哪里挨上下文
/memory 查看/编辑 CLAUDE.md 与自动记忆 管理项目/全局记忆、开启 Auto Memory
/status 查看会话状态 确认模型、Token 消耗
/cost 查看当前会话费用 监控花了多少钱
/review 对当前项目进行代码审查 完成功能后检查质量
/init 自动生成项目的 CLAUDE.md 进入新项目后的第一件事
/plan 切入 Plan Mode(只读规划模式) 复杂任务起手(详见 4.9 节)
/rewind 回滚 cc 之前的修改 “后悔药”,下面重点讲
/resume 选择历史会话恢复 上次话题还没聊完
/btw “顺便问一句”,不污染主上下文 主任务进行中想问个无关问题

扩展管理命令:

命令 作用 使用场景
/skill <名称> 直接调用某个 Skill 手动触发,不要等 AI 自己决定
/agent 创建、查看、调用子代理(SubAgent) 手工创建专项 SubAgent
/plugin 插件管理界面(discover / installed) 发现、安装、卸载插件
/login 使用 Claude 官方订阅会员登录 有 Claude Pro/Max 会员时首选
/simplify 派 3 个子 Agent 从代码质量/性能/复用性三个角度优化 快速全面优化已有代码

最常用的三个命令详解:

**/compact —— 上下文压缩

用 cc 一段时间会发现回答变慢、质量下降——这是因为你聊的每句话、它读的每个文件、它执行的每个操作的结果,都在挤占上下文空间

模型上下文虽然有 200K,但实际有效比例只有 60%-80%,且会随上下文增多能力下降。脑子里塞多了东西,它就容易把握不住重点

/compact 命令会帮你”整理桌面” —— 把前面的对话压缩成摘要,腾出空间

> /compact

AI: 上下文已压缩。当前对话摘要:
   - 我们正在开发一个书签管理器项目
   - 已完成:数据库设计、API端点
   - 当前正在:前端页面开发

配套命令:/context —— 监控上下文余量

/compact 之前,先用 /context 看看当前状况:
详细展示上下文占比,包括各个 MCP、Skill 各占用了多少 token,让你知道是什么在”吃掉”上下文。

> /context

上下文使用情况:
  已使用: 142,000 / 200,000 tokens (71%)
  ├── 对话历史: 89,000 tokens
  ├── CLAUDE.md: 2,100 tokens
  ├── Skills: 12,500 tokens
  └── MCP 工具: 4,800 tokens

习惯:看到上下文高于 60% 了,就 /compact 一下
别等到接近满载、cc 自动压缩才动手——那时候它已经开始”遗忘”了
也可以让 cc 帮你打开常驻显示,重启终端后底部就会一直显示上下文余量

/compact vs /clear —— 什么时候用哪个?

命令 效果 适用时机
/compact 压缩历史为摘要,保留关键决策 同一任务对话过长、但还要继续做
/clear 彻底清空,等于重开 一个独立任务彻底结束,要开始全新任务

宁可”多 /clear 几次重新介绍背景”,也不要”一直聊一直聊”
每个 /clear 都是给 AI 一次重新聚焦的机会。

/rewind —— “后悔药”(双击 ESC 快捷启动)

当你让 cc 改了一些代码、过后发现不满意(或者项目被改坏了)
cc 自带一个回滚机制:在对话里输入 /rewind,或者直接双击 ESC,就会进入回滚界面:

[Rewind] 选择回滚方式:
  1. 仅回滚对话        → 文件保留,只清除后面几轮对话
  2. 回滚对话 与 文件编辑 → 推荐!全部返回某个节点
  3. 仅回滚文件        → 保留对话,只还原文件

注意:
底线提醒/rewind 只能撤销 cc 自己编辑过的文件
它跑过的终端命令(安装依赖、下载文件、修改数据库)撤不了
真正靠谱的“后悔药”还是 Git(参见 三.5 节“Git 集成”)

/memory —— 记忆管理

Claude Code 有一个跨会话的“长期记忆”系统。它会自动记住你的偏好和项目信息,下次启动时依然记得。/memory 进去后可以编辑全局 / 项目 CLAUDE.md、开启自动记忆。具体记忆体系见 三.2 节 记忆系统

/review —— 代码审查

完成功能开发后,让 AI 审查你的代码质量:

> /review

AI: 正在审查项目代码...

审查结果:
 代码结构清晰
注意: api/bookmarks.ts 第15行:缺少输入验证
注意: components/BookmarkList.tsx:建议添加 loading 状态
 发现潜在安全问题:SQL 查询未使用参数化查询

通常是提交git前提交


3.4 快捷键速查

快捷键 作用
Enter 发送消息 / 确认操作
Shift + Enter 也是发送(不是换行!)
Option + Enter(Mac) 换行输入(在提示词里换行不发送)
Ctrl + Enter(Windows) 换行输入(同上)
Ctrl + C 中断当前操作
Esc 取消正在生成的内容
Esc × 2(双击) 启动 /rewind 回滚界面
Shift + Tab 三种运行模式循环切换(Normal/Auto-Accept/Plan,详见 4.9)
/ 浏览历史消息
Ctrl + B 让当前运行的命令到后台跑(不阻塞对话)
Ctrl + O 查看 Auto Memory 记录的具体内容

3.5 输入与交互高级技巧

除了打字对话之外的几种交互方式

1. ! 进入 Bash 模式(不用新开终端跑命令)

在 cc 对话窗口里输入文字默认是在跟 cc 对话,不是跑 shell 命令

要跑命令有两种常见做法:

 推荐:在 cc 会话里以 ! 开头,进入 Bash 模式跑命令
> !npm run dev
> !node app.js

# 取代方案:另外开一个终端跑命令

提示:
后台运行:运行中的命令会阻塞跟 cc 的对话(比如 dev 服务起来后不会退出)
这时按 Ctrl+B,cc 会把它交到后台跑,你可以继续与 cc 对话

2. @文件/目录 引用(给 cc 精准上下文)

cc 不会一直把所有项目文件加载到上下文里(项目一大也加不进去),需要时会现场 grep
明确 @ 一个文件,就是在节省 cc 探路的 token 成本

# 直接 @ 文件路径(输入时会自动弹出候选)
> 参考 @src/auth/login.ts 的风格,在 @src/auth/ 下加个 register.ts

# 提示词太长、命令行里打不下?先写到 .md 文档里,再 @ 它
> 按 @docs/feature-spec.md 的需求实现

提示:
反直觉小冗识:你给 cc 的指令越短,它反而可能花越多 token——因为它要多费力探索项目才能猜到你想要什么
描述越具体 + 明确 @ 文件,成本反而低,效果反而准

3. 贴图片(多模态能力)

直接将图片拖拽到对话框、或者 Ctrl+V 粘贴。适合:

  • 给设计参考图让 cc 实现一个类似的 UI
  • 贴报错截图让 cc 判读
  • 贴架架构图让 cc 按图实现

4. 三种启动参数(命令行启动时)

claude                        # 默认启动
claude -c                      # = --continue,启动时直接接上次会话
claude --permission-mode plan       # 启动后直接进 Plan Mode(8 节)
claude --dangerously-skip-permissions # "危险模式":一路绿灯不问任何确认

注意:
危险模式使用须谨慎--dangerously-skip-permissions(绿灯模式)适合在沙箱环境 / 有 Git 存档 / 不重要的练手项目中使用
生产项目里不推荐,新手也请从默认模式起手


4. Claude Code 实战工作流

4.1 官方推荐工作流:Explore → Plan → Implement → Commit

详解:

阶段 你该做什么 AI 在做什么 推荐模式
① Explore(探索) 告诉 AI 要改动的区域 读相关文件、grep、跟引用 Plan Mode
② Plan(规划) 让 AI 出详细方案并审核 生成计划、评估边界情况 Plan Mode
③ Implement(实施) 切出 Plan Mode 按计划执行 按顺序修改文件、运行构建 Normal / Auto-Accept
④ Commit(提交) 让 AI 生成提交消息并 commit 生成 commit message、可选开 PR Normal
一轮结束后,回到第 1 步开始下个任务

4.2 项目设置(6个应该习惯性做的动作)

在开始一个新项目之前,完成以下 6 项设置能让后续开发顺利多倍:

Step 1: 项目初始化
  ↓ 描述项目目标 → AI 生成项目骨架
Step 2: 建立 CLAUDE.md(项目上下文)
  ↓ 可运行 `/init` 让 AI 自动生成
Step 3: 配置权限与默认模式
  ↓ .claude/settings.json、复杂项目可默认 plan 模式
Step 4: 功能开发
  ↓ 一次一个功能,逐个 Explore→Plan→Implement
Step 5: 代码审查与测试
  ↓ 用 /review 让 AI 生成测试并跑起来
Step 6: 提交代码
  ↓ git commit 保存进度

4.3 完整示例:用 Claude Code 创建一个 Express Hello World API

依旧梦的开始,Hello World

注意:下述流程比较繁琐,纯口语表达也可

Step 1:初始化项目

可在图形化界面中创建文件夹,并在文件夹中右键进入vscode

或使用powershell输入以下命令:

# 创建项目目录
$ mkdir hello-api
$ cd hello-api

# 启动 Claude Code
$ claude

先使用plan mode模式(vscode图形化操作,powershell:Shift+Table)

在 Claude Code 中输入:

(我需要使用node.js构建一个前端页面,最终能够显示出 hello ai codeing 几个字,端口号使用3000)

> 请帮我初始化一个 Node.js Express 项目:
> 1. 使用 npm init 创建 package.json
> 2. 安装 express
> 3. 创建一个 app.js 入口文件
> 4. 实现一个 GET /hello 端点,返回 { message: "Hello AI Coding!" }
> 5. 端口使用 3000

AI 会依次执行以下操作(每一步都会请求你确认):

[Claude Code] 将运行命令: npm init -y
→ 确认?(y/n) y

[Claude Code] 将运行命令: npm install express
→ 确认?(y/n) y

[Claude Code] 将创建文件: app.js
→ 确认?(y/n) y

plan完后会问:(建议选第二个)
![[Pasted image 20260721181649.png]]

预期生成的核心代码(app.js):

// 引入 Express 框架
const express = require('express');

// 创建应用实例
const app = express();

// 定义端口号
const PORT = 3000;

// 定义 GET /hello 路由
app.get('/hello', (req, res) => {
  // 返回 JSON 格式的响应
  res.json({ message: 'Hello AI Coding!' });
});

// 启动服务器
app.listen(PORT, () => {
  console.log(`服务器已启动,访问 http://localhost:${PORT}/hello`);
});

Step 2:运行并验证

在 Claude Code 中输入:

> 请启动这个服务器,然后用 curl 测试 /hello 端点

AI 执行的操作:

[Claude Code] 将运行命令: node app.js
→ 确认?(y/n) y

输出: 服务器已启动,访问 http://localhost:3000/hello

你也可以打开浏览器访问 http://localhost:3000/hello,应该看到:

{
  "message": "Hello AI Coding!"
}

验证:如果浏览器能看到上面的 JSON 响应,恭喜!你用 Claude Code 成功创建了第一个 API!

Step 3:提交代码

(提交到git)

> 请帮我初始化 Git 仓库并提交当前代码,commit message 为 "初始化 Express Hello World API"

AI 会执行:

git init
git add .
git commit -m "初始化 Express Hello World API"

5. Claude Code 使用经验技巧总结

5.1 Prompt 编写技巧(针对 Claude Code 场景)

1. 任务描述要具体,不要模糊

根据自己的技术能力,尽己所能具体的写提示词

 差:帮我做一个登录功能
 好:在 /api/auth/ 目录下创建登录 API:
   - POST /api/auth/login
   - 接受 { email, password }
   - 使用 bcrypt 验证密码
   - 成功返回 JWT token
   - 使用项目已有的 prisma client 查询 User 表

2. ==引用已有代码作为参考==

 好:参考 /api/bookmarks/route.ts 的风格,
   为 /api/tags/ 创建类似的 CRUD 接口。
   数据模型参见 prisma/schema.prisma 中的 Tag 表。

3. 让AI制定计划,确认后再执行

 好:我想给书签管理器添加搜索功能。
   请先分析一下需要修改哪些文件,列出计划,
   等我确认后再开始实现。

4. 一次只做一件事

 差:帮我同时添加搜索功能、标签管理、用户认证和导出功能
 好:帮我先实现书签搜索功能。具体需求:
   - 在书签列表页面添加搜索框
   - 支持按标题和描述搜索
   - 搜索时实时过滤结果(前端过滤即可)

5.2 上下文管理策略(快速参考)

前面 /compact 详解已覆盖核心操作,这里是一个快速决策表:

观察到的情况 是什么问题 该怎么做
响应变慢、质量下降 上下文快满了 /context 看占比 → 高于 60% 就 /compact
AI 开始"遗忘"早期约定 早期信息被挤出窗口 立即 /compact
AI 重复问已回答过的问题 上下文混乱 /clear 开新会话
要切换到完全不同的任务 避免上一个任务的思路污染 /clear 开新会话
想永久记住某条规则 跨会话记忆 /memory 开启 Auto Memory 或写入 CLAUDE.md

5.3 Git 集成

存档

建个 GitHub 账号——远程仓库可以在其他电脑上拉下存档点继续工作,也方便协作

Git 的下载、安装、登录、提交、回滚,全都可以让 cc 用自然语言帮你完成
eg:

> 帮我下载 Git 并跟我的 GitHub 账号绑定
> 帮我把现在的代码提交到远程仓库
> 回滚到上一个存档版本
黄金法则:在让AI做大修改之前,先 commit

开发流程:
1. git commit → 保存当前状态("存档")
2. 让 AI 实现新功能
3. 测试功能是否正常
   ├── 正常 → git commit → 继续下一个功能
   └── 有问题 → git checkout . → 回到步骤1,换个方式重试
# 实际命令示例

# 1. 开始新功能前,先保存
$ git add . && git commit -m "开始添加搜索功能前的存档"

# 2. 在 Claude Code 中实现功能...
# (如果功能做坏了)

# 3. 回退到存档点
$ git checkout .

# (如果功能做好了)
# 3. 保存新功能
$ git add . && git commit -m "完成搜索功能"

改之前先存档


5.4 费用控制策略

策略 方法 节省比例
分级使用 简单任务用 Haiku/DeepSeek,复杂任务用 Sonnet 30-50%
精准描述 减少来回修改次数 20-30%
及时 /compact 避免重复发送长上下文 10-20%
使用 /cost 监控 实时了解消耗 -
设置预算上限 Anthropic Console 中设置月度限额 防止超支
> /cost

AI: 当前会话费用统计:
   输入 Token: 15,234
   输出 Token: 8,721
   估算费用: $0.18

5.5 大型代码库经验(Anthropic 官方推荐)

核心矛盾:模型上下文很长,真实代码库仍然远超窗口上限

解决:3 条纪律 + 3 条武器

① 用 /init 自动生成 CLAUDE.md(项目初始化)

AI 会自动浏览项目目录、识别技术栈、读 README 和关键配置文件,生成一份初版 CLAUDE.md

在初版的基础上手工补充三类信息

必补内容 为什么 示例
项目目录地图 让 AI 知道“去哪儿找代码” 认证逻辑在 src/auth/,UI 组件在 src/components/
不要碰的禁区 防止 AI 改坏 不要修改 prisma/migrations/,不要动 vendor/
团队约定 风格统一 所有 API 必须返回 { success, data, error }

② 任务粒度要小且聚焦(避免“万能 prompt”)

单次任务一定要小且单一,不要一次下大多个大的任务

先计划,再操作

经验:每个 Claude Code 任务 ≤ 涉及 5 个文件 / 200 行代码改动,超过这个量级就该拆分

③ 频繁重置上下文(/clear 是好朋友)

AI越用越懂你,但越懂你不是好事

官方建议

时机 操作 区别
一个独立任务结束(PR 提交后) /clear 完全清空对话,从零开始
同一任务内对话过长 /compact 压缩历史摘要,保留关键决策
想换条思路重做 退出 claude 重新启动 连状态栏模式都重置

④ 复杂任务从 Plan Mode 起手(权限控制)

陌生代码库或一动牵全身的修改,永远先 /planShift+Tab×2,让 AI 在只读模式下先勘探出方案再动手,回退成本几乎为零

⑤ 用 Skills 与 Subagents 卸载长任务

某些任务(如调研型任务)天生很废token,这类任务不要用主对话做,可以:

  • 派 Subagent:让一个独立的子代理去调研,最后只把结论带回主上下文(Plan Mode 下会自动调用)
  • 写成 Skill:把高频调研流程封装成 Skill,每次一键触发

主会话的上下文窗口尽量留给“看结论、做决策、写代码”这些核心动作

⑥ 接入 MCP / LSP(给 AI 装上团队协作工具、拓展工具)

真正的工程师不是只看代码,还会查 Jira、读 Confluence、连数据库、用 IDE 的“跳到定义”

MCP服务理解:一些Claude无法完成的服务(如:定位、导航,可使用高德地图的MCP服务)可通过MCP来完成(MCP 广场 · 魔搭社区

Claude Code 通过 MCP(Model Context Protocol) 可把这些能力接进来:

接入对象 解决什么 典型场景
GitHub MCP 读 PR、Issue、CI 日志 “这个 bug 在 PR #1234 里讨论过,看一下”
数据库 MCP(Postgres / MySQL) 直接查数据 “线上 user 表里有多少条 deleted_at 不为空的”
Jira / Linear MCP 读任务卡 “按 PROJ-123 的需求实现”
LSP(语言服务器)集成 精确跳转、查类型、找引用 等同于 IDE 的“查找所有引用”
Sentry / Datadog MCP 读告警、堆栈 “上一小时的 5xx 错误调一下”

提示:
配置入口.claude/settings.json 中的 mcpServers 字段,或运行 claude mcp add ...
MCP 详细配置在 三.6 节讲解


5.6 大型代码库经验速查表

实践 命令/入口 何时做 收益
项目初始化 /init + 手工补充 第一次进入项目 让 AI 知道地图与禁区
任务拆分 心法(无命令) 每次提需求前 避免 AI 改坏一大片
上下文重置 /clear / /compact 任务结束 / 上下文过长 避免污染、节省 token
规划优先 /planShift+Tab×2 复杂任务起手 先勘探后动手
任务卸载 Subagent / Skill 高频调研类任务 保护主上下文
工具接入 claude mcp add ... 项目初配 让 AI 看见“代码之外”

5.7 三个容易被忽视的官方进阶建议

1. 在子目录初始化 Claude,别从仓库根目录开始

从根目录开始,上下文污染严重,容易抓不到重点

建议从需要的功能的模块部分开始

配套做法:每个子目录都放一份小的 CLAUDE.md,写明该目录专用的测试与 lint 命令(lint命令是用来debug的)
(不要让 AI 改了一个服务就去跑整个仓的测试套件——那就等着超时吧)

2. 配置要定期审查(每 3-6 个月)

为当前模型写的指令,在下一代模型上可能适得其反

官方举的两个真实例子:

过期配置 何时有效 为何失效
CLAUDE.md 里要求“每次重构只改一个文件” 老模型需要保持专注 新模型能跨文件协调编辑,这条反而是枷锁
Hook 每次文件写入时跑 p4 edit Claude 未原生支持 Perforce 时 Claude Code 已原生支持 Perforce,这个 Hook 变多余

建议
设个日历提醒,每 3-6 个月、或每次大模型发布后
重读一遍 CLAUDE.md / .claude/settings.json / .claude/hooks / .claude/skills

问三个问题:
“这条还需要吗?”
“现在有更好的写法吗?”
“这条是在弥补哪代模型的缺陷?”

预警信号
如果觉得 Claude Code 表现到了某个瓶颈怎么也上不去,问题很可能不在模型,而在你的配置没跟上
模型都已经往前跑了, CLAUDE.md 可能还停在三个月前

3. 团队内应该有个“人”负责 Claude Code(DRI / Agent Manager)

面向团队使用者,个人可以跳过

Anthropic 观察到:推广最快的组织,都是“先有一小队人把基础设施搭好”才大面积开放的

规模 必须人选 职责
小团队(< 20 人) DRI(直接责任人),选一个有兴趣的人选充当 项目级 CLAUDE.md、共享的 Skills、Plugins 选型
中型企业 Agent Manager(半PM 半工程师) 跨团队推行、权限策略、接入安全与合规
大型/金融医疗受监管企业 跨职能工作组 工程 + 安全 + 治理 + 合规代表同桌定义需求与路线图

为什么重要:开发者第一次接触 Claude Code 的体验决定了后面全公司顺不顺推。如果第一次就是“AI 乱改东西”,要翻盘就难了。“野蛮生长”能激发热情,但缺了组织层面的收敛,好实践会变成“部落知识”


5.8 企业级部署三阶段(面向团队负责人)

如果是要在企业里推广 Claude Code 的人,Anthropic 推荐的路径是:
阶段 1 先由小队搭好工具链和规范 → 阶段 2 小范围试点 → 阶段 3 大面积推广

核心原则是”开发者第一次接触就能跑通”,第一印象坏了后面很难翻盘


6. 新项目启动套件

掌握一套可复用的配置模板,新项目打开 Claude Code 就能直接干活

6.1 第一个文件:CLAUDE.md

放在C盘用户中的.claude文件夹中

精简模板:

## 沟通方式
- 默认中文回复;代码、命令、变量名、文件路径保持英文
- 结论先行,简洁直接,不先铺垫背景
- 不谄媚,不夸"这是个很好的问题",不以"当然可以"开头
- 给真实判断——方案有问题直接指出,发现更好做法主动说明

## Git
- 不自动 `git commit` 或 `git push`,除非我明确要求
- 提交前先展示将要提交的变更摘要
- commit message 使用简洁英文

## 红线操作
以下操作即使在 auto-accept 模式下也必须先问我:
- 删除文件、目录或 git 历史
- 修改 `.env`、密钥、token、证书、CI/CD 配置
- `git push`、`git rebase`、`git reset --hard`、强制推送
- 公开发布(`npm publish`、生产部署等)

项目级的 CLAUDE.md (放在项目文件夹中的.claude文件夹中)再加一层:技术栈、目录结构、commit 格式、禁区(如 不要碰 migrations/ 目录

维护策略

  1. 吃一堑长一智,被 Claude 坑一次,加一条到 CLAUDE.md
  2. 过时的规则删掉,内容保持精炼

6.2 第二个文件:settings.json

放在项目文件夹中的.claude文件夹中

精简模板:

{
  "permissions": {
    "allow": [
      "Read", "Glob", "Grep", "Edit", "MultiEdit",
      "Write(src/**)", "Write(tests/**)",
      "Bash(npm *)", "Bash(pnpm *)", "Bash(git status)", "Bash(git diff *)",
      "Bash(git log *)", "Bash(git add *)", "Bash(git commit *)",
      "Bash(cat *)", "Bash(head *)", "Bash(tail *)", "Bash(find *)"
    ],
    "deny": [
      "Read(**/.env*)", "Read(**/*.pem)", "Read(**/*.key)",
      "Read(**/secrets/**)", "Read(**/credentials/**)",
      "Write(**/.env*)", "Write(**/secrets/**)",
      "Write(package-lock.json)", "Write(.github/workflows/*)",
      "Bash(rm -rf *)", "Bash(sudo *)", "Bash(git push *)",
      "Bash(git merge *)", "Bash(git rebase *)",
      "Bash(docker *)", "Bash(curl * | sh)", "Bash(chmod *)"
    ],
    "defaultMode": "acceptEdits"
  }
}

解释:

  1. allow 白名单:日常安全操作,不应该每次都问——读文件、写源码、跑测试、git 日常命令
  2. deny 黑名单:安全红线——读 .env、读密钥、rm -rfsudogit push

注意
allow 按你的工具链改——用 yarn 就加 Bash(yarn *),用 bun 就加 Bash(bun *)
deny 那几行建议原样留着,它们是安全底线


6.3 第三个文件:.gitignore

放在项目文件夹中(与git文件夹并放在一起)

除了常规忽略,多加几行保护 AI 工具配置和密钥不被提交到 git

# AI 工具本地配置
.claude/settings.local.json
.cursor/
.aider*
.continue/
.cody/

# 密钥和凭证
*.pem
*.key
credentials.json
.npmrc
.aws/
.ssh/

注意
.claude/settings.local.json 被 gitignore 了,但 .claude/settings.json.claude/skills/ 没有
意思是——项目配置团队共享,个人偏好(含 API key)自己留着


6.4 第四个:9 个 Slash Command(Skills)

把项目上线前续检查的清单变成命令
(注:skill为.claude/skills/[名字]/SKILL.md中的md文件)

9 个 Skill 的完整写法见后续skill部分的讲解

简述3个:

/review — 审代码
不看风格,按严重程度排:

  • CRITICAL:逻辑错误、空指针、竞态条件、安全漏洞
  • WARNING:N+1 查询、缺少错误处理、性能隐患
  • INFO:命名、垃圾代码、TODO
  • 输出 checklist,结尾总结 “X critical, Y warnings, Z info”

/commit — 提交代码
自动跑 git statusgit diff --stat,把改动按逻辑分组,格式遵循 type(scope): description

/deploy-check — 上线前检查
按顺序跑:类型检查 → 测试 → lint → 构建 → 搜 console.log → 检查 .env 引用 → 确认没有未提交的改动
全绿才上线

另外 6 个:
/test/pr/debug/refactor/docs/security
套路相同——frontmatter 声明 name、description、allowed-tools,后面写检查步骤

核心价值:写一次,以后每次都是它替你查


6.5 三种安装方式

场景 做法
从零开始的新项目 模板复制进去,填入技术栈,第一次 commit 就带着完整配置
已有项目 CLAUDE.md 和 .gitignore 加到根目录,settings.json 合并到现有配置,skills 文件夹拖进去
所有项目通用 settings.json 和 skills 放 ~/.claude/ 全局生效;CLAUDE.md 每个项目单独写

推荐
settings.json 和 skills 放全局,CLAUDE.md 每个项目单独写
权限和命令不用每个项目配一遍,但项目上下文是独立的


6.6 这套配置是活的

模板是死的,人是活的

以上述模板为起点,随之经验的积累,配置会更精准,更有风格

  • CLAUDE.md 是活的:Claude 每犯一次错就加一条
  • settings.json 跟着项目长大:新工具来了加 allow,发现新的危险操作加 deny
  • Skills 长出自己的版本/review 里加你代码库特有的常见问题,/commit 里写团队的 scope 命名规范
  • .gitignore 持续更新:每用一个新工具,看它会不会在本地生成配置文件

7. 自定义斜杠命令(Custom Slash Commands)

好比编程语言中的函数底层是封装的代码一样,/命令底层也是提示词,函数可以自定义,所以斜杠命令也可以

在项目根目录创建 .claude/commands/ 目录,然后添加 Markdown 文件:

<!-- .claude/commands/deploy.md -->
# 部署检查清单

请执行以下部署前检查:
1. 运行所有测试:npm test
2. 检查是否有 lint 错误:npm run lint
3. 确认 .env.example 已更新(如果添加了新的环境变量)
4. 构建项目:npm run build
5. 报告所有检查结果

使用方式:

> /deploy

Claude Code 就会按照定义的步骤执行部署检查


8 Claude Code 使用模式:Plan Mode 与三种权限模式

8.1 三种运行模式(官方)

Claude Code 内置 三种互斥的运行模式

模式 行为 适合场景 状态栏提示
Normal(默认) 每次文件修改、命令执行都要你确认 默认、小任务、需要逐步审查 无特殊标记
Auto-Accept(自动接受) 不再询问,直接执行 已计划好的批量任务、可信操作 accept edits on
Plan Mode(规划模式) 全面只读,只能分析、提问、出方案 复杂任务、不熟悉的代码库、架构决策 plan mode on

8.2 Plan Mode 能做什么、不能做什么

在 Plan Mode 下,AI 只能调用这些只读工具

工具 作用
Read 查看文件内容
Glob 按 pattern 查找文件
Grep 用正则在文件内容中搜索
LS 列出目录内容
WebSearch / WebFetch 联网查资料
Task 启动只读子代理去调研
AskUserQuestion 向你提交选项题以澄清需求

严格禁止
写入文件、修改文件、运行 shell 命令、运行测试、任何改动项目的动作
这保证你在看到 AI 计划之前,它不会动你项目中的任何一行代码

提示:Plan Mode 的重点是先探索和规划,暂不修改文件


8.3 四种进入 Plan Mode 的方式

方式一:键盘快捷键 Shift+Tab(最常用)

Shift + Tab为powershell中切换模式的快捷键

注意: Windows 用户注意
某些 Windows 终端(如部分 PowerShell 配置)上 Shift+Tab 只能在 Normal/Auto-Accept 间切换,跳过了 Plan Mode
改用 Alt + M 切入 Plan Mode
该问题在官方 Issue 中已标记为已知问题

方式二:会话中输入 /plan 命令

直接在提示符中输入斜杠命令:

> /plan

方式三:启动时直接进 Plan Mode

# 交互式
claude --permission-mode plan

# 无头模式(可用于 CI / 脚本)
claude --permission-mode plan -p "分析认证模块并提出优化建议"

方式四:设为项目默认模式

若某个项目一直希望默认“先规划后执行”,可以在项目根的 .claude/settings.json 中配置:

{
  "permissions": {
   "defaultMode": "plan"
  }
}

这样以后只要在该项目目录下运行 claude,就会默认进 Plan Mode

方式五:可视化操作

如果在IDE中装了插件,通常可以直接通过图形化界面操作


8.4 推荐的完整工作流

推荐的使用顺序:

进 Plan Mode
  ↓
claude --permission-mode plan      
  ↓ Phase 1:Explore  —— “读一下 src/auth 目录,了解现有认证逻辑”
  ↓ Phase 2:Plan    —— “请出详细计划:需改哪些文件、按什么顺序、边界情况是什么”
  ↓ 你审核计划,反复打磨满意为止
  ↓
切出 Plan Mode
  ↓
Shift+Tab → Auto-Accept Mode   
  ↓ Phase 3:Implement —— “按上述计划实施”
  ↓ Phase 4:Commit   —— “生成提交信息并 commit”

8.5 何时用 Plan Mode、何时不用

一句话准则:

“如果你能用一句话说清期望的 diff,就不用规划;如果你说不清,就先规划。”

任务类型 推荐模式 原因
新项目从零开始 Plan Mode 优先 需要整体架构考量
添加复杂功能(认证、订阅、软删除) Plan Mode 优先 一动动一片,回退成本高
修复一个明确的 Bug Normal 范围明确、目标清晰
重命名函数、调整变量 Normal diff 可以一句话说清
大型重构、跨文件迁移 Plan Mode 优先 要评估影响范围
批量生成类似代码(根据已有计划) Auto-Accept 计划已出,执行阶段别被打断
阅读、了解陌生代码库 Plan Mode 本身就是只读场景

PS:拿不准了,就先规划,总不是坏事


8.6 另一种变体:Opus Plan + Sonnet Implement

Claude Code 还提供了 --model opusplan 别名,它会:

  • Opus(推理能力更强、成本较高)作为规划阶段的模型
  • Sonnet(代码快、成本低)作为执行阶段的模型
claude --model opusplan

这是一种**“用贵模型思考、用便宜模型动手”的成本优化策略**,适合复杂任务


8.7 结论:决策树

复杂项目
多文件协调

简单任务
目标明确

Normal Mode

一句话描述需求

逐项确认

AI 逐步应用

Plan Mode(推荐)

Shift+Tab×2 或 /plan

Explore + Plan

审核计划

切出后执行

你的任务是什么?

交付结果

图:决策树——复杂任务走 Plan Mode,简单任务走 Normal Mode


9. Claude记账web项目简单步骤

9.1 配置开发组件

  • .gitignore
  • settings.json

9.2 plan模式进行规划


我要做一个 Python Web 记账工具,功能包括:
    - 添加账目(金额、分类、日期、备注)——在网页表单里填写
    - 查看列表(按月份和分类筛选)——表格展示
    - 删除账目——输入 ID 删除
    - 分类统计——柱状图 + 统计表
    技术栈用 Python + streamlit + sqlite3。
    预设 6 个分类:餐饮、交通、购物、娱乐、居住、其他
    我是编程新手,请先出方案再动手
  • 对计划不满意 可以对计划进行调整 => 不要切换模式

  • 做好计划后,让Claude Code把它写进claude.md中

9.3 切换到normal模式执行

  • 开始执行plan
  • 让claude一步一步执行操作 不要一下子操作完
  • 如果需要比较简单 可以一下操作完再进行验证

9.4 安装依赖并测试

  • pip安装依赖默认是走国外的网络 比较慢
  • 切换成清华的源 下载会更快一些
  • 实际去测试http://localhost:8501测试

9.5 git提交


四. AI技能系统(Skills)

1. 什么是AI技能(Skill)

1.1 Skill的定义与特点

Skill(技能) 是一个封装了特定能力的可复用指令集

复杂流程一键触发,无需每次重写Prompt

官方对 Skill 的定义:
“Skills are folders of instructions, scripts, and resources that Claude loads dynamically to improve performance on specialized tasks”_
(Skill 是由指令、脚本和资源组成的文件夹,Claude 会动态加载它们以提升在专业任务上的表现)


1.2 Skill 的组成结构

完整的 Skill 是一个目录,可以包含多种类型的文件,就像一个"能力包"

如果把 Skill 比作一本食谱,那么:

  • SKILL.md 就是食谱本身(菜名、步骤、注意事项)
  • scripts/ 就是配套的厨房小工具(削皮刀、量杯 —— 封装好的辅助脚本)
  • resources/ 就是附赠的食材包和调料配比表(模板、示例数据、配置)
  • references/ 就是食谱末尾的"参考书目"(营养学标准、食品安全规范 —— AI 可随时查阅的参考资料
1.2.1 标准 Skill 目录结构:
skill-xxx/               # Skill 根目录(命名规范:小写+短横线)
├── SKILL.md              # 核心:技能描述文件(必选)
├── scripts/              # 辅助脚本目录(可选)
│   ├── helper.py          # Python 辅助脚本
│   └── utils.js           # JavaScript 工具函数
├── resources/            # 配套资源目录(可选)
│   ├── template/          # 模板文件(如代码模板、报告模板)
│   ├── examples/          # 示例文件(如输入/输出示例数据)
│   └── config/            # 配置文件(如规则定义、默认参数)
├── references/            # 参考文档目录(可选)
│   ├── best-practices.md    # 最佳实践文档
│   ├── api-docs.md         # API 参考文档
│   └── standards.md        # 行业/团队编码规范
└── requirements.txt        # 依赖声明(可选,列出脚本需要的第三方包)

注意:核心还是 SKILL.md ,其他文件为辅助用,简单Skill可以没有

1.2.2 各组成部分详解:

1. SKILL.md(核心)—— 技能的"说明书"

包含两部分:头部的元数据(Frontmatter)和正文的具体指令

---
# 元数据(Frontmatter,YAML 格式)
name: react-component-generator   # 技能名称(唯一标识)
version: 1.0                  # 技能版本
description: 根据需求生成符合项目规范的 React 组件文件集  # 技能简介
trigger: ["创建组件", "新建React组件", "生成组件"]      # 触发关键词
tools: ["typescript", "react"]    # 依赖工具
author: your-name              # 技能作者
---

# React 组件生成器

## 执行步骤
1. 确认组件名称和功能需求
2. 在 src/components/{componentName}/ 目录下创建文件
3. 按照 resources/template/ 中的模板生成代码
4. 运行 scripts/validate.js 验证组件结构

## 输出规范
- 所有文件创建完成后,报告创建的文件列表
- 给出组件的使用示例代码

## 错误处理
- 如果目录已存在,提示用户确认是否覆盖
- 如果缺少依赖包,提示安装命令

## 示例
给一个完整的输入→输出示例。

注意:

  1. Frontmatter(元数据)简单Skill可没有

  2. 但如果你的 Skill 需要被 Agent 系统自动发现和匹配,Frontmatter 中的 trigger(触发关键词)description(技能简介) 就非常重要—— Agent 启动时只读取元数据,只有当用户任务匹配触发条件时,才会加载完整指令

2. scripts/(可选)—— 辅助脚本

当 Skill 需要执行复杂逻辑时(如数据预处理、文件批量操作、格式验证),把这些逻辑封装到脚本中比写在 SKILL.md 里更清晰:

# scripts/helper.py —— 辅助脚本示例
def fill_missing_value(df, column, strategy="mean"):
   """缺失值填充:把复杂逻辑封装成函数,SKILL.md 中只需调用即可"""
   if strategy == "mean":
      df[column].fillna(df[column].mean(), inplace=True)
   elif strategy == "empty":
      df[column].fillna("", inplace=True)
   return df

3. resources/(可选)—— 配套资源

  • template/:存放代码模板、文档模板
    例如 React 组件的标准结构模板,AI 可以基于模板快速生成代码
  • examples/:存放输入/输出示例
    帮助 AI 理解"好的输出长什么样"
  • config/:存放配置文件(JSON/YAML)
    定义规则和参数,避免在 SKILL.md 中硬编码

4. references/(可选)—— 参考文档

AI 执行任务时可以查阅的知识性文档

比如:

  • 编码规范文档(团队的代码风格指南)
  • 安全审计标准(如 OWASP Top 10 清单)
  • API 文档(第三方服务的接口说明)
  • 技术选型文档(为什么用 A 不用 B 的决策记录)

5. requirements.txt(可选)—— 依赖声明

如果 scripts/ 中的脚本依赖第三方库,在这里声明,方便部署时一键安装:

pandas>=2.0.0
openpyxl>=3.1.0
1.2.3 一些场景对应的组合:
场景 推荐结构 说明
简单的编码规范 只需 SKILL.md 如 Git 提交规范、命名约定
代码生成类 SKILL.md + resources/template/ 模板驱动,保证生成代码的一致性
数据处理类 SKILL.md + scripts/ + resources/config/ 复杂逻辑封装到脚本,配置外部化
质量审查类 SKILL.md + references/ 参考文档驱动,确保审查有据可依
完整工程流程 全套目录 如项目初始化、CI/CD 配置等复杂流程

1.3 Skill 的类型分类

类型 描述 示例
代码生成类 按模板生成代码 React组件生成器、API端点生成器
工程流程类 执行标准化流程 项目初始化、CI/CD配置
质量保障类 代码审查与测试 安全审计Skill、代码审查Skill
文档生成类 自动生成文档 API文档生成、变更日志生成
调试修复类 排查和修复问题 错误诊断Skill、性能调优Skill

2. 官方与社区 Skill 资源

即使vibecoding出世不久,但在发展极快的计算机行业,Skill 生态已经非常成熟

从 Anthropic 官方到头部大厂、再到社区个人开发者,已经沉淀了大量可直接使用的高质量 Skill

我们不必从零开始造轮子,学会"找到好 Skill → 评估 → 安装 → 在此基础上定制",是比从头写更高效的路径


2.1 Anthropic 官方 Skill 库

仓库地址https://github.com/anthropics/skills

这是 Anthropic 官方维护的 Skill 库,质量最高、最值得优先使用

官方 Skill 分类总览:

类别 Skill 示例 说明
文档处理 docxpdfpptxxlsx 生成和处理 Office 文档、PDF,生产级质量
创意设计 algorithmic-artcanvas-designslack-gif-creator 生成算法艺术、设计画布、动图
开发技术 frontend-designmcp-builderwebapp-testingartifacts-builder 前端设计、MCP Server 生成、Web 应用测试
企业沟通 brand-guidelinesinternal-comms 品牌规范、内部沟通模板
工具 skill-creator 用 AI 创建新 Skill 的 Skill(“元技能”)

安装方式(使用 Vercel Skills CLI):

# 安装 Anthropic 官方全部 Skill(全局安装)
$ npx skills add anthropics/skills -g

# 只安装指定 Skill(推荐按需安装)
$ npx skills add anthropics/skills@frontend-design -g
$ npx skills add anthropics/skills@mcp-builder -g
$ npx skills add anthropics/skills@skill-creator -g

提示
skill-creator -> “元技能”
创建Skill的Skill
刚开始学习 Skill 编写,可以先安装它,然后告诉 AI"帮我创建一个 XXX Skill",它会按照标准规范帮你生成 SKILL.md 和目录结构

手动安装(不使用 CLI):

不想用 npx skills 命令,也可以手动操作:

# 克隆官方仓库到本地
$ git clone https://github.com/anthropics/skills.git

# 将需要的 Skill 目录复制到你的项目中
$ cp -r skills/skills/frontend-design .claude/skills/

注意:也可以在GitHub中下载,只要Skill文件夹中的部分,复制到C盘用户中.claude/skills


2.2 Vercel 官方 Skill 库

仓库地址https://github.com/vercel-labs/skills

Vercel(Next.js 的母公司)维护的 Skill 库,专注于 React、Next.js、AI SDK、部署 等前端生态

如果用 Next.js 技术栈开发,这个库非常有价值

Vercel Skill 分类:

类别 覆盖内容
React / Next.js React 最佳实践、Next.js App Router、性能优化
AI SDK Vercel AI SDK 集成、AI 应用开发
设计与 UI 无障碍设计、高性能 UI 组件
浏览器自动化 浏览器交互自动化测试
部署 Vercel 平台部署流程
商业 电商和支付体验
工作流 持久化、弹性工作流
通用工具 find-skills(搜索发现新 Skill)

安装方式:

# 安装 Vercel 全部 Skill
$ npx skills add vercel-labs/skills -g

# 安装 find-skills(推荐首先安装,用于搜索发现其他 Skill)
$ npx skills add vercel-labs/skills@find-skills -g -y

提示
find-skills 是一个"技能发现者" Skill
—— 当你需要完成某个任务但不知道有没有现成的 Skill 时,它会自动帮你搜索并推荐最合适的 Skill ( 找Skill的Skill )
强烈建议安装它


2.3 Vercel Skills CLI:Skill 的"包管理器"

Vercel 还提供了一个命令行工具 npx skills,可以把它理解为 Skill 世界的 npm —— 用来搜索、安装、管理各种 Skill

基本用法:

# 搜索 Skill(按关键词)
$ npx skills find "react testing"

# 安装 Skill(从 GitHub 仓库)
$ npx skills add <owner/repo>        # 安装仓库中的全部 Skill
$ npx skills add <owner/repo>@<name>   # 安装指定 Skill
$ npx skills add <owner/repo> -g      # 全局安装(所有项目可用)

# 列出已安装的 Skill
$ npx skills list

# 初始化(在当前项目创建 Skill 目录)
$ npx skills init

支持的 AI 工具:Claude Code、GitHub Copilot、Cursor、Qoder、OpenAI Codex、Cline、Windsurf 等多种 AI 编程工具。具体支持范围会随 CLI 版本变化,安装前以项目 README 为准


2.4 社区 Skill 库

除了官方库,社区贡献了大量 Skill 资源:

精选 GitHub 仓库:

仓库 Skill 数量 特色
ComposioHQ/awesome-claude-skills 127+ 10大分类,含59个SaaS应用集成Skill
alirezarezvani/claude-skills 235+ 9大领域,含25个POWERFUL级高级Skill
travisvn/awesome-claude-skills 持续更新 精选列表,社区投票排名
glebis/claude-skills 专项 专注特定工作流的高质量Skill

alirezarezvani/claude-skills 领域覆盖(235+ Skill):

工程核心(37):架构、前端、后端、QA、DevOps、安全、AI/ML
高级工程(45):Agent设计器、RAG架构师、数据库设计、CI/CD构建器、MCP构建器
产品(16):产品经理、UX研究员、UI设计、落地页、SaaS脚手架
营销(44):内容、SEO、CRO、渠道、增长、情报、销售
项目管理(9):Scrum Master、Jira集成、Confluence集成
C-Level顾问(34):全套C-Suite角色(CTO、CFO等)
合规与质量(14):ISO 13485、GDPR、FDA合规
商业与增长(5):客户成功、销售工程师、收入运营
财务(4):财务分析、SaaS指标教练

安装社区 Skill:

# 从社区仓库安装
$ npx skills add alirezarezvani/claude-skills -g
$ npx skills add ComposioHQ/awesome-claude-skills -g

# 手动安装(克隆后复制需要的目录)
$ git clone https://github.com/alirezarezvani/claude-skills.git
$ cp -r claude-skills/engineering-team/frontend .claude/skills/

国内大厂 Skill 库( 国内用户推荐):

国内头部科技公司也在积极拥抱 Skill 生态,维护了多个高质量的 Skill 库:

厂商 仓库/平台 特色 Skill 说明
字节跳动/火山引擎 GitHub: bytedance/agentkit-samples 联网搜索、文本转语音(TTS)、图像理解 基于火山引擎 API,企业级 AgentKit 示例
科大讯飞 GitHub: iflytek/iFly-Skills 语音合成(TTS)、语音转写、PDF/图片OCR、发票OCR、机器翻译、文本校对 讯飞 AI 能力的 Skill 封装,语音和 OCR 最强
科大讯飞 GitHub: iflytek/skillhub 企业级 Skill 注册中心 私有部署的 Skill 商店,支持团队协作管理
阿里巴巴/通义灵码 通义灵码内置 代码审查、日志分析、API 文档生成 支持 SKILL.md 格式,可在 ~/.lingma/skills/ 自定义
腾讯/CodeBuddy CodeBuddy Agent 平台 自定义 Skill 构建 支持 Skill 创建和集成,与腾讯云生态打通

安装国内大厂 Skill 示例:

# 科大讯飞 iFly-Skills(语音、OCR、翻译等 AI 能力)
$ git clone https://github.com/iflytek/iFly-Skills.git
$ cp -r iFly-Skills/ifly-pdf-image-ocr .claude/skills/
# 注意:需要在讯飞开放平台申请 API Key,配置 XFEI_APP_ID 等环境变量

# 字节跳动 AgentKit Samples
$ git clone https://github.com/bytedance/agentkit-samples.git
$ cp -r agentkit-samples/skills/byted-web-search .claude/skills/
# 注意:需要火山引擎 API Key

提示
国内大厂的 Skill 大多基于各自的云服务 API,使用前需要注册对应平台并获取 API Key
但它们在中文处理、语音识别、OCR 等方面的能力远超海外同类 Skill,非常适合国内开发者


2.5 Skill 聚合平台

如果觉得逐个找仓库太麻烦,还有专门的 Skill 聚合搜索平台:

平台 地址 Skill 数量 特色
skills.sh https://skills.sh 48,000+ Vercel 官方推荐的发现平台
SkillsMP https://skillsmp.com/zh 900,000+ 最大的 Skill 市场,支持中文界面
AgentSkills.io https://agentskills.io 开放标准 Agent Skills 开放标准定义

在这些平台上,你可以按分类浏览、按关键词搜索,找到需要的 Skill 后一键安装

提示:SkillsMP 从 GitHub 上自动索引包含 SKILL.md 的仓库,所以你在 GitHub 上发布的 Skill 也可能被收录进去


2.6 Cursor 规则库

Cursor 使用 Rules 作为项目级 AI 行为规范

旧版常见 .cursorrules,新版更推荐 .cursor/rules/*.mdc

它和 Skill 不完全相同,但都属于“把经验写成可复用上下文”的做法

社区贡献了大量现成模板:

资源 地址 说明
cursor.directory https://cursor.directory/ 按技术栈分类的规则模板集合
cursorrules.org https://cursorrules.org/ 可参考旧版规则写法,再迁移到 .cursor/rules/*.mdc
awesome-cursorrules GitHub: PatrickJS/awesome-cursorrules 社区精选规则合集

2.7 使用第三方 Skill 的安全评估

Skill 本质上是给 AI 的"操作指令",某些恶意 Skill 可能包含危险操作

在使用任何第三方 Skill 之前,必须进行安全评估

维度 检查项 举例
安全性 是否包含危险命令?是否会泄露敏感信息? 检查有无 rm -rfcurl 发送数据到外部
维护状态 最近更新时间?作者是否活跃? 超过6个月未更新的慎用
文档完整性 SKILL.md 是否清晰?有无使用说明和示例? 缺少文档的 Skill 质量可能不高
兼容性 是否与你使用的工具版本兼容? 检查 Frontmatter 中的 tools 字段
来源可信度 是官方/知名组织还是个人?Star 数? 优先选用官方库和高 Star 仓库

安全检查路径:

# 1. 安装前先浏览 Skill 内容(不要盲目安装)
# 在 GitHub 上直接阅读 SKILL.md

# 2. 检查 scripts/ 目录中的脚本(如果有的话)
# 确保没有网络请求、文件删除等危险操作

# 3. 在测试项目中先试用,确认安全后再用于正式项目

注意
永远不要盲目使用来历不明的 Skill
安装前至少通读一遍 SKILL.md 的内容和 scripts/ 目录中的脚本代码,确保没有危险操作
官方库(Anthropic、Vercel)优先,社区高 Star 仓库其次,个人仓库最后


2.8 Skill 实操练习

案例一:用 skill-creator 让 AI 帮你创建 Skill

skill-creator 是 Anthropic 官方提供的一个"元技能" —— 它的功能就是帮你创建新的 Skill。这相当于请了一位 Skill 专家替你写"操作手册"

案例:

> 用 skill-creator 帮我创建一个名为 weekly-report-generator 的技能。
> 功能:每周自动扫描本周的 Git 提交记录和 TODO 变更,
> 生成一份结构化的周报 Markdown 文件。
> 需要的工具:Read、Glob、Bash(用于 git log)。

案例二:使用官方 PDF 文档处理 Skill

Anthropic 官方的 pdf Skill 可以让 Claude 处理 PDF 文件 —— 解析内容、提取信息、生成摘要等

案例:

> 请读取 docs/产品需求文档.pdf,提取其中的核心功能列表和技术要求,
> 整理成一份 Markdown 格式的摘要。

案例三:使用官方 frontend-design Skill

frontend-design Skill 让 Claude 具备专业的前端设计能力 —— 生成像素级精确的 UI 组件

案例:

> 请使用 frontend-design 技能,为书签管理器设计一个响应式的卡片列表页面。
> 要求:支持暗色模式,卡片包含标题、URL、标签和收藏时间。
> 技术栈:React + Tailwind CSS。

3. 构建Skill

主要是要将重复使用的prompt、开发模式、审查流程等变成Skill

可自行创建文件夹,也可使用创建Skill的Skill


4. Skill 与 AI 工具的集成

4.1 在 Claude Code 中集成

注意:即便不写也可能会调用,此为安全冗余作用

方法一:通过 CLAUDE.md 引用(推荐)

在 CLAUDE.md 中添加 Skill 引用:

## 项目 Skills
以下 Skill 定义了标准化的开发流程(每个 Skill 是一个目录,核心指令在 SKILL.md 中):
- `.claude/skills/react-component/` - React 组件生成规范
- `.claude/skills/api-endpoint/` - API 端点生成规范
- `.claude/skills/git-commit/` - Git 提交规范
- `.claude/skills/security-audit/` - 代码安全审计

执行相关任务时,请先阅读对应 Skill 目录下的 SKILL.md 并严格遵循。
如 Skill 中包含 scripts/、resources/ 或 references/,请一并参考。

方法二:通过自定义 slash commands

将 Skill 的触发文件放在 .claude/commands/ 目录下,即可通过 /skill名称 直接触发:

# 文件结构
.claude/
├── commands/
│   ├── new-component.md   # 触发方式:/new-component(引用 skills 中的规范)
│   └── security-check.md   # 触发方式:/security-check
└── skills/
   ├── react-component/   # 完整 Skill 包(SKILL.md + scripts + resources)
   │   ├── SKILL.md
   │   ├── scripts/
   │   └── resources/
   ├── api-endpoint/      # 中等 Skill 包(SKILL.md + resources/config)
   │   ├── SKILL.md
   │   └── resources/
   ├── security-audit/    # 参考文档型(SKILL.md + references + resources/examples)
   │   ├── SKILL.md
   │   ├── references/
   │   └── resources/
   └── git-commit/       # 简单 Skill(仅 SKILL.md)
      └── SKILL.md

5. Skill 的迭代与版本管理

5.1 持续优化

Skill 不是写完就不管了

每次使用后,记录:

  • AI 哪些地方做得好?→ 保持
  • AI 哪些地方做得不好?→ 在 Skill 中加入更明确的指令
  • 有没有遗漏的边界情况?→ 补充到错误处理部分

5.2 版本管理

用 Git 管理你的 Skill 目录,就像管理代码一样:

# 提交整个 Skill 包(包括 SKILL.md、scripts、resources 等)
$ git add .claude/skills/react-component/
$ git commit -m "feat(skills): 新增 React 组件生成 Skill v1.0"

# 更新 Skill 后,修改 SKILL.md 中的版本号并提交
$ git add .claude/skills/react-component/SKILL.md
$ git commit -m "chore(skills): 升级 React 组件 Skill 至 v1.1,优化模板"

6. Superpowers 插件

Superpowers 是 Claude Code 生态中的一类社区增强插件 / Skills 集合

它不是“必装”的,但思路值得学习:把成熟工作流封装成可复用能力,让 AI 不只是会写代码,还会按固定方法做事

6.1 什么是 Superpowers?

Superpowers 本质是一套工作方法论集合,通常会封装成多个可复用 Skill

安装后,AI 可以在合适的任务中调用这些方法论

安装前后对比:

没装 Superpowers 装了 Superpowers
你:“加个批量导出功能” 你:“加个批量导出功能”
AI:“好的,我来实现…”(直接写代码) AI:“在开始前我需要确认:1.导出格式?2.数据量多大?3.需要异步吗?”→给出 2-3 个方案,确认后再动手

6.2 核心 Skills 一览

Skill 功能 触发时机
头脑风暴 (brainstorming) 需求分析→设计规格,先想清楚再动手 新需求/新功能开始时
编写计划 (writing-plans) 把规格拆成可执行的实施步骤 确认设计后
执行计划 (executing-plans) 按计划逐步实施,每步验证 开发过程中
测试驱动开发 (TDD) 严格 TDD:先写测试,再写代码 开发核心逻辑时
系统化调试 (debugging) 四阶段调试法:定位→分析→假设→修复 遇到 Bug 时
代码审查 (code-review) 派遣审查 agent 检查代码质量 功能完成后
完成前验证 (verification) 声称完成前必须跑验证 任务结束前

6.3 安装方法

项目初始化之后(创建完claude.md之后)

方式一:npx 一键安装(推荐)

# 进入你的项目目录(重要!不要在主目录 ~ 下运行)
$ cd /your/project

# 英文版(原版)
$ npx superpowers

# 中文增强版(推荐国内用户,包含 6 个中国特色 Skill)
$ npx superpowers-zh

安装后会在项目下生成 .claude/skills/ 目录,包含所有 Skill 文件

方式二:手动安装(备选)

# 克隆仓库
git clone https://github.com/jnMetaCode/superpowers-zh.git

# 复制 skills 到项目
cp -r superpowers-zh/skills /your/project/.claude/skills

注意
手动安装只复制了 Skills 文件,不会配置自动触发钩子
推荐使用 npx 方式一键安装


7. MCP(Model Context Protocol)简介

MCP 是 Anthropic 推出的一个标准化协议,让 AI 工具可以连接外部服务和数据源

可以把 MCP 理解为给 AI 装"插件"或"扩展能力"

MCP 的概念:

AI 工具(Claude Code)
   │
   ├── 内置能力:读写文件、运行命令
   │
   └── MCP 扩展能力:
      ├── GitHub MCP Server → 操作 GitHub(创建PR、管理Issue)
      ├── Database MCP Server → 直接查询数据库
      ├── Browser MCP Server → 浏览器自动化测试
      └── 更多第三方 MCP Server...

MCP 与 Skill 的关系:

  • Skill 定义了"做什么、怎么做"(流程和规范)
  • MCP 提供了"能力扩展"(让AI能做更多事情)

两者互补:你可以在 Skill 中调用 MCP 提供的能力。例如,一个"部署检查 Skill"可以调用 GitHub MCP 来创建 PR

提示:MCP 是一个进阶主题。初学者可以先专注于 Skill 的编写和使用,等熟练后再探索 MCP 扩展


五. 实践经验总结

1. 创建项目大致顺序

# 功能 是什么 什么时候用
1 /plan 让 AI 先出方案,人审核后再动手 任何复杂任务开始前
2 /init + CLAUDE.md 自动生成项目规范文档 项目搭好后,让 AI 理解你的规范
3 Task 任务列表 把大任务拆成小步骤,逐个跟踪 多步骤任务时告诉 AI “创建任务列表”
4 自定义 Skill 把重复性工作封装成可复用的"操作手册" 相同的模式要重复做多次时
5 官方 Skill 使用社区维护的高质量技能 需要前端设计、文档生成等专业能力时
6 Hook 配置 让 AI 在特定操作前后自动执行命令 每次改完代码想自动格式化时
7 Memory 系统 让 AI 记住你的偏好,越用越懂你 你的技术偏好、项目约定
8 /review 让 AI 审查代码质量 每完成一个功能模块后
9 /security-review 安全检查:密码、认证、漏洞 认证模块完成 + 上线前
10 多模型切换 简单任务用便宜模型,复杂任务用强模型 省钱 + 提效
11 权限模式 控制 AI 的操作权限 保护你的代码不被意外修改
12 Git 工作流 版本控制,随时能"后悔" 每个功能完成后提交一次
13 环境变量管理 API 密钥、数据库连接等敏感信息 任何需要连接外部服务的项目
1. 选择项目 → 写一句话描述
2. 用AI生成PRD → 人工审查修改
3. 用AI生成SPEC → 确认技术方案
4. 创建CLAUDE.md → 建立项目上下文
5. 骨架搭建 → 验证可运行
6. 逐功能开发 → 每个功能一个commit
7. Code Review + 测试
8. 部署上线
9. 复盘总结

2. 不知道用什么技术栈


我要做一个XXX项目,叫XXX,请帮我在GitHub上找找有没有相似的项目,然后给出技术栈介绍,要求有具体的版本

3. 为项目添加 Superpowers 插件

自然语言给大模型描述

用终端在项目路径执行一下命令:

npx superpowers-zh

通过命令安装,记得告诉AI你装了这个插件,让他加载到项目中


4. 养成时常git提交的习惯

每完成一个步骤(产生、修改了文件)

就告诉AI把当前创建的所有内容,当做一个git提交到仓库中

可选:将数据库内容和隐私内容添加到gitignore中,不提交到仓库


5. 自行修改文件需重新加载

若手动修改了配置文件、安装Skill等

需重启claude或告诉claude你做了什么,让他加载一下


6. 审查代码

每完成一个步骤审查代码质量,并按需根据AI给出的结果修改

命令:

/review

7. 每一步的大致流程

写提示词 -> AI 写代码 -> 不断交流修改到满意为止 -> AI自行测试 -> 人工测试 -> 审查代码(/review)-> 提交git


六. 项目实战

1. 独立实战说明

Claude Code 负责深度编码和代码审查,Codex 负责文件整理、部署、自动化和桌面操作

独立开发流程(复用第五部分的方法论):

1. 选择项目 → 写一句话描述
2. 用AI生成PRD → 人工审查修改
3. 用AI生成SPEC → 确认技术方案
4. 创建CLAUDE.md → 建立项目上下文
5. 骨架搭建 → 验证可运行
6. 逐功能开发 → 每个功能一个commit
7. Code Review + 测试
8. 部署上线
9. 复盘总结

2. 选项目的三个原则

适合 Vibe Coding 的项目,最好满足三个条件:

  1. 需求能用一句话说清楚:比如“给我做一个可以记录支出的记账工具”
  2. 有可视化结果:页面、图表、报表、文件、部署链接都可以,方便你验收
  3. 边界不太大:第一版最好 3 天到 2 周能做完,不要一上来就做完整 SaaS

Claude Code 和 Codex 的分工可以这样理解:

项目特征 更适合的工具 原因
代码文件多、需要重构、要跑测试 Claude Code 终端工作流和代码审查更强
文件整理、文档生成、部署、自动化 Codex Desktop 图形界面和桌面任务更顺手
从零做 Web App 两者都适合 Claude Code 写核心代码,Codex 辅助部署与整理
面向非程序员的轻量工具 Codex Desktop 交互门槛低,适合用自然语言驱动

3. 初级项目清单:先做出可用工具

项目 更适合 你会练到什么 核心功能 预计周期
番茄钟 + 任务记录 Codex / Claude Code 状态管理、计时器、轻量 UI 计时、暂停、任务列表、完成统计 1-2 天
个人记账工具 Claude Code CRUD、图表、数据建模 收支记录、分类统计、月度报表 3-5 天
习惯追踪器 Claude Code 日历视图、连续打卡逻辑 习惯创建、每日打卡、趋势图 3-5 天
Markdown 笔记应用 两者都适合 编辑器、预览、文件导出 实时预览、分类、搜索、导出 3-5 天
在线简历生成器 Codex 文档生成、模板化输出 表单录入、模板切换、PDF 导出 3-5 天
图片压缩与格式转换工具 Codex 文件批处理、命令行工具调用 批量上传、压缩、WebP 转换 2-4 天
课程资料整理器 Codex 本地文件操作、命名规范 扫描文件夹、重命名、生成目录 2-4 天
个人作品集网站 两者都适合 页面结构、响应式、部署 项目展示、关于我、联系方式 3-7 天

初级项目的目标不是“技术多复杂”,而是完整跑通:需求 → 计划 → 实现 → 验收 → 部署 → 复盘

4. 中级项目清单:做出完整业务闭环

项目 更适合 你会练到什么 核心功能 预计周期
团队任务看板 Claude Code 拖拽、权限、多人协作 看板、任务、成员、状态流转 1-2 周
读书/课程知识库 两者都适合 搜索、标签、摘要生成 资料导入、标签、全文搜索、摘要 1-2 周
AI 周报生成器 Codex 自动化、文档整合 读取 Git/任务记录、生成周报 3-7 天
博客/CMS 系统 Claude Code 内容模型、MDX、后台管理 文章、分类、草稿、发布 1-2 周
URL 短链接服务 Claude Code API、数据库、统计 短链生成、访问统计、后台 3-7 天
问卷调查系统 Claude Code 动态表单、统计图表 表单设计、提交、结果分析 1-2 周
食谱管理应用 两者都适合 搜索过滤、图片与结构化数据 食谱录入、食材清单、收藏 1 周
部署监控面板 Codex / Claude Code API 调用、定时检查 网站状态、日志摘要、告警 1-2 周
AI 知识库问答系统 Claude Code RAG、向量检索、引用来源 文档上传、检索、问答、引用 2-3 周
小型电商 MVP Claude Code 全栈业务、订单流程 商品、购物车、订单、后台 2-4 周

中级项目建议每个功能单独提交一次 Git
让 AI 做实现,你负责检查业务逻辑是否真的闭环

5. 进阶项目清单:挑战 Agent 工作流

项目 更适合 关键挑战 第一版验收标准
AI 客服机器人 Claude Code 工具调用、知识库、会话状态 能基于资料回答,并展示引用
多人协作白板 Claude Code Canvas、实时同步、冲突处理 多人能同时绘制和移动元素
会议纪要流水线 Codex 音频转写、摘要、文档生成 输入录音,输出纪要和待办
GitHub 热门项目推荐器 Codex 自动化、信息筛选、定时执行 每周生成一篇项目推荐稿
个人数据驾驶舱 两者都适合 多数据源、图表、权限 展示健康/学习/财务核心指标
代码库体检工具 Claude Code 静态分析、规则设计、报告生成 输出质量评分和修复建议
SaaS 订阅管理 Claude Code 认证、支付、权限、账单 用户可订阅、取消、查看账单
浏览器自动化助手 Codex 浏览器操作、表单、截图验证 自动完成一组网页重复操作

进阶项目不要一次性全做。先做“最小可用版本”,再用 AI 帮你列第二阶段路线图

6. 推荐起步项目:从这五个里面选

如果你不知道从哪个开始,优先选下面五个
它们最适合训练 Claude Code 和 Codex 的 Vibe Coding 工作流

推荐项目 为什么适合 第一条 Prompt 示例
个人记账工具 业务闭环清晰,适合练 CRUD 和图表 “请先帮我设计一个个人记账工具的 PRD,不要写代码。”
课程资料整理器 Codex 能发挥本地文件处理优势 “请扫描这个课程文件夹,先给出整理方案和命名规则。”
AI 周报生成器 适合练自动化与文档输出 “请基于 Git 提交、任务记录和笔记生成本周周报模板。”
团队任务看板 适合练复杂状态和拖拽交互 “请先设计任务看板的数据模型和页面结构。”
小型电商 MVP 覆盖全栈核心能力 “请进入计划模式,帮我规划一个微型商城的第一版。”

通用开场 Prompt:

我想做一个「项目名称」。请先不要写代码。
请你先完成三件事:
1. 用小白能看懂的话整理 PRD;
2. 拆成 3-5 个开发阶段;
3. 告诉我第一版最小可用功能应该包含什么。
等我确认后,再开始创建项目文件。

7. 从学习项目到开源贡献

当你完成了一个项目并想分享给社区时:

一个好的 GitHub 开源项目需要:

  1. README.md:项目介绍、功能截图、安装使用说明
  2. LICENSE:开源协议(推荐 MIT 协议)
  3. .gitignore:确保不提交敏感信息
  4. Contributing 指南(可选):告诉别人如何参与贡献

你可以让 Claude Code 帮你生成这些文件:

> 请为这个项目生成一个完整的 README.md,包含:
> - 项目介绍和功能截图位置
> - 技术栈
> - 本地开发环境搭建步骤
> - 使用说明
> - MIT License 声明

附录

附录A:常用命令速查表

Claude Code 命令速查
命令 功能
claude 启动交互式会话
claude --model <model> 使用指定模型启动
claude -p "prompt" 单次执行模式
/help 显示帮助
/model 查看/切换模型
/compact 压缩上下文
/clear 清空对话
/memory 管理记忆
/cost 查看费用
/review 代码审查
/init 初始化CLAUDE.md
Ctrl+C 中断操作
Esc 取消生成
Git 命令速查
命令 功能
git init 初始化仓库
git status 查看状态
git add . 暂存所有修改
git commit -m "msg" 提交
git push 推送到远程
git pull 拉取远程更新
git checkout . 撤销所有未提交的修改
git log --oneline 查看提交历史
git diff 查看修改内容
npm 命令速查
命令 功能
npm init -y 初始化项目
npm install <包名> 安装依赖
npm install -g <包名> 全局安装
npm run dev 启动开发服务器
npm run build 构建项目
npm test 运行测试
终端基础命令速查
命令 功能 Windows 替代
pwd 查看当前目录 pwd (PowerShell)
ls 列出文件 dir
cd <路径> 切换目录 同左
mkdir <名称> 创建目录 同左
clear 清屏 cls

附录B:Prompt 模板库

项目初始化模板
我要创建一个 [项目类型] 项目。

项目名称:[名称]
简述:[一句话描述]
技术栈:[前端框架] + [后端框架] + [数据库]

核心功能(MVP):
1. [功能1]
2. [功能2]
3. [功能3]

请先创建项目结构和基础配置文件,暂不实现具体功能。
功能实现模板
请在 [指定目录/文件] 中实现 [功能名称]。

具体需求:
1. [需求点1]
2. [需求点2]
3. [需求点3]

技术约束:
- 参考 [已有文件/模块] 的风格
- 使用 [指定技术/库]
- 返回格式遵循 [项目约定的格式]

请先说明实现计划,确认后再开始编码。
Bug 修复模板
发现一个Bug,需要修复:

现象:[实际看到的行为]
期望:[应该是什么行为]
复现步骤:
1. [步骤1]
2. [步骤2]

错误信息:
[粘贴完整的错误堆栈]

我已经尝试过:[你尝试的解决方案]

请定位问题原因并修复。
代码审查模板
请对 [文件路径或范围] 进行代码审查。

审查重点:
1. 安全性(输入验证、XSS防护、SQL注入)
2. 错误处理(异常是否被正确捕获和处理)
3. 性能(是否有明显的性能问题)
4. 代码质量(可读性、命名规范、重复代码)

请按严重程度分级:Critical / Warning / Info
并给出具体的修复建议。
架构设计模板
我需要设计一个 [系统/功能] 的架构。

业务需求:[描述]
性能要求:[QPS/响应时间/并发用户数]
技术约束:[必须使用的技术/限制条件]

请给出:
1. 系统架构图(文字描述即可)
2. 技术选型建议及理由
3. 数据模型设计
4. API 接口设计
5. 潜在的技术风险和应对方案

附录C:常见问题排查指南(FAQ 汇总)

类别 问题 解决方案
安装 npm install -g 报权限错误 macOS: 前加 sudo;Windows: 管理员运行
安装 下载超时 设置npm镜像: npm config set registry https://registry.npmmirror.com
安装 claude: command not found 检查npm全局路径是否在PATH中: npm config get prefix
连接 Invalid API Key (401) 检查Key是否完整复制,环境变量是否正确设置
连接 网络超时 国内用户使用中转服务或国产模型
连接 Rate limit exceeded 等待1分钟后重试,或升级API套餐
使用 AI修改了不该改的文件 Prompt中明确指定文件范围,或用 git checkout . 回退
使用 AI陷入修复循环 git checkout . 回退 + /clear 清空对话 + 重新描述需求
使用 对话太长AI遗忘 使用 /compact 压缩上下文
使用 AI推荐不存在的npm包 先到 npmjs.com 搜索确认包是否存在
费用 不确定花了多少钱 使用 /cost 查看当前会话费用
费用 想控制费用 简单任务用 Haiku/DeepSeek;设置月度预算
项目 数据库报错 运行 npx prisma db push 同步数据库
项目 端口被占用 杀掉占用端口的进程,或在命令中指定其他端口
部署 Vercel构建失败 检查构建日志中的错误信息,通常是依赖问题

附录E:术语表

英文术语 中文释义 简要说明
AI-Assisted Programming AI辅助编程 使用AI工具帮助编写代码
Agent 智能体 能自主执行任务的AI系统
Agentic Engineering 智能体工程化 系统化的AI驱动开发方法论
API 应用程序接口 程序之间通信的规则
API Key API密钥 访问AI服务的身份凭证
CLI 命令行界面 通过文字命令操作电脑
Context Window 上下文窗口 AI一次能处理的最大内容量
CRUD 增删改查 Create/Read/Update/Delete
Hallucination 幻觉 AI编造不存在的信息
IDE 集成开发环境 编写代码的专业软件
LLM 大语言模型 如Claude、GPT等AI模型
MCP 模型上下文协议 AI工具的扩展能力标准
MVP 最小可行产品 只包含核心功能的第一个版本
ORM 对象关系映射 用代码操作数据库的工具(如Prisma)
PRD 产品需求文档 描述产品"做什么"的文档
Prompt 提示词 给AI的指令/问题
RAG 检索增强生成 结合搜索和AI生成的技术
SDD 规范驱动开发 先写规范再让AI执行的方法
Skill 技能 封装的可复用AI指令集
SPEC 技术规范 描述产品"怎么做"的文档
Token 令牌 AI处理文本的基本单位
Vibe Coding 氛围编程 凭感觉和意图驱动的AI编程方式

Logo

汇聚全球AI编程工具,助力开发者即刻编程。

更多推荐