一、什么是 Vibe Coding？

最近 AI 编程突然火了，一个词频繁出现：

Vibe Coding（氛围编程）

简单理解就是：

开发者通过自然语言描述需求，AI 自动生成代码并不断迭代优化。

例如你可以直接对 AI 说：

帮我写一个番茄钟网页应用，包含倒计时、任务列表和数据统计。

AI 就可以自动生成代码，而开发者只需要：

• 提出需求

• 查看结果

• 继续修改

整个开发流程变成一种 “对话式编程”。

这种方式正在改变软件开发方式。

像 Codex、Cursor 这样的 AI 编程工具，本质上已经不仅仅是代码补全工具，而更接近一种：

AI 编程代理（AI Coding Agent）

它可以：

• 理解开发需求

• 自动生成代码

• 修改现有代码

• 修复 Bug

• 优化项目结构

也就是说：

开发者逐渐从“写代码的人”，变成“描述需求和进行决策的人”。

于是我决定做一次测试：

用 Codex 和 Cursor 分别进行一次 Vibe Coding 开发，看看实际体验如何。

---

二、本次测试项目

为了测试 AI 编程能力，我选择开发一个：

AI 番茄钟 + Todo + 数据统计网页应用

目标功能：

1️⃣ 番茄钟计时
2️⃣ Todo 任务管理
3️⃣ 完成任务统计
4️⃣ 本地数据存储
5️⃣ 简洁 UI 页面

项目难度：

⭐⭐⭐（适合 AI 编程测试）

选择这个项目的原因：

• 同时包含 前端交互逻辑

• 包含 状态管理

• 包含 本地数据存储

• 包含 UI 页面结构

这种类型的项目既不会过于简单，又不会太复杂。

非常适合测试 Vibe Coding 的实际效果。

---

三、测试环境

本次测试使用的工具：

工具	类型
Codex	AI 编程 Agent
Cursor	AI IDE（AI 集成开发环境）

技术栈：

• React

• TypeScript

• Vite

• Chart.js

• localStorage

开发方式：

纯 Vibe Coding

测试流程：

第一轮：生成基础项目
第二轮：修复 Bug + 完善功能
第三轮：UI 优化 + 数据统计

---

四、第一轮：让 AI 生成基础项目

第一步：初始化项目环境

为了测试 AI 编程能力，我首先创建了一个前端项目环境。

项目技术栈：

• React

• TypeScript

• Vite

创建方式：

npm create vite@latest

项目创建完成后，VSCode 中的项目结构如下：

可以看到，Vite 已经生成了一个标准的 React 项目结构。

---

第二步：运行开发服务器

接下来运行项目：

npm install
npm run dev

Vite 启动后，会生成一个本地开发地址：

http://localhost:5175

浏览器打开后，可以看到默认的 React 页面。

这一步说明：

开发环境已经成功搭建，可以开始进行 AI 编程测试。

---

五、第一轮开发：生成番茄钟

我给 AI 的提示词：

帮我写一个番茄钟网页应用，要求：

1 使用 React + TypeScript
2 包含番茄钟倒计时功能
3 包含 Todo 任务列表
4 完成任务后记录统计
5 页面简洁美观
6 所有数据使用 localStorage 保存

在这一轮测试中：

• Codex 生成了一套完整页面逻辑

• Cursor 通过 AI 编辑器协助生成组件代码

AI 主要修改文件：

界面效果如下：

                                         Codex

                                           Cursor

---

第一轮测试结果

功能	是否实现
番茄钟倒计时	✔
Start按钮	✔
Pause按钮	✔
Reset按钮	✔
基础 UI 页面	✔

整体来看：

AI 可以 一次生成完整功能页面。

但仍然存在一些可以优化的地方：

• UI 设计比较基础

• 代码结构仍然可以优化

• 缺少任务管理功能

因此进入第二轮优化。

---

六、第二轮开发：加入 Todo 功能

在第一轮完成基础番茄钟后，我继续让 AI 扩展功能，加入 Todo 任务列表。

提示词：

在当前番茄钟页面中增加 Todo 任务列表功能。

要求：

1 可以添加任务
2 可以标记任务完成
3 可以删除任务
4 使用 localStorage 保存
5 UI 与当前番茄钟页面风格一致

AI 修改后：

主要更新文件包括：

src/App.tsx
src/components/TodoList.tsx

实现结果：

                                          Codex 

                                           Cursor

现在用户可以：

• 添加任务

• 完成任务

• 删除任务

• 本地保存任务数据

应用功能开始逐渐完整。

---

七、第三轮开发：数据统计 + UI 优化

接下来我希望再增加一个功能：

番茄钟统计图表

提示词：

继续优化当前项目：

1 增加番茄钟完成统计
2 显示今天完成的番茄钟数量
3 使用 Chart.js 做一个统计图
4 页面 UI 使用卡片布局优化
5 保持 React + TypeScript
6 所有数据使用 localStorage 保存

AI 在这一轮中使用：

Chart.js

生成了简单的数据统计图表。

                                       Codex

                                        Cursor

---

最终功能

✔ 番茄钟
✔ Todo 任务管理
✔ 数据统计
✔ 本地存储

一个完整的小应用就这样完成了。

而整个开发过程：

几乎没有手写代码。

---

八、Codex vs Cursor 使用体验

在这次测试中，我分别使用了 Codex 和 Cursor 来完成相同项目。

从最终结果来看，两者都能够：

• 理解开发需求

• 生成可运行代码

• 通过多轮提示进行功能扩展

整体体验都比较流畅。

但两者在使用方式上仍然存在一些区别：

Codex

更像一个 AI 编程代理（Coding Agent）

特点：

• 一次性生成较多代码

• 更适合从零开始创建项目

• 适合快速搭建原型

Cursor

更像一个 AI IDE

特点：

• 更适合在编辑器中逐步修改代码

• 可以对已有代码进行精细修改

• 与开发环境结合更紧密

---

九、这次测试的真实感受

坦白说，在测试之前我原本以为：

Codex 和 Cursor 会表现出比较明显的差距。

但实际完成这个项目之后，我发现：

在这种中小型、结构比较标准的前端项目中，两者的最终效果其实差异不大。

原因也比较简单：

1️⃣ 番茄钟项目本身结构比较成熟
2️⃣ 功能逻辑比较清晰
3️⃣ AI 对这类项目训练数据非常充足

因此两种工具都可以比较顺利地完成任务。

这也说明一个问题：

当项目复杂度不高时，AI 编程工具之间的差异可能不会特别明显。

---

十、Vibe Coding 会改变编程吗？

目前来看，AI 编程的发展路径已经非常清晰：

代码补全
↓
代码生成
↓
AI 编程代理

像 Codex 这样的工具，本质上已经是 AI Coding Agent。

它不仅可以写代码，还可以：

• 理解需求

• 进行代码修改

• 辅助调试

• 进行结构优化

未来的软件开发模式，很可能会变成：

人类：提出需求与设计方案
AI：实现代码
人类：做技术决策

---

十一、下一步计划

这次测试只是一次 比较基础的 Vibe Coding 实验。

由于项目规模不大，因此 Codex 和 Cursor 的差异没有特别明显地体现出来。

下一步我准备尝试：

• 更复杂的 Web 应用

• 更复杂的 UI 交互

• 更复杂的数据逻辑

例如：

• 数据可视化应用

• 小型游戏

• 多页面 Web App

通过更复杂的项目，再继续测试 AI 编程工具之间的真实差距。

---

总结

这次 Vibe Coding 实验让我最大的感受是：

AI 编程已经开始改变软件开发方式。

开发者的角色正在逐渐转变为：

需求设计者 + 技术决策者

未来的程序员，可能更像是：

AI 产品经理。