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 三层记忆总览

层位置优先级加载方式谁在维护
1CLAUDE.md(三级)高会话启动全量加载手动维护
2Auto 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、可选开 PRNormal
一轮结束后,回到第 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,复杂任务用 Sonnet30-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 起手(权限控制)

陌生代码库或一动牵全身的修改,永远先 /plan 或 Shift+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
规划优先/plan 或 Shift+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 editClaude 未原生支持 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 -rf、sudo、git 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 status 和 git 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 优先一动动一片,回退成本高
修复一个明确的 BugNormal范围明确、目标清晰
重命名函数、调整变量Normaldiff 可以一句话说清
大型重构、跨文件迁移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 示例说明
文档处理docx、pdf、pptx、xlsx生成和处理 Office 文档、PDF,生产级质量
创意设计algorithmic-art、canvas-design、slack-gif-creator生成算法艺术、设计画布、动图
开发技术frontend-design、mcp-builder、webapp-testing、artifacts-builder前端设计、MCP Server 生成、Web 应用测试
企业沟通brand-guidelines、internal-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.jsReact 最佳实践、Next.js App Router、性能优化
AI SDKVercel 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-skills127+10大分类,含59个SaaS应用集成Skill
alirezarezvani/claude-skills235+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/ 自定义
腾讯/CodeBuddyCodeBuddy 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.shhttps://skills.sh48,000+Vercel 官方推荐的发现平台
SkillsMPhttps://skillsmp.com/zh900,000+最大的 Skill 市场,支持中文界面
AgentSkills.iohttps://agentskills.io开放标准Agent Skills 开放标准定义

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

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


2.6 Cursor 规则库

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

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

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

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

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

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

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

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

维度检查项举例
安全性是否包含危险命令?是否会泄露敏感信息?检查有无 rm -rf、curl 发送数据到外部
维护状态最近更新时间?作者是否活跃?超过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 理解你的规范
3Task 任务列表把大任务拆成小步骤,逐个跟踪多步骤任务时告诉 AI “创建任务列表”
4自定义 Skill把重复性工作封装成可复用的"操作手册"相同的模式要重复做多次时
5官方 Skill使用社区维护的高质量技能需要前端设计、文档生成等专业能力时
6Hook 配置让 AI 在特定操作前后自动执行命令每次改完代码想自动格式化时
7Memory 系统让 AI 记住你的偏好,越用越懂你你的技术偏好、项目约定
8/review让 AI 审查代码质量每完成一个功能模块后
9/security-review安全检查:密码、认证、漏洞认证模块完成 + 上线前
10多模型切换简单任务用便宜模型,复杂任务用强模型省钱 + 提效
11权限模式控制 AI 的操作权限保护你的代码不被意外修改
12Git 工作流版本控制,随时能"后悔"每个功能完成后提交一次
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 CodeCRUD、图表、数据建模收支记录、分类统计、月度报表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 CodeAPI、数据库、统计短链生成、访问统计、后台3-7 天
问卷调查系统Claude Code动态表单、统计图表表单设计、提交、结果分析1-2 周
食谱管理应用两者都适合搜索过滤、图片与结构化数据食谱录入、食材清单、收藏1 周
部署监控面板Codex / Claude CodeAPI 调用、定时检查网站状态、日志摘要、告警1-2 周
AI 知识库问答系统Claude CodeRAG、向量检索、引用来源文档上传、检索、问答、引用2-3 周
小型电商 MVPClaude Code全栈业务、订单流程商品、购物车、订单、后台2-4 周

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

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

项目更适合关键挑战第一版验收标准
AI 客服机器人Claude Code工具调用、知识库、会话状态能基于资料回答,并展示引用
多人协作白板Claude CodeCanvas、实时同步、冲突处理多人能同时绘制和移动元素
会议纪要流水线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 ProgrammingAI辅助编程使用AI工具帮助编写代码
Agent智能体能自主执行任务的AI系统
Agentic Engineering智能体工程化系统化的AI驱动开发方法论
API应用程序接口程序之间通信的规则
API KeyAPI密钥访问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编程工具,助力开发者即刻编程。

更多推荐