Vibe Coding：探索式编码

"Trust the vibe, trust the code." — 让 AI 跟着你的直觉走

什么是 Vibe Coding

Vibe Coding（氛围编码）是一种探索性、低承诺的 AI Coding 模式。你不预先定义完整规范，而是与 AI 即兴对话、边聊边写。

你：我想做个 todo list
AI：好的，先用 React 写个基础版本？
你：行，再加个暗黑模式
AI：嗯，再加个拖拽？
你：算了，太复杂，先做简单的

没有"规范"，没有"方案"，只有对话流。

核心特征

特征	说明
即兴	没有预先规划，跟着感觉走
对话驱动	通过对话推进，而非文档
目标模糊	一开始可能不知道要做什么
短周期	通常一次会话内完成
易调整	随时改变方向
实验性	允许失败、允许试错

适用场景

1. 技术调研

"我想试一下 React 19 的新特性 use Action，你给我写个 demo"
"对比一下 Zustand 和 Jotai，给我两个例子看看"

为什么适合：调研阶段目标不明确，需要快速验证。

2. POC / 原型

"做个登录页原型，要求炫酷一点"
"我们产品想试一下 AI 聊天功能，先 mock 一下"

为什么适合：原型就是用来扔的，过度设计浪费。

3. 学习新框架/库

"教我用 Svelte 写个计数器"
"演示一下 Vue 3 的 Composition API 怎么用"

为什么适合：先看 AI 怎么写，再自己模仿。

4. 灵感验证

"我想做一个'代码截图美化'的小工具，先写个最简版本看看效果"

为什么适合：先验证想法，再决定是否投入。

5. 解决小问题

"这个正则怎么写能匹配邮箱？"
"怎么用一行 JS 数组去重？"

为什么适合：小问题不值得写规范。

6. 创意探索

"给我几个创意：这个 dashboard 还能怎么改进？"
"有什么新颖的 loading 动画设计？"

为什么适合：创意本身就是探索性的。

不适用场景

生产代码

Vibe Coding 写出来的代码很难维护，不适合生产环境。

团队协作

每个人的 vibe 不同，代码风格会失控。

关键业务逻辑

财务、支付、权限等核心模块必须有规范。

大型功能

超过 1-2 天工作量的任务，必须有规划。

长期维护

Vibe 代码缺乏文档，6 个月后没人看得懂。

实战方法

方法 1：对话式探索

# 第一轮：起个头
> 我想做个 markdown 渲染器，先用最简单的方式实现

# AI 输出基础版本，你看完后...

# 第二轮：增加需求
> 现在加个目录功能，支持点击跳转

# 第三轮：调整方向
> 目录太丑了，换成侧边栏折叠的样式

# 第四轮：边界处理
> 如果文章很长，怎么做性能优化？

方法 2：多方案对比

> 用三种不同的方式实现防抖函数，给我对比一下

# AI 输出：

# 1. setTimeout 方式

# 2. lodash.debounce

# 3. 自定义 Hook
> 我喜欢第二种，但想加上取消功能，能改一下吗？

方法 3：参考式生成

> 我看到 [某个网站] 这样的效果，能给我写个类似的吗？

# 把截图、设计稿丢给 AI，让它模仿

方法 4：快速试错

> 写个 LRU 缓存

# AI 输出版本 A
> 不对，我要 O(1) 复杂度的，再来

# AI 输出版本 B
> 还差一点，evict 时机不对，再改

# 几次迭代后得到想要的结果

工具选择

最佳工具

工具	适合度	理由
Cursor（Chat 模式）		即时反馈、上下文丰富
ChatGPT		通用对话、插件生态
Claude.ai		长输出、深度思考
Claude Code		可执行，适合轻度探索
Copilot Chat		IDE 集成，但稍慢

不推荐

• Composer / Agent 模式（自动性太强，不适合 vibe）
• 本地小模型（质量不稳定，破坏 vibe）

使用方式

下面给出 Vibe Coding 具体怎么用——用什么工具、怎么启动、步骤、命令模板。

主推：Cursor Chat 模式（IDE 内即时反馈）

# 启动
1. VSCode 装 Cursor 扩展（或用 Cursor IDE）
2. 打开项目，按 Cmd+L 打开 Chat 面板
3. 或选中代码后按 Cmd+L 针对选中代码提问

# 流程
第 1 轮：起个头
> 我想做个 markdown 渲染器，先用最简单的方式实现

# AI 输出基础版本 → 你看效果

第 2 轮：增加需求
> 现在加个目录功能，支持点击跳转

第 3 轮：调整方向
> 目录太丑了，换成侧边栏折叠

# 注意：每轮保持 30-60 分钟时间盒，到点就停

备选 1：Trae Solo Chat（国产 IDE，中文友好）

# 启动
1. 下载安装 Trae Solo IDE
2. 打开项目，使用内置 Chat 面板

# 流程
> 我想试一下 React 19 的 use Action，给我写个 demo

# AI 输出 → 你调整方向 → 继续对话

# 适合：中文项目、免费入门、数据不出境

备选 2：Claude Code（终端即时对话）

# 启动
$ claude

# 流程
> 用三种不同方式实现防抖函数，给我对比一下
> 我喜欢第二种，加上取消功能

# 适合：有项目上下文、CLI 偏好者

不要用

• ❌ Cursor Composer / Agent 自动模式（自动性太强，破坏 vibe 节奏）
• ❌ 本地小模型如 7B/13B（质量不稳定，破坏 vibe 沉浸感）
• ❌ OpenCode / Aider 等纯 CLI 工具（缺即时视觉反馈，不适合 Vibe 节奏）

Vibe Coding 的最佳实践

1. 接受不完美

 "这个代码能不能写得更优雅一点？"
（陷入无意义的打磨）

 "能用吗？能用就继续"
（聚焦核心，快速推进）

2. 设定时间盒

> 我给自己 30 分钟时间，看看能做出什么。
> 时间到了就停止，评估是否继续。

3. 知道何时停止

Vibe Coding 最大的陷阱是永远停不下来。

停下来的信号：

• 核心功能验证完成
• 30-60 分钟到了
• 开始纠结细节（该切换到 Plan Coding）
• 需要多人协作（该切换到 Spec Coding）

4. 保留 vibe 代码

如果你觉得 vibe 的成果值得保留，手动整理一遍：

# Vibe 完之后
1. 把代码 git commit
2. 补 agents.md
3. 写必要的测试
4. 更新文档

# 然后才能进入生产

5. 不在 vibe 时做决策

 在 vibe 中决定架构
（情绪化、不全面）

 Vibe 验证想法 → 停止 → 冷静评估 → 决策

Vibe Coding 与其他模式的关系

Vibe Coding
   ↓ 验证了想法
Plan Coding
   ↓ 确认了方案
Spec Coding
   ↓ 进入生产

Vibe 是探索，Plan 是收敛，Spec 是固化。

实战案例：30 分钟做出 markdown 渲染器

时间线

00:00 - 开始
00:02 - 让 AI 用 react-markdown 写个基础版
00:08 - 看效果：太丑，加代码高亮
00:15 - 加目录、锚点跳转
00:20 - 调整样式
00:25 - 想到新点子：暗色模式
00:30 - 时间到，停止

收获

• 验证了技术选型（react-markdown + highlight.js）
• 看到了大致效果
• 列出了待优化项

后续

如果觉得有价值，进入 Plan Coding：

• 制定完整功能清单
• 设计组件结构
• 规划测试策略
• 进入正式开发

Vibe Coding 的常见陷阱

陷阱 1：沉溺于探索

本该 30 分钟的任务，做了 3 小时还在试

对策：严格时间盒 + 明确停止条件

陷阱 2：跳过验证

直接用 vibe 代码上生产

对策：vibe 代码必须经过 Plan Coding 才能进生产

陷阱 3：缺乏上下文

每次 vibe 都从零开始，重复造轮子

对策：vibe 前准备好 agents.md 和参考代码

陷阱 4：情绪化决策

vibe 过程中突然想换框架

对策：vibe 期间不做架构决策，记录下来事后评估

团队中的 Vibe Coding

适合的场景

• Hackathon：vibe 是 hackathon 的核心
• 内部培训：用 vibe 教新人
• 产品创意会：现场 demo
• 技术预研：评估新方案

不适合

• 日常功能开发
• 生产代码
• 多人协作项目

总结

Vibe Coding 是最轻松、最快的 AI Coding 模式，但它只适用于探索，不适用于生产。

记住：

Vibe Coding 是开始，不是结束。

下一节：Plan Coding — 把 vibe 成果变成可交付的代码。