大家好,我是 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 都准确,因为这是直接从源码仓库中提取的文档和代码示例。
如何使用?
比如:我之前写的这个工具仓库路径是:github.com/yaolifeng06... github 修改为 deepwiki 即可:也就是:deepwiki.com/yaolifeng06...
其他好文推荐
搞定 XLSX 预览?别瞎找了,这几个库(尤其最后一个)真香!