2.2 VibeCoding 规范 ​

阅读完本节后，你将会收获：

• 掌握 VibeCoding 标准五步工作规范：探索 → 规划 → 执行 → 验证 → 提交
• 理解 Agent Native 开发思维，学会从"怎么做"转向"做什么"的产品导向思维
• 学会编写高质量提示词：直接描述任务、提供上下文、给出具体约束
• 掌握权限模式、斜杠命令、检查点功能等 Claude Code 核心交互方式
• 了解多 Agent 并行协作机制，学会利用 AI 自动化能力提升开发效率

序言中提到的"Spec（开发规范）"是 Vibecoding 的核心，以及 VibeCoding 的标准开发流程。

Agent Native = 以 AI Agent 为中心的开发思维

传统开发中，AI 是辅助工具（Copilot）；Agent Native 中，AI 是自主执行者（Autopilot）。

传统思维 vs Agent Native ​

Agent Native 的三大原则 ​

1. 意图驱动

告诉 AI 目标，让它自己决定实现方式：

❌ 传统思维：
"帮我写一个函数，接收数组参数，用 for 循环遍历，
遇到大于 10 的就 push 到新数组里..."

✅ Agent Native：
"过滤数组中大于 10 的元素，返回新数组"

2. 异步协作

AI 可以在你睡觉时工作：

# 你设定目标，AI 自主执行
"实现用户评论功能，包括：
1. 数据库 schema（Comment 模型）
2. CRUD API
3. 前端评论表单
4. 评论列表展示

完成后告诉我，我先去忙别的。"

3. 信任但验证

不要逐行检查 AI 的代码，而是：

验证方式：

• 功能测试：跑一下看看能不能用
• 类型检查：tsc 有没有报错
• 代码审查：只看关键逻辑，不看实现细节

从开发者到编排者 ​

Agent Native 时代，你的角色转变：

记住：代码是实现细节，产品才是目的。Agent Native 让你从"怎么做"中解放出来，专注于"做什么"。

:::

核心概念 ​

Vibecoding 的核心理念 ​

Vibecoding = CodingAgent（Coding智能体） + Skills（技能）+ Tools（工具）+ ...

CodingAgent 综合信息，制定计划，执行，检查Skills 提供具体任务的方法、步骤、数据、标准

提示词的核心原则 ​

AI 是一个强大的编程助手，它理解技术术语、熟悉各种框架、能快速分析代码。

沟通的关键是：直接、具体、有上下文。

❌ 绕弯子：

"你是一位资深的全栈工程师，精通各种技术栈..."

→ AI 不需要角色扮演，它知道自己能做什么

✅ 直接说事：

"检测这个 React 组件的类型安全问题"

→ 一句话讲清楚要做什么

❌ 模糊描述：

"帮我优化一下代码"

→ AI 不知道优化什么方向

✅ 具体需求：

"优化登录页面的加载性能：
1. 添加图片懒加载
2. 延迟加载非关键资源
3. 使用 Next.js 的动态导入"

→ 明确优化目标和实现方式

提示词原则 ​

好提示词的特征 ​

提示词对比：欠佳 vs 推荐 ​

核心原则：

• 不要让 AI 猜 → 提供明确上下文
• 不要含糊其辞 → 给出具体要求
• 不要强行编造 → 给 AI 一个"不确定"的出口

让 AI 反复提问 ​

"我要开发一个任务管理应用。
请反复问我问题，直到你完全理解我的需求。
不要猜测，直接问。"

提示词模板 ​

代码生成模板 ​

"实现 [功能名称]

技术栈：
- Next.js [版本]
- TypeScript
- Drizzle ORM
- [其他技术]

需求：
1. [具体需求1]
2. [具体需求2]
3. [具体需求3]

注意事项：
- 遵循项目现有代码风格
- 不要引入新依赖，除非必要
- 包含错误处理"

Bug 修复模板 ​

"修复 Bug

文件路径: [完整路径]
错误信息:
[完整报错日志]

当前代码:
[相关代码片段]

期望行为: [描述]
实际行为: [描述]

请分析原因并提供修复方案"

标准工作流 ​

AI 的自动化能力 ​

在开始工作流之前，记住：AI 能自动处理很多任务。

AI 的自动化能力：

• ✅ 自动探索项目结构（你不需要告诉它看哪些文件）
• ✅ 自动选择合适的工具（Read、Edit、Bash）
• ✅ 自动处理错误（失败会重试或换方案）
• ✅ 自动生成提交信息（根据修改内容）
• ✅ 自动识别依赖关系（知道修改会影响哪些文件）

你需要做的：

• 清楚描述任务目标
• 提供必要的上下文
• 验证结果并反馈

不需要做：

• ❌ 指定具体步骤（"先读文件A，再读文件B"）
• ❌ 告诉它用哪个工具（"用 Read 工具读取"）
• ❌ 手动组合命令（"运行 git add 然后 git commit"）
• ❌ 手动处理错误（"如果失败就重试"）

权限模式 ​

三种权限模式 ​

Default 模式（推荐） ​

只读操作（读取文件、搜索代码、查看状态、列出文件）自动批准，修改操作（编辑文件、删除文件、运行命令、网络请求、Git push）需要确认。

权限弹窗选项：

• Yes：同意本次操作
• Yes, don't ask again for this tool：同意本次，且后续同类操作不再询问
• No, and tell AI what to do differently：拒绝并告诉 AI 换个方式

Plan 模式（代码审查） ​

仅允许只读操作，所有修改操作都会被阻止。

适用场景：

• 代码审查
• 了解代码库结构
• 探索性分析

Accept Edits 模式（高效编辑） ​

编辑操作需要确认，其他操作自动批准。

# 示例行为
"读取配置文件"
"运行测试"
# AI 直接执行（非编辑操作）

"修改函数签名"
"删除这个文件"
# AI 会询问（编辑操作需确认）

适用场景：

• 需要频繁运行命令/测试
• 对文件修改要谨慎
• 高度信任的自动化工作流

模式切换 ​

快捷键 ​

Shift+Tab # 在三种模式间循环切换

常用交互命令 ​

在 Claude Code 中，以 / 开头的命令称为斜杠命令，用于快速执行特定操作：

常用场景：

# 开新任务时清空上下文
/clear

# 查看剩余额度
/status

# 切换到更强模型
/model opus

# 恢复到之前的状态
/rewind

CLI 命令与启动选项 ​

! npm test
! git status
! ls -la

claude --agents '{
  "code-reviewer": {
    "description": "Expert code reviewer",
    "prompt": "You are a senior code reviewer",
    "tools": ["Read", "Grep", "Glob", "Bash"],
    "model": "sonnet"
  }
}'

五步工作流 ​

1. 探索项目结构 ​

目的：了解现有代码组织，避免重复工作

# 让 AI 探索项目
"探索这个项目的结构，告诉我:
1. 使用的技术栈
2. 文件组织方式
3. 现有的功能模块
4. 配置文件的作用"

输出示例:

项目使用 Next.js 16 + TypeScript + Drizzle
- app/: 页面和 API
- components/: 可复用组件
- src/db/: 数据库模型

2. 规划实现步骤 ​

目的: 先想清楚再动手，减少返工

"我要添加用户评论功能。
请规划实现步骤，包括:
1. 需要创建哪些文件
2. 需要修改哪些现有文件
3. 数据库 schema 变更
4. 实现顺序"

输出示例:

步骤:
1. 更新 Drizzle schema (添加 Comment 模型)
2. 运行 npx drizzle-kit push
3. 创建 API route (app/api/comments/route.ts)
4. 创建评论组件 (components/CommentForm.tsx)
5. 集成到详情页

3. 编写代码 ​

目的：按计划实现功能

AI 的自动拆分能力：

复杂任务会被自动拆解：

# 你只需要说
"实现用户评论功能"

# AI 会自动拆分为：
1. 更新 Drizzle schema
2. 运行数据库迁移
3. 创建 API 端点
4. 编写前端组件
5. 集成到页面
6. 测试验证

你不需要手动指定每个步骤，AI 会：

• 识别任务依赖关系
• 确定执行顺序
• 并行处理独立部分
• 验证每个步骤的结果

当然，你也可以分步执行：

"按照步骤 1，更新 Drizzle schema"

"按照步骤 2，生成并运行迁移"

"按照步骤 3，创建评论 API"

4. 测试验证 ​

目的：确保功能正常

"测试评论功能:
1. 验证 API 能正常创建评论
2. 验证评论能正确显示
3. 验证错误处理"

5. 提交代码 ​

目的: 建立版本记录

"评论功能开发完成，提交代码"

6. 检查点功能 ​

目的: 自动跟踪文件修改，支持快速回退

Claude Code 自动跟踪文件修改，支持快速回退。

自动创建: 每次发送提示时自动创建检查点，无需手动保存

回退方法: 按 Esc+Esc 或运行 /rewind，选择：

• 仅对话：回退用户消息，保留代码更改
• 仅代码：恢复文件更改，保留对话
• 代码和对话：两者都恢复

理解 Agent ​

什么是 Agent ​

Agent = AI 本身

AI 本身就是一个 Agent，它的工作是：

• 理解你的意图和需求
• 做决策（用什么工具、先做什么后做什么）
• 协调各种工具完成任务

可以把 Agent 理解为一个任务执行器：

• 接收你的指令（提示词）
• 调用各种工具完成任务
• 返回执行结果

与普通 AI 对话的区别：

什么是自定义 Agent ​

自定义 Agent = 你创建的专门 Agent

自定义 Agent 是主 Agent 可以调用的"专门助手"。每个自定义 Agent：

• 有特定的用途和专业领域
• 有独立的上下文窗口（不污染主对话）
• 有自定义的系统提示（专门训练）
• 可以限制工具访问权限

使用自定义 Agent 的优势：

Agent 类型：

你：[在计划模式] 帮我重构认证模块
我：让我先研究一下你的认证实现...
[内部调用 Plan Agent 探索认证相关文件]
[Plan Agent 搜索代码库并返回发现]
我：基于研究，这是我的建议方案...

创建自定义 Agent ​

使用 /agents 命令创建你自己的自定义 Agent。

第0步：在 Claude 内输入 /agents 回车

第一步：选择创建方式 (Creation Method)

这里决定了 Agent 的"大脑"（系统提示词）是如何生成的。

# 直接告诉 AI 你的需求
"@code-reviewer 以后检查代码时，特别关注安全性问题"

@翻译agent 把这段翻译成英文，但保持技术术语不变

多 Agent 并行协作 ​

自动启用 ​

Claude Code 根据任务描述主动委派任务，使用 Task 工具创建通用 Agent 并行处理：

• 任务描述中的关键词："并行"、"同时"、"多 Agent"
• 自定义 Agent 配置中的 description 字段
• 当前上下文和可用工具

多个并行 Agent ​

任务：了解 Prisma、Drizzle、Supabase 三种数据持久化方案

串行方式：
读 Prisma 文档 → 等待 → 读 Drizzle 文档 → 等待 → 读 Supabase 文档 → 等待 → 总结对比

并行方式：
1 个消息 → 同时发起 3 个文档调研请求 → 收集所有信息 → 生成对比报告

任务：开发用户设置页面的多个功能模块

串行方式：
写头像上传 → 等待 → 写密码修改 → 等待 → 写通知偏好 → 等待 → 集成测试

并行方式：
1 个消息 → 同时启动 3 个 Agent 分别编写 3 个模块 → 收集所有代码 → 统一集成测试

使用示例 ​

# 自动并行 - AI 自动识别独立任务
"同时做这三件事：
1. 编写后端 API（用户认证）
2. 编写前端 UI（登录表单）
3. 编写数据库 schema（User 表）"

# 明确使用多 Agent
"使用多 Agent 并行开发任务模块：
- 后端团队做 CRUD API
- 前端团队做任务列表和表单
- 数据库团队做 Task 模型"

# 继续最近的对话
claude --continue

# 使用特定提示继续
claude --continue -p "显示我们的进度"

# 显示对话选择器
claude --resume

# 非交互模式继续
claude --continue -p "再次运行测试"

# 使用新分支创建
git worktree add ../project-feature-a -b feature-a

# 使用现有分支创建
git worktree add ../project-bugfix bugfix-123

cd ../project-feature-a
claude

# 列出所有 worktrees
git worktree list

# 删除 worktree
git worktree remove ../project-feature-a

// package.json
{
  "scripts": {
    "lint:claude": "claude -p '你是 linter。检查 vs main 的更改，报告拼写错误。每行一个文件名和行号，第二行描述问题。不返回其他文本。'"
  }
}

# 管道数据
cat build-error.txt | claude -p '简明解释构建错误的根本原因' > output.txt

# 控制输出格式
cat data.txt | claude -p '总结数据' --output-format text > summary.txt
cat code.py | claude -p '分析代码 bug' --output-format json > analysis.json
cat log.txt | claude -p '解析日志错误' --output-format stream-json

人在环路 ​

AI 能够自主完成很多任务，但以下场景建议保持人工审查：

Hooks 自动化 ​

使用 Hooks ​

运行 /hooks 打开交互式配置界面，这是最推荐的创建方式。

配置流程：

1. 选择 Hook 事件类型：

   • PreToolUse - 工具调用前
   • PostToolUse - 工具调用后
   • PostToolUseFailure - 工具执行失败后
   • Notification - 发送通知时
   • UserPromptSubmit - 用户提交提示时（推荐）

2. 配置 Hook 行为：

   • 选择触发条件（matcher）
   • 编写执行的 Shell 命令
   • 设置超时时间（默认 60 秒）

3. 保存并生效

常用场景 ​

{
  "hooks": {
    "PostToolUse": [
      {
        "matcher": "Write|Edit",
        "hooks": [{
          "type": "command",
          "command": "\\"$CLAUDE_PROJECT_DIR\\"/.claude/hooks/format-code.sh"
        }]
      }
    ]
  }
}

#!/usr/bin/env python3
# .claude/hooks/protect-files.py

import json, sys

data = json.load(sys.stdin)
path = data.get('tool_input', {}).get('file_path', '')

# 阻止写入敏感文件
if any(p in path for p in ['.env', '.key', '.pem']):
    print("受保护：不允许写入敏感文件", file=sys.stderr)
    sys.exit(2)

{
  "session_id": "会话ID",
  "cwd": "当前工作目录",
  "hook_event_name": "事件名称",
  "tool_name": "工具名称",
  "tool_input": {...}
}

安全注意事项 ​

# .env 文件（不要提交到 Git）
DATABASE_URL="postgresql://..."
OPENAI_API_KEY="sk-..."

# .gitignore
.env

核心理念 ​

Workflow 让 AI 开发可预测、可复现。

记住工作流五步曲：探索 → 规划 → 执行 → 验证 → 提交（根据情况灵活应用）

提示词自检清单 ​

发送提示词前检查：

• [ ] 任务描述清晰具体
• [ ] 提供了必要的上下文
• [ ] 明确了输出格式
• [ ] 给了 AI"不确定"的出口
• [ ] 包含了必要的约束条件
• [ ] 避免了冗长的角色设定
• [ ] 没有包含敏感信息（API Key、密码等）

常见问题 ​

Q1: 提示词越长越好吗？ ​

A: 不是。

提示词的质量在于精确，不在于长度。

简洁但具体的提示词 > 冗长但模糊的提示词

Q2: AI 还是会编造答案怎么办？ ​

A: 加强约束：

"只使用项目已有的依赖。
如果需要新功能，先告诉我。
不要编造不存在的 API。"

Q3: 为什么不直接让 AI 写代码？ ​

A: 直接写容易返工。

探索 → 规划 → 编写，这个流程能让你：

• 避免重复造轮子
• 发现潜在问题
• 保持代码风格一致

Q4: 工作流会不会太慢？ ​

A: 不会。

看似多了步骤，实际上减少了返工时间。整体效率更高。

对比：

• 直接写：10 分钟，返工 30 分钟
• 按流程：15 分钟，一次通过

Q5: 什么时候该停止对话？ ​

A: 信号：

• 连续 3 轮没有进展
• AI 开始重复相同的建议
• 问题需要更多信息（如查看生产环境日志）

策略：切换模型或换思路

相关内容 ​

• 详见：2.3 MCP、插件与 Skills
• 详见：2.4 项目规则配置
• 前置：2.1 AI 编程的经济学
• 后续：2.5 高效调试心法