Vibe Coding探索

什么是Vibe Coding？

氛围编程，coding讲究氛围，跟AI对话产生代码...

让程序员从coder的角色转化为产品或者项目的角色

体验

实际工作中，从一个coder变成了一个产品的角色，把产品的需求分解成AI能读懂的任务，进而完成需求的编写

对比传统开发，减少了查询，调试，思考的时间，只保留了拆解任务，和完善需求的时间。

实践

用Trae工具，通过沟通和对话实现一个桑基图的应用, 并且保证代码的可维护性。 这个是符合业务版本，左右为自定义html，中间为实时计算的svg 三倍贝塞尔曲线，包含点击交互等。

思考

如何实现完整的工程类前端项目？我考虑了几点方向

1. 寻找能够把UI稿转为Vue/React代码的AI工具，而不是一张截图一张截图给AI分析
2. 基于现有的前端项目，让AI分析出一份AI能读懂的规范类报告，包含代码规范，文件规范，api规范，技术栈规范等等
3. Vibe Coding过程中的关键对话记录，或者说关键子任务的记录，在项目结束确保有一份全量的子任务文档。或者针对具体组件生成一份AI可识别的文档。方便后期维护。

是否真的能够节省时间？还是个迷，还得实操。

跟进

引入提示词概念，一个成熟的AI项目，维护的提示词可能上百万行。如何有效管理提示词，并且确保每次版本迭代更新AI能承接上下文是一个需要仔细考虑的东西。迭代项目的规则文件，就是一种长期存在的提示词。 针对提示词的维护有以下几种思路和方法：

1.沉淀“高成功率”的指令（指令资产化） 当发现某次对话让AI完美解决了问题，这个提示词就是宝贵的资产

• 做法： 把这些有效的指令记录在文档里
• 意义： 下次遇到类似功能或项目迭代是，直接复制粘贴，保证AI输出的稳定性

2.提供上下文语境 AI记忆是有限的，当项目文件变多时，他可能会混乱

• 做法： 维护一份简洁的 README_AI.md。

  • 里面写清楚：当前项目进度、后端接口基础路径、已完成的模块、接下来要做的目标。

• 意义： 每次开启新对话时，把这个文件传给 AI，它能立刻“入戏”，不需要你从头解释。

3.版本化提示词 当项目从Vue3.4升级到Vue3.5,或者其他package升级，之前的提示词就可能不太适用

• 做法： 更新提示词，告诉AI：更新包语法，弃用老版本

为什么要推广“维护提示词”？

在你想要做的“推广文档”里，这部分其实是最有价值的：

1. 降低门槛：不仅是把代码给别人，你是把**“如何命令 AI 写出这些代码的口令”**给了别人。
2. 可复制性：别人拿到你的提示词库，就能在几秒钟内复现你花几小时调教出来的效果。
3. Vibe Coding 的本质：开发者从“写代码的人”变成了“编写和维护高质量指令的人”。