最近Vibe Coding的经验总结

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

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

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

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


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

什么是 Vibe Coding?

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

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

md 复制代码
1. 项目背景
   这是一个 xxxx 项目,我主要用于 xxx 场景,需要实现 xxx 功能。

2. 需求描述
   功能 1:
   生成表单:根据用户输入的内容,动态生成表单
   用户可再次修改:支持用户对生成的表单进行再次编辑和修改
   ....
   功能 2:
   可视化流程图:根据表单内容生成一个可视化的流程图
   ....
3. 技术栈
   前端:Vue3 + TypeScript
   后端:Node.js + Express

....

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

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

比如:

md 复制代码
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 直接给你生成一个线程的应用,简单的可能没有问题,但稍微复杂的还是需要逐步来。

比如,我的做法(仅供参考):

md 复制代码
结合 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 项目!

相关推荐
waterHBO2 个月前
一个小小的 flask app, 几个小工具,拼凑一下
javascript·vscode·python·flask·web app·agent mode·vibe coding
飞起的猪3 个月前
【虚幻引擎】UE5独立游戏开发全流程(商业级架构)
ue5·游戏引擎·游戏开发·虚幻·独立开发·游戏设计·引擎架构
远洋录3 个月前
Ethan独立开发产品日报 | 2025-04-29
人工智能·程序员·副业·独立开发·赚钱
远洋录3 个月前
Ethan独立开发产品日报 | 2025-04-24
人工智能·程序员·副业·独立开发·赚钱
远洋录3 个月前
Ethan独立开发产品日报 | 2025-04-20
人工智能·程序员·独立开发
控心つcrazy6 个月前
找到你的小众市场,打造你的专属产品几个步骤
产品·独立开发
ThiefCat1 年前
北漂日志第1话:惨淡销量、后续发展
ios·独立开发
_长银2 年前
独立开发者知识贴
github·个人开发·独立开发