什么是 Vibe Coding

Vibe coding 是一种新兴的软件开发实践，开发者通过自然语言提示词让 AI 编写代码，而不是完全由自己编写代码。这种实践方式由前 OpenAI 联合创始人、前特斯拉人工智能主管 Andrej Karpathy 提出。

Vibe coding 的核心在于人机协作的迭代循环：开发者将需求以提示词的形式发送给 AI，AI 生成代码后，开发者进行测试验证，根据测试结果优化提示词，如此循环往复，直到功能满足需求。

工具选择

本文使用 Cursor 作为 Vibe coding 的工具。Cursor 是一款专为 AI 辅助编程设计的编辑器，能够很好地支持自然语言到代码的转换。接下来，我将通过一个实际案例来演示 Vibe coding 的完整流程。

发现问题，明确需求

我的博客中插入了一些图片，由于博客详情页面的展示区域较窄，我设置了图片的宽高限制。但在展示流程图等复杂图片时，遇到了问题：图片被压缩得比较小，无法看清细节。

基于这个痛点，我决定为博客详情页添加图片点击放大功能。接下来通过 Cursor 来实现这个功能。

迭代优化提示词

第一轮：基础功能

首先，我发送了一个简单的提示词：

博客详情页中插入的图片需要支持鼠标点击放大。

Cursor 生成了代码后，我选择接受更改并开始测试。第一次测试未通过，图片点击后无法放大。这说明提示词需要更详细一些。

第二轮：细化需求

我改进了提示词，增加了更多细节：

例如一篇博客有 5 个图片，我只想点击每个图片，放大。

这次测试通过了，点击图片后放大功能正常工作。但在测试过程中发现，放大后的图片可能会超出浏览器可视范围，影响用户体验。

第三轮：完善体验

继续优化提示词，增加尺寸限制：

限制一下放大后的宽高，不要超过浏览器可视范围

经过这次优化，图片放大功能已经能够正常工作，并且不会超出可视范围。

自动化测试

除了人工测试外，还可以通过 Chrome MCP（Model Context Protocol）进行自动化测试。将 Chrome MCP 添加到 Cursor 的 Tool & MCP 配置中后，可以输入以下提示词：

本地连接：http://localhost:8080/index.html。使用 chrome mcp 测试刚刚增加的图片放大功能。

Cursor 会打开一个新的 Chrome 窗口，自动执行测试操作，并最终给出测试结果。这种方式可以更高效地验证功能的正确性。

部署新特性

功能开发完成后，将新添加的文件提交到 GitHub，等待 GitHub Actions 自动部署即可。

总结

通过这个简单的案例，我们可以看到 Vibe coding 的核心流程：

1. 明确问题：识别实际需求和使用场景
2. 编写提示词：用自然语言描述功能需求
3. 测试验证：对 AI 生成的代码进行测试
4. 迭代优化：根据测试结果不断改进提示词
5. 自动化测试：利用工具进行更全面的验证

Vibe coding 并不是完全依赖 AI，而是通过人机协作的方式，让开发者专注于需求分析和问题解决，而将具体的代码实现交给 AI。这种方式特别适合快速原型开发、功能迭代和解决常见问题。随着 AI 能力的不断提升，Vibe coding 将成为软件开发中越来越重要的实践方式。