最近Vibe Coding的经验总结

大家好，我是 Immerse，一名独立开发者、内容创作者。

关注公众号：#沉浸式趣谈，获取最新文章（更多内容只在公众号更新）
个人网站：https://yaolifeng.com 也同步更新。
转载请在文章开头注明出处和版权信息。

我会在这里分享关于编程、独立开发、AI干货、开源、个人思考等内容。

如果本文对您有所帮助，欢迎动动小手指一键三连(点赞、评论、转发)，给我一些支持和鼓励，谢谢！

最近一直在尝试 Vibe Coding，写了三个小项目，总结了一些个人经验，希望能对大家有所帮助。

什么是 Vibe Coding？

Vibe Coding，可以直接翻译为“氛围编程”，不是简单的让 AI 按照你的命令去写代码，而是结合你的规划、直觉和迭代的一种新型开发方式。而你只需要给出方向、决策和反馈。

1. 先定好自己的开发计划，需求(requirements)

1. 项目背景

   这是一个 xxxx 项目，我主要用于 xxx 场景，需要实现 xxx 功能。

2. 需求描述

   功能 1：

   生成表单：根据用户输入的内容，动态生成表单

   用户可再次修改：支持用户对生成的表单进行再次编辑和修改

   ....

   功能 2：

   可视化流程图：根据表单内容生成一个可视化的流程图

   ....

3. 技术栈

   前端：Vue3 + TypeScript

   后端：Node.js + Express

....

你可以将其整理成 Markdown 文件，放在项目文件夹里。包含每个功能点、实现顺序、预期效果。

这一步是为了让 LLM 会更容易理解你当下项目的需求。使其不偏离主体

比如：

1. 项目背景

   这是一个 xxxx 项目，我主要用于 xxx 场景，需要实现 xxx 功能。

2. 需求描述

   功能 1：

   生成表单：根据用户输入的内容，动态生成表单

   用户可再次修改：支持用户对生成的表单进行再次编辑和修改

   ....

   功能 2：

   可视化流程图：根据表单内容生成一个可视化的流程图

   ....

3. 技术栈

   前端：Vue3 + TypeScript

   后端：Node.js + Express

....

2. Cursor 的 mdc 规则一定要写

要不然就算是 Claude 4 也会抽筋,更不用说其他模型了

分享两个自己参考的 mdc 网站：

参考项目: https://github.com/elie222/inbox-zero/tree/main/.cursor/rules

生成器： https://bytenote-mdc.streamlit.app/#universal-cursor-rules-generator

3. 小步走战略，每次只实现一个小功能

不要想着让 AI 直接给你生成一个线程的应用，简单的可能没有问题，但稍微复杂的还是需要逐步来。

比如，我的做法（仅供参考）：

结合 x1.vue, x2.vue, 给我逐步实现 xxx 需求：

步骤如下：

1. 先修改 xxx 区域的背景色

2. 自定检测 xxx 输入框高度变化，增加 tips 提示

   ....

4. roll back 策略

每次实现一个小功能后，确保功能正常、测试通过，再进行下一个功能的开发。

如果当前的小功能 AI 改错了，可以通过 git 直接回滚到上一个稳定版本。千万注意，不要反复在有问题的代码上修补，要不然问题只会越来越多。

5. 若使用了框架开发，强烈推荐 Context 7 MCP Server

这个 MCP Server 可以让 AI 在思考和生成代码时，能够获取官方网站文档和示例代码，从而生成更加准确的代码。

6. 重构优化后，记得跑测试

重构代码后，记得运行测试用例，确保测试能够通过，再重构下一个功能，要不然就算你重构完了，一上线一大堆问题等着你。

7. 关于框架疑惑点，只要有 github 仓库的，直接问 Deepwiki

这个工具我个人觉得比问任何 AI 都准确，因为这是直接从源码仓库中提取的文档和代码示例。

Deepwiki 官网

如何使用?

比如：我之前写的这个工具仓库路径是：https://github.com/yaolifeng0629/del-repos，你只需要将 github 修改为 deepwiki 即可：也就是：https://deepwiki.com/yaolifeng0629/del-repos

其他好文推荐

2025 最新！独立开发者穷鬼套餐

这个 361k Star 的项目，一定要收藏！

搞定 XLSX 预览？别瞎找了，这几个库（尤其最后一个）真香！

实战分享】10 大支付平台全方面分析，独立开发必备！

关于 MCP，这几个网站你一定要知道！

做 Docx 预览，一定要做这个神库！！

【完整汇总】近 5 年 JavaScript 新特性完整总览

关于 Node，一定要学这个 10+万 Star 项目！