# Vibe Coding

> Vibe Coding 实战指南：用自然语言驱动从想法到可运行代码的快速原型，同时通过护栏、检查点和重构固化避免AI slop与安全隐患。当用户说'vibe coding'、'氛围编程'、'自然语言写代码'、'AI驱动开发'、'快速原型'、'vibe一下'、'把想法变成代码'时触发。核心特点：意图优先、快速验证、分层审查、与现有质量门控联动。

- Skill: `gaoqiongxie/vibe-coding` (Agent Skill)
- Install (CLI): `npx skillmds@latest add gaoqiongxie/vibe-coding`
- Raw SKILL.md: https://api.skillmd.com/api/skills/gaoqiongxie/vibe-coding/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: gaoqiongxie (https://skillmd.com/u/gaoqiongxie)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/gaoqiongxie/vibe-coding

---


> **来源**: Andrej Karpathy 2026 年 viral 演讲 + 社区最佳实践 + Anthropic 官方安全建议
>
> **发布时间**: 2026-08
>
> **理念**: "让 AI 帮你把想法吹成气球，但你自己决定它该飞向哪里。"

# 🌊 Vibe Coding — 自然语言驱动开发实战

把模糊的想法通过自然语言快速转化为可运行代码，再用结构化审查和重构把它从「一次性原型」变成「可维护的实现」。

---

## 什么时候用 Vibe Coding

| 场景 | 适合吗 | 说明 |
|------|--------|------|
| 快速验证一个产品想法 | ✅ 非常适合 | 30 分钟出可点击原型 |
| 探索新技术/新库 | ✅ 适合 | 降低试错成本 |
| 内部工具/脚本 | ✅ 适合 | 快速解决自己的痛点 |
| 核心支付/安全模块 | ❌ 不适合 | 需要严格设计、审计和测试 |
| 大型架构重构 | ⚠️ 部分适合 | 先 vibe 出草案，再逐步工程化 |

**一句话**：Vibe Coding 是「第一版代码生成器」，不是「最后一版代码替代品」。

---

## 核心工作流：Vibe → Verify → Vulcanize

```
意图描述 (Vibe)
    │
    ▼
快速原型 (Generate)
    │
    ▼
护栏检查 (Guardrail)
    │
    ▼
结构化审查 (Review)
    │
    ▼
重构固化 (Vulcanize)
    │
    ▼
交付 / 沉淀记忆
```

### Step 1：意图描述（Vibe）

用一句话说清楚你要什么，而不是怎么实现：

```
❌ 差例子："用 React useState 写一个计数器组件"
✅ 好例子："做一个番茄钟，25 分钟倒计时，能暂停和重置，显示当前状态"
```

**意图描述模板**：
```
我要做一个 [产品/工具]，让 [目标用户] 能够 [核心动作]。
关键约束：
- 必须支持 [功能 A]
- 最好支持 [功能 B]
- 绝对不能 [风险点 X]
```

---

### Step 2：快速原型（Generate）

让 AI 根据意图生成第一版代码。此阶段**不纠结完美**，目标是：
- 跑起来
- 核心流程通
- 验证可行性

**建议一次只生成一个垂直切片**：
- 先做「倒计时 + 开始/暂停」
- 再做「任务记录」
- 最后做「数据统计」

---

### Step 3：护栏检查（Guardrail）

每次生成后强制过一遍检查清单：

| 检查项 | 问题 |
|--------|------|
| **安全** | 有没有硬编码密钥、SQL 注入、XSS、越权漏洞？ |
| **正确性** | 边界条件处理了吗？空状态、错误状态呢？ |
| **可维护性** | 变量命名清楚吗？有没有魔法数字？ |
| **依赖** | 引入了不必要的包吗？版本锁定了吗？ |
| **测试** | 至少有一个 happy path 能手动跑通吗？ |

**触发词**："先检查一下这版代码的安全和边界问题"。

---

### Step 4：结构化审查（Review）

激活 `quality-gate` 或 `frontend-code-review` / `backend-change-flow`，对 vibe 出的代码做正式审查：

```
输入："对刚才生成的代码跑一遍质量门控"
```

重点关注：
1. 类型安全
2. 错误处理
3. 性能热点
4. 可访问性（前端）
5. 边界条件

---

### Step 5：重构固化（Vulcanize）

把原型代码改造为生产可接受的代码：

| 原型代码 | 重构后 |
|----------|--------|
| 所有逻辑写在一个文件 | 按职责拆分模块 |
| 硬编码配置 | 提取为常量/环境变量 |
| 内联样式 | 组件化 + 设计 tokens |
| 无错误处理 | 统一错误边界/Result 类型 |
| 无测试 | 补核心单元测试 |

**重构原则**：
- 一次只改一个维度
- 每次重构后运行测试
- 保留 vibe 阶段的语义，优化的是结构

---

## Vibe Coding 安全守则

| ✅ 要做 | ❌ 不要做 |
|---------|----------|
| 在独立分支或 worktree 中 vibe | 直接在 main 分支生成核心模块 |
| 生成后立即运行 `security-audit` | 把生成的代码直接部署到生产 |
| 对写操作要求人工确认 | 让 AI 自动执行删除/转账/发邮件 |
| 把关键配置放在环境变量 | 把密钥写进 AI 生成的代码 |
| 小步快跑，频繁验证 | 一次性让 AI 写 1000 行再检查 |

---

## 使用示例

### 示例 1：30 分钟做一个番茄钟 Web 应用

```
用户：帮我 vibe 一个番茄钟网页应用

AI:
1. 意图确认：25 分钟倒计时 + 开始/暂停/重置 + 状态显示
2. 生成单文件 HTML + CSS + JS 原型
3. 护栏检查：无外部依赖、无敏感信息、边界条件 OK
4. 审查：激活 frontend-code-review 检查可访问性和语义化
5. 重构：拆分为 Timer / Controls / Status 三个组件
6. 交付：输出可部署的 index.html
```

---

### 示例 2：把 vibe 出的代码工程化

```
用户：刚才生成的这个 Python 脚本，帮我改得像人写的

AI（调用 stop-slop + opinionated-engineer）:
1. 去除 AI 填充语和过度注释
2. 添加类型注解
3. 把全局变量改为函数参数
4. 添加错误处理和日志
5. 写出 pytest 单元测试
```

---

### 示例 3：Vibe + MCP 联动

```
用户：我想做一个能查询我项目 Issue 的 AI 助手

AI:
1. Vibe 阶段：快速生成一个 CLI 原型
2. 接入 mcp-builder：把 GitHub Issues API 封装为 MCP Tool
3. 测试：在 Claude Code 中通过自然语言查询 Issue
4. 固化：补充错误处理、分页、缓存
```

---

## 快速入口

```
"vibe 一个 xxx"              → 从想法到可运行原型
"帮我把这个想法变成代码"      → 意图澄清 + 快速生成
"检查一下刚才生成的代码"      → 护栏检查
"这版代码太 AI 了"           → 调用 stop-slop 去 AI 味
"把原型改得像工程代码"        → 重构固化 + opinionated-engineer
"vibe 完怎么保证质量"         → Vibe → Verify → Vulcanize 全流程
```

---

## 与其他 Skill 的关系

| Skill | 关系 | 协作场景 |
|-------|------|---------|
| **stop-slop** | 重构伙伴 | 去除 vibe 生成代码中的 AI 味和套话 |
| **opinionated-engineer** | 工程化伙伴 | 强制类型安全、错误处理、生产级标准 |
| **quality-gate** | 质量保障 | 对 vibe 出的代码跑提交前五维检查 |
| **frontend-code-review** | 前端审查 | vibe 出的前端代码做结构化 review |
| **backend-change-flow** | 后端审查 | vibe 出的后端代码按变更流程对齐 |
| **security-audit** | 安全审查 | 识别生成代码中的常见漏洞 |
| **mcp-builder** | 能力扩展 | 把 vibe 出的原型封装成 MCP Tool 供 AI 调用 |
| **solo-parallel-dev** | 工作模式 | 在独立 worktree 中 vibe，避免污染主分支 |

**最佳实践链**：
```
brainstorming（头脑风暴需求）
  → vibe-coding（快速原型）
  → security-audit（安全检查）
  → quality-gate（质量门控）
  → stop-slop + opinionated-engineer（重构固化）
  → testing-patterns（补测试）
  → create-pr（生成 PR）
```

---

## 一句话原则

> Vibe Coding 的终点不是「代码生成」，而是「快速验证想法」。真正值钱的不是第一版代码，而是你在验证过程中搞清楚的需求和约束。