Vibe Coding 2026：当「描述想法」取代「写代码」

我用 3 个小时搭了这个博客

这不是标题党——你正在看的这个博客，从零到上线大概花了 3 个小时。

过程大致是这样的：我打开终端，用 Claude Code 说了一句”帮我用 Astro 5 + Tailwind CSS 4 搭建一个 AI 技术博客，要有暗色主题、文章分类、SEO 优化”。然后我做了大概三件事：

1. 审查它生成的项目结构，调整了几个文件夹命名
2. 在 Cursor 里用 Composer 模式一次性改了 5 个组件的样式
3. 部署到 Cloudflare Pages

中间我手写的代码？大概不超过 50 行。主要是微调 CSS 变量和改了一些我不喜欢的默认行为。

这就是 Vibe Coding——一种 2026 年正在重新定义软件开发的编程范式。

什么是 Vibe Coding？

“Vibe Coding”这个词最早由 Andrej Karpathy 在 2025 年初提出。他的原话是：“你不是在写代码，你只是在描述 vibe（氛围），AI 来实现。”

到 2026 年，这个概念从推特梗变成了真正的生产力范式。核心理念非常简单：

传统编程：开发者想清楚逻辑 → 手写代码 → 调试 → 部署 Vibe Coding：开发者描述意图 → AI 生成代码 → 开发者审查 → 部署

看起来只是”谁来写代码”的区别，但实际上它改变的是整个开发工作流和所需技能。

传统编码 vs Vibe Coding 对比

三个层级：从辅助到自主

Vibe Coding 不是一个单一的工作模式，它是一个从低到高的能力光谱。我把它分成三个明确的层级：

Level 1: Tab 补全（行级辅助）

这是最基础的层级——AI 在你光标位置预测接下来的代码，你按 Tab 接受。

典型场景：写完函数签名后，AI 自动补全函数体。写完 import 语句后，AI 补全后续的使用代码。

效率提升：约 20-40%。主要省去了”打字”的时间，但思考过程还是你的。

代表工具：GitHub Copilot（最早普及这个模式）、Cursor Tab、Supermaven。

// 你写到这里：
function validateEmail(email: string)

// AI 自动补全：
function validateEmail(email: string): boolean {
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return emailRegex.test(email);
}

Level 1 的问题是：它只能看到当前文件的上下文。如果你的验证逻辑需要考虑其他模块的约束，它不知道。

Level 2: Composer 多文件（功能级编辑）

这是 2025-2026 年最主流的 Vibe Coding 层级。你在一个面板里用自然语言描述需求，AI 同时修改多个文件来实现。

典型场景：“给用户列表页面添加搜索功能，包括前端搜索框组件、后端 API 路由、数据库查询修改。” AI 会同时创建/修改 3-5 个文件。

效率提升：约 3-8x（对于标准 CRUD 类功能）。

代表工具：Cursor Composer（目前最强）、Windsurf Cascade、GitHub Copilot Workspace。

我来展示一个真实的 Composer 对话。假设你正在开发一个任务管理 App：

> 你（在 Cursor Composer 中输入）:
"给 Task 模型添加 priority 字段（enum: low/medium/high/urgent），
更新创建和编辑表单，任务列表支持按 priority 筛选和排序，
用不同颜色标识不同优先级。"

> Cursor Composer 的输出（同时修改的文件）:
1. prisma/schema.prisma — 添加 Priority enum 和字段
2. src/server/routers/task.ts — 更新 CRUD API，添加筛选参数
3. src/components/TaskForm.tsx — 添加优先级下拉选择器
4. src/components/TaskList.tsx — 添加筛选 UI + 颜色标签
5. src/styles/priority.css — 四种优先级的颜色定义

一个 prompt，五个文件，一个完整的功能。这在传统编码中可能需要 1-2 小时，Composer 模式下大概 5 分钟（包括审查时间）。

Level 3: Agentic 全自主（项目级自动化）

这是 2026 年的前沿——AI 不仅写代码，还能自主运行命令、读取错误日志、修复 bug、跑测试，形成一个自动化循环。

典型场景：“把这个 Express 后端从 JavaScript 迁移到 TypeScript，确保所有测试通过。” AI 会自动：分析代码库 → 逐文件迁移 → 运行 tsc → 读取错误 → 修复类型问题 → 再次运行 → 直到全部通过。

效率提升：对合适的任务可以达到 10-50x，但成功率波动大。

代表工具：Claude Code（终端 Agentic 最强）、OpenAI Codex（GUI 版 Agentic）、Cursor Agent Mode。

# Claude Code 的 Agentic 模式示例
$ claude

> 把 src/utils/ 下所有 .js 文件迁移到 TypeScript，
> 添加完整的类型注解，确保 tsc 编译通过。

# Claude Code 自动执行：
# 1. 列出所有 .js 文件
# 2. 逐个分析函数签名，推断类型
# 3. 重命名 .js → .ts，添加类型注解
# 4. 运行 tsc，读取错误
# 5. 修复类型错误
# 6. 重复直到 0 errors
# 整个过程无需人工干预

Level 3 的问题是：你很难验证它做的所有事情是否正确。当 AI 一次性改了 30 个文件并且运行了 15 条命令，人工 review 的成本急剧上升。

工具矩阵：四大玩家各自的强项

2026 年的 Vibe Coding 工具格局已经相当清晰。我用了三个月深度测试了四个主要工具，以下是一手体验：

Cursor：多文件编辑之王

Cursor 的 Composer 模式是我目前用过最顺手的多文件编辑体验。它的核心优势是：

• Codebase Indexing：首次打开项目时会索引整个代码库，之后的 Composer 请求能精确定位需要改哪些文件
• Diff Preview：每个文件的修改都以 diff 形式展示，你可以逐文件 Accept/Reject
• 自然的 IDE 集成：它本身就是 VS Code，你不需要切换工具

Claude Code：终端自动化之王

Claude Code 的杀手锏是它能直接操作终端——读文件、写文件、运行命令、读取输出，形成一个完整的反馈循环。

我最常用它做的事情：

• 项目初始化：“用 Astro 5 + TypeScript + Tailwind 搭一个博客项目” → 它会 npm create astro@latest，然后自动配置所有依赖
• Debug：“测试跑不过，帮我看看” → 它会运行测试、读错误日志、定位问题、修改代码、重新运行
• 重构：“把所有 React class component 迁移到 hooks” → 自动遍历、迁移、验证

Codex：非技术用户的入口

OpenAI 的 Codex 定位不太一样——它更偏向”一个会编程的 ChatGPT”。你可以在 GUI 中描述想要的功能，它会在沙箱环境里生成代码、运行并展示结果。

它最适合的用户是产品经理、设计师或者刚入行的开发者——不需要理解终端或 IDE，用对话就能把想法变成可运行的代码。

GitHub Copilot：稳定但不惊艳

Copilot 是最早的 AI 编码工具，也是用户基数最大的。它的 Tab 补全体验依然流畅，但在 Composer 和 Agentic 层级明显落后于 Cursor 和 Claude Code。不过，$10/月的价格和 VS Code 原生集成让它成为最低成本的入门选择。

传统写法 vs Vibe Coding：同一个功能的对比

让我用一个具体例子来展示差异。假设我们要实现一个”用户注册 + 邮箱验证”功能。

传统方式（你写每一行）

// 1. 定义类型
interface RegisterInput {
  email: string;
  password: string;
  name: string;
}

// 2. 密码哈希
import bcrypt from "bcrypt";
const SALT_ROUNDS = 12;
async function hashPassword(password: string): Promise<string> {
  return bcrypt.hash(password, SALT_ROUNDS);
}

// 3. 生成验证 token
import crypto from "crypto";
function generateVerificationToken(): string {
  return crypto.randomBytes(32).toString("hex");
}

// 4. 注册逻辑
async function registerUser(input: RegisterInput) {
  // 检查邮箱是否已存在
  const existing = await db.user.findUnique({ where: { email: input.email } });
  if (existing) throw new Error("Email already registered");

  // 创建用户
  const hashedPassword = await hashPassword(input.password);
  const token = generateVerificationToken();
  const user = await db.user.create({
    data: {
      email: input.email,
      password: hashedPassword,
      name: input.name,
      verificationToken: token,
      verified: false,
    },
  });

  // 发送验证邮件
  await sendVerificationEmail(user.email, token);
  return { userId: user.id, message: "Verification email sent" };
}

写完这些大约需要 20-30 分钟（包括查 bcrypt 和 crypto 的 API 文档）。

Vibe Coding 方式（你描述意图）

> Cursor Composer prompt:
"实现用户注册功能：
1. 接收 email/password/name
2. 用 bcrypt 哈希密码（12 轮）
3. 生成随机验证 token
4. 存入数据库（Prisma）
5. 发送验证邮件
6. 处理邮箱已存在的情况
用 TypeScript，遵循项目现有的错误处理模式。"

Composer 在 15 秒内生成了基本相同的代码——而且它还额外加了输入验证、rate limiting 提示和完整的 JSDoc 注释，因为它从项目其他文件中学到了这些模式。

我审查代码花了 3 分钟。总时间：不到 4 分钟 vs 传统方式的 20-30 分钟。

当然，这个例子偏简单。如果是一个需要创新性算法的任务，Vibe Coding 的优势会小很多。

风险与边界：什么不能 Vibe

Vibe Coding 很爽，但它不是万能的。以下是我踩过的坑和总结的边界：

不能 Vibe 的任务

1. 安全关键代码：认证流程、支付处理、加密实现——这些必须人工编写和审查。AI 生成的代码可能看起来正确但包含微妙的安全漏洞（比如 timing attack、不安全的随机数生成）。

2. 性能关键代码：当你需要把延迟从 50ms 优化到 5ms 时，AI 给你的通常是”教科书式”的优化建议。真正的性能突破需要对硬件、缓存、内存布局的深度理解——这是 AI 目前做不好的。

3. 复杂并发逻辑：分布式锁、事务隔离、race condition 处理——AI 经常生成”看起来对但实际有 bug”的并发代码。这类 bug 极难通过测试发现，必须人工推理。

隐蔽的风险

代码理解的”空心化”。 如果你长期用 Vibe Coding 而不审查 AI 生成的代码，你会逐渐失去对项目的理解。当出了一个需要深入调试的 bug 时，你可能完全不知道代码为什么这样写。

安全扫描不能省。 AI 生成的代码和人写的代码一样需要安全扫描。用 Snyk、SonarQube 或 CodeQL 对 AI 生成的代码做静态分析应该成为标准流程。

上下文溢出的幻觉。 当你的 Composer 对话越来越长，AI 的上下文窗口会被填满。这时它可能”忘记”之前的约束，生成和项目风格不一致的代码。建议每隔几个 prompt 就开一个新对话。

我的 Vibe Coding 工作流

分享一下我目前的日常开发流程，供参考：

1. 架构设计（不 vibe）。 新项目或新模块，我一定会手动画架构图、定义接口、写清楚数据流。这一步不能交给 AI——它不知道你的业务约束和技术偏好。

2. 脚手架搭建（Claude Code Agentic）。 项目结构、配置文件、基础组件——用 Claude Code 一句话搞定。

3. 功能开发（Cursor Composer）。 一个功能一个 Composer 会话。描述清楚输入/输出/边界条件，让 AI 生成，然后逐文件 review。

4. 调试修复（混合模式）。 简单 bug 让 AI 修；复杂 bug 自己上断点。关键是判断”这个 bug 需要我理解多少上下文”——如果答案是”很多”，就自己调。

5. 代码审查（不 vibe）。 所有 AI 生成的代码都过一遍人工 review。重点看安全性、边界条件、和项目规范的一致性。

6. 测试（Agentic）。 测试用例让 AI 生成初版，然后我补充边界 case。运行测试这一步交给 Agentic 模式自动跑。

// 我的原则，写成代码
const shouldVibe = (task: Task): boolean => {
  if (task.security === "critical") return false;
  if (task.type === "architecture") return false;
  if (task.complexity === "algorithm-heavy") return false;
  if (task.type === "crud" || task.type === "ui") return true;
  if (task.type === "refactor" && task.scope === "mechanical") return true;
  return task.estimatedTime > 30; // 超过 30 分钟的任务值得 vibe
};

Vibe Coding 不是全有或全无。最高效的开发者是那些能精确判断”这个任务该不该 vibe”的人——然后在 Vibe 和手写之间无缝切换。

2026 年的编程，不是人 vs AI，而是人 + AI 的协作效率竞赛。学会正确使用 Vibe Coding，你的生产力可以轻松提升 3-5 倍；用错了，你会花更多时间在 debug AI 的幻觉上。

工具很好。但最终的责任人，还是你。