最近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 网站:

参考项目: github.com/elie222/inb... 生成器: bytenote-mdc.streamlit.app/#universal-...

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 官网

如何使用?

比如:我之前写的这个工具仓库路径是:github.com/yaolifeng06... github 修改为 deepwiki 即可:也就是:deepwiki.com/yaolifeng06...

其他好文推荐

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

这个 361k Star 的项目,一定要收藏!

搞定 XLSX 预览?别瞎找了,这几个库(尤其最后一个)真香!

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

关于 MCP,这几个网站你一定要知道!

做 Docx 预览,一定要做这个神库!!

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

关于 Node,一定要学这个 10+万 Star 项目!

相关推荐
剪刀石头布啊1 分钟前
var、let、const与闭包、垃圾回收
前端·javascript
剪刀石头布啊3 分钟前
js常见的单例
前端·javascript
剪刀石头布啊3 分钟前
数据口径
前端·后端·程序员
剪刀石头布啊8 分钟前
http状态码大全
前端·后端·程序员
剪刀石头布啊10 分钟前
iframe通信、跨标签通信的常见方案
前端·javascript·html
宇之广曜19 分钟前
搭建 Mock 服务,实现前端自调
前端·mock
yuko093120 分钟前
【手机验证码】+86垂直居中的有趣问题
前端
用户15129054522024 分钟前
Springboot中前端向后端传递数据的几种方式
前端
阿星做前端24 分钟前
如何构建一个自己的 Node.js 模块解析器:node:module 钩子详解
前端·javascript·node.js
用户15129054522028 分钟前
Web Worker:让前端飞起来的隐形引擎
前端