Skip to main content

Vibe Coding - 优秀文章&项目部分

优秀文章&项目

vibe coding(氛围编程)总是产出一坨垃圾? 你可能需要些技巧

点击访问原帖

写在开头

各位佬友们国庆快乐(嗯,在国庆的尾巴说快乐,希望各位不要打我)。 在连续躺尸摆烂了一周后,本咸鱼终于翻了个身——决定做点经验分享(仅供参考)。 ok,正题开始。

什么是vibe coding

vibe coding(氛围编程,后面统一称作vibe coding)这个概念兴起有一段时间了,我在这里也懒得去查到底是何时何地何人具体提出来这个概念,具体来讲,意指:从需求出发,通过ai辅助(当然也可以是你辅助ai)生成代码,来完成项目构建。 我这里指的范围更窄一点——完全不写代码,也不看代码,用自然语言跟ai沟通,去构建项目满足自己的需求点。 这边以一个具体的示例来进行演示,以便让各位能够快速理解我做了些什么,以及使用了什么技巧。 需求描述 需求点:我希望有一个常驻后台的记录程序,能够让我在每天结束的时候看看自己当天在哪些程序上分别花了多少时间,以便看看自己究竟是怎么浪费时间的(bushi)。还有一个额外需求点,希望这个程序能够记录我究竟浏览了哪些网站,以及分别在这些网站上花了多少时间(比如我到底在某个粉色网站上浪费了多少时间)。 目标环境:windows 开发工具:vscode + kilocode插件(配置的是模型是claude4.5) 开发语言:Python

首次尝试

下面只是演示我在首次尝试时的思路,不是说这个方法论是对的。恰恰相反,有很多问题。 不论你使用何种工具进行vibe coding,我都建议你至少先理一理自己的需求,不用很专业(纯小白式的白话描述也可以),但至少表达描述清楚自己究竟想要什么,ai不是许愿:chicken:,它也不知道你到底想要的是个什么东西(当然你自己可能也不知道,只有在观察的一瞬间才会把现实固定下来,像是薛定谔的猫),希望通过什么手段达成,所以,第一步,理清楚自己的需求,自己先明白自己想要什么,然后尝试表达出来。在这里是有一些技巧的,如果你对于自己的需求实在模棱两可,那么你可以尝试使用我下面的提示词对(包括两个系统提示词和两个用户提示词),进行引导式的问答,ai会通过多轮对话,逐渐的明确你的需求点。第一对提示词用来创建任务分析助手的提示词模板,第二对提示词用来根据你具体的需求创建最终项目使用的需求文档。 下面是系统提示词,这是一个较为通用的助手提示词,我通过多次尝试修改迭代出来的,你也可以用它来做一般性的对话,我自己对这个提示词的效果还是挺满意的,这个提示词模板尤其适用你对要聊的话题只有一个模糊概念的时候。tips:如果你使用的模型在配置了tools/mcp的情况下总是不论什么情况优先使用工具进行查找(在我的测试里,glm4.5会这样),那么可以尝试把 尊重事实 这部分内容给删掉,或者放在后面,又或者按照自己的想法修改一下。
下面是用户提示词,这部分可以自由发挥,大体上来讲,就是明确希望有一个任务分析的助手,能够帮你生成规划文档。在我的测试里,还是多走一步先生成一个任务分析助手更好些。
上一步完成以后,我得到了下面的 vibe coding助手提示词 ——系统提示词,你得到的可能与我不大相通,但问题不大,最终的目标都是一样的。
下面是用户提示词,也就是你整理出来的具体的需求,可以大白话,但一定要表达清楚,如果实在不清楚,上面的助手提示词应该也会辅助你把需求理清楚一点。
然后经过若干轮对话,你就会得到一个规划文档,把文本内容复制到你新建的空项目下的一个空白md文档处即可。 再然后就是vibe coding的部分了,直接引用这个设计文档,作为对话的内容,并向ai许愿,希望它能帮你完成这个项目
image-20251008150146023 **于是你会发现最终ai帮你完成的项目,大概率连运行都成问题!**至少我这次尝试以后的结果是这样的。 所以这是一次完全失败的尝试,不过先别急着打我,耐心往下看,还有第二次尝试。

二次尝试

先让我们复盘一下首次尝试失败的现象,并尝试从现象里面寻找原因。
  • 最终生成的规划文档过于冗杂详细了,这是vibe coding助手输出的,于是问题从vibe coding助手身上找,通过观察可以发现vibe coding助手的提示词不能说不好或是不对,但是太过于详细和工程化了,而对于vibe coding来说,这并不是好事,这意味着任务的复杂度变得极高,在有限的上下文记忆里,塞入了太多与直接实现任务本身无关的内容信息,不是说不应该去debug或者测试,而是不应该期望一个上下文窗口里,ai既能帮你实现项目的需求点,还能帮你完成测试之类的任务,这不现实
  • ai最终直接交付了整个项目,当然它也可能会中途停下来让你去检查纠错,然鹅这不符合我上面狭义的vibe coding宗旨——不写代码,也不看代码。既然不看,如何在中途有问题时纠错?最终项目无法运行其实是可以预期的,倒不如说,项目能够成功运行其实挺神奇的。
因此,我根据观察到的现象,回过头来修改我的整个工作流。

1 先生成kilo code的强化提示词

这一次我直接从kilo code这边着手,为了让kilo code能够更加按照我的心意去完成任务,我选择给kilo code增加提示词。 规划文档这次我选择由kilo code生成,你也可以继续选择用别的方式先生成再说,思路是一样的,我只是懒得在不同软件里来回折腾了。
  • 为了解决设计文档过于冗杂的问题,最简单的方式就是表达清楚这一点,希望kilo code生成设计文档的时候不要过于工程化,应当尽量精简的表达清楚需求,围绕核心需求点编写设计文档,不要有多于的debug或是调试之类的环节。
  • 为了解决项目最终交付完全不可运行的问题,我的解决方案是:让AI分阶段的进行交付,并尽量拆分成原子功能,并明确ai应当在当前阶段的任务完成后,等待人工确认功能符合预期,再进行下一步,否则则进行修改,直到满足需求。既然最终交付的崩塌是不同环节的不校验造成的,那么就拆成原子功能,分阶段的校验,因为是观察可见的现象,所以不需要阅读代码,只是需要多分点精力去检查一下当前阶段的功能点是否满足。这样不会造成最终结果的坍塌,每一步的交付都是被确认过的。即便某一步失败了,也只是当前这个阶段的问题而已。
于是围绕上述思路,我构建了下面的描述,并根据我的通用助手提示词(这部分就不赘述了,跟第一次尝试的一模一样),帮我生成了vibe coding助手提示词-v2
下面是vibe coding助手提示词-v2(kilo code), 你可以直接用我这个提示词, 我测试下来效果还不错, 如果你自己生成的话, 还需要进行多轮次的对话去不断完善修正这个提示词

2 对kilo code添加增强的提示词, 并开始愉快的vibe coding

将我们第一步生成的提示词给kilo code添加上
  1. 接下来先开一个对话窗口, 描述你的需求, 生成一份规划文档
  2. 像是首次尝试里那样, 将规划文档进行引用, 然后直接告诉ai让它逐步实现规划文档里的功能即可 不出意外的话, kilo code会先根据规划文档里的内容先进行分析(这里建议使用architect模式), 做任务拆分, 然后再进入code模式进行代码的编写, 而你所要做的就是在kilo code有问题时回答它的疑问点, 并在每一阶段的交付时, 检查是否完成了当前阶段应该完成的功能。

3 尾声

我的第二次尝试结果成功有了一个可运行的结果,最终生成的报告是长这样的 image-20251008153801385 浏览器浏览页面的监控有些麻烦,我暂时退而求其次没有去实现,不过大体上我还是满意的,完成了我期望中7成的功能。 并且这个工作流仍然有巨大的改进空间,我会继续进行尝试,感兴趣的佬友可以关注一下。

what’s more

这里提个可能大家都知道的技巧, 如果你使用的编程模型是支持多模态的话(比如claude、gpt等), 那么你可以直接先进行一轮单独的对话让ai根据你的需求先生成一个最终画面的预览html(如果你有可视化需求的话),然后在ai正式进行编程的时候,将几张图片一起附加到对话里,告诉ai模仿你的图片去实现最终的可视化结果。虽然不总是有用,但也是一种可以尝试的方法。

关于vibe coding最终产出的项目

结果必然是比较粗糙的,但是,还算能用,如果各位佬友有兴趣,我会再完善一下放出来(前提是我没有咕)

最后

欢迎各位佬友讨论,分享经验,集思广益,以便更加愉快的vibe coding。毕竟动动嘴巴就能差不多实现自己的小需求,还是相当使人满足的。 另外欢迎捉虫,第一次分享,写到后面猪脑过载了,可能会有内容错乱的情况。