前言
由于对于vibe coding的好奇，就研究了如何vibe coding，主要使用claude code➕minmax来进行编码工作。大家可以提前下载对应功能，网上很多教程，或者也可以用AI。本项目是我练习vibe coding方法论的一个项目，以采用springboot3+vue3来开发前后端分离的博客项目为例。
思路
我是产考了github上的一个vibe coding的一个方法论来进行的，地址：https://github.com/2025Emma/vibe-coding-cn。
其实主要就是思路在下图：
也就是创建一些文档来规划和约束ai生成的代码，接下来我就按照这个大致思路，结合我的理解来开发这个博客系统。
前期文档
这个项目需要创建的文档如下：
我来解释一下各个文档的大概内容：
-
prd：产品需求文档，我们可以直接告诉cc我们要写的项目的大概内容，然后利用superpowers的头脑风暴来进行prd文档的完善，这个是非常重要的，如果这个需求文档我们写的不好不完善的话，后面生成的系统会有好多bug，而且生成的结果和我们想要的还是有很多偏差的。
-
tech-stack：技术文档，叫ai根据prd来生成对应的技术文档，同样也可以用superpowers的头脑风暴来完善我们的文档，生成之后我们要仔细的检查一下，看看是否符合我们的理想型，不行的话一定要记得修改，润色。
-
api-design:接口文档，这个是我们前后端项目的关键，我们叫ai阅读
prd和tech-stack来生成这个接口文档。ai生成之后我们问ai：阅读/memory-bank里所有文档，api-design.md 是否完全清晰？你有哪些问题需要我澄清，让它对你来说 100% 明确？然后cc就会问你几个问题，你回答就好。 -
implementation-back-plan：我们叫ai阅读
/memory-bank里面的所有文档，然后生成一个后端的实施计划（Markdown 格式），包含一系列给 AI 开发者的分步指令。每一步要小而具体。每一步都必须包含验证正确性的测试。严禁包含代码------只写清晰、具体的指令。 -
implementation-front-plan：我们叫ai阅读
/memory-bank里面的所有文档，然后生成一个前端的实施计划（Markdown 格式），包含一系列给 AI 开发者的分步指令。每一步要小而具体。每一步都必须包含验证正确性的测试。严禁包含代码------只写清晰、具体的指令。 -
progress-back：用于记录后端已完成步骤。
-
progress-front：用于记录前端已完成步骤。
-
architecture：用于记录每个文件的作用。
-
test-plan:用于测试的文档。
文档生成之后我们可以在cc里面输入/init，来帮我们生成CLAUDE.md文档：
然后叫ai阅读/memory下的所有文档来生成sql脚本：
其中在CLAUDE.md里面我们可以：
工作流
后端
我们让ai阅读/memory下的所有文档，然后开始开发后端项目，以及完善progress-back文档，提示词可以这么写:
阅读 /memory-bank 所有文档，然后执行实施计划的第 1 步。我会负责跑测试。在我验证测试通过前，不要开始第 2 步。验证通过后，打开 progress-back.md 记录你做了什么供后续开发者参考，再把新的架构洞察添加到 architecture.md 中解释每个文件的作用。
然后ai就会生成项目代码，生成后它会叫我们测试一下第一步生成的是否通过，然后我们说测试通过，它就会开始progress-back.md和architecture.md的编写。
然后我们一直重复上面的步骤就可以把后端项目生成完成了，记住要时不时/clear一下。
生成完后端的所有代码我们就先把后端项目跑起来，报错了就问ai，然后叫ai把后端实现的接口和接口文档的接口对齐颗粒度。帮我们生成后端的单元测试代码，测试通过。
前端
我们让ai阅读/memory下的所有文档，然后开始开发前端项目，以及完善progress-front文档，提示词可以这么写:
阅读 /memory-bank 所有文档，然后执行实施计划的第 1 步。我会负责跑测试。在我验证测试通过前，不要开始第 2 步。验证通过后，打开 progress-front.md 记录你做了什么供后续开发者参考，再把新的架构洞察添加到 architecture.md 中解释每个文件的作用。
然后ai就会生成项目代码，生成后它会叫我们测试一下第一步生成的是否通过，然后我们说测试通过，它就会开始progress-front.md和architecture.md的编写。
然后我们一直重复上面的步骤就可以把后端项目生成完成了，记住要时不时/clear一下。
基础页面生成后可能会很丑，这个时候我们可以用ui-ux-pro-max-skill这个skills来帮我们优化一下界面。
测试
经过漫长的等待我们就生成了前期初始的项目代码，然后我们就开始前后端的联调和功能的测试，我们可以叫ai帮我们生成测试计划，然后我们按照测试计划来测试系统的功能，错误的地方叫ai一步一步的改动修正。
总结
这个方法理论上可以生成一些中小型的项目，但是我觉得最重要的是前期文档的生成，不断的给ai加大量的约束，我们可以用各种各样的skills来约束，不过有个缺点是ai阅读文档和约束会废掉很多上下文。重要的是我们要清楚我们的需求，我们想要一个什么样的系统。我生成这个博客系统花了差不多2天时间，实际有效时长差不多也就4-5h，只要我们把PRD搞清楚，后期我的可以减少很多调试的时间。项目地址：https://github.com/hncjxywyh/vibe-coding--