作者使用Vibe Coding开发浏览器插件，解决了标签页过多的问题。虽然Vibe Coding提高了效率，但复杂项目仍需编码技能和细致验证。作者分享了IDE选择、提示编写、代码验证等经验，并强调编码技能的重要性。
译自：Mastering Vibe Coding — May the Force Be With You
作者：Lyudmil Pelov
在见证了 Vibe Coding 作为顶级软件开发趋势的迅速崛起后，我决定用它来构建一个解决方案，以解决我经常遇到的一个问题：过多的浏览器标签页。我养成了一种从不关闭标签页的习惯，因为我不确定什么时候会再次需要它。然而，由于我打开了数百个浏览器标签页，其中许多通常是重复的。构建一个浏览器插件来帮助解决这个问题，似乎是我的第一个 vibe-coding 项目的完美用例。
原力觉醒
我一生都在编程；但是，我从未开发过浏览器插件，而且我不想开始阅读教程和其他材料。最终，这就是 Vibe Coding 的承诺：我可以简单地提示我想要做什么，然后立即开始。
所以，我要求 ChatGPT 教我如何开发一个浏览器插件，第一印象非常棒。它向我展示了如何设置项目，并立即生成了一个类似 Hello World 的浏览器扩展体验供我尝试，此外还演示了如何在我的浏览器中安装和测试该插件。
通过简单地在 ChatGPT 中输入有关所需功能和用户体验的提示，我在 30 分钟内快速完成了插件的第一个版本。虽然拥有编码经验很有帮助，但大约 95% 的代码是由大型语言模型 (LLM) 生成的。
扩展
我想要更多，这需要一个集成开发环境 (IDE)，我可以在其中更好地利用 Vibe Coding 的强大功能来开发我的项目，而无需在 ChatGPT 和 VS Studio 之间复制和粘贴代码。在研究了各种选项后，我选择了 Trae，它提供免费服务，并且提供最佳体验。虽然所有 IDE 都使用相同的底层模型进行编码，但只需在用户体验上进行一些简单的调整，它们就会变得明显更好。
为我的项目使用非常适合 Vibe Coding 的 IDE 释放了我内心深处的编码野兽。我立即发现了插件中需要改进的地方，并沉迷于升级它。Vibe Coding 能让这个项目走多远？最终它会崩溃吗？
LLM 的反击
当我开始开发插件的下一个版本时，该项目变得越来越复杂。虽然我仍然依赖 Vibe Coding 来生成 90% 的代码，但项目的发展越多，就越需要我投入更多的精力。
一个问题尤为突出：该插件无法可靠地检测到重复项。例如，如果链接发生了更改，但底层页面内容保持不变，则该插件无法识别到这一更改。您可能会将页面移动到不同的位置，但即使内容保持相同，URL 也会更改。我希望该插件通过独立检查 URL 和页面标题来捕获这些情况。
但是，无论我给出多少提示变体或详细解释，我当时使用的 LLM 都无法理解这种区别。它一直将 URL 和标题合并成一个字符串，而不是单独比较它们。那是我的兴奋感第一次开始消退。这并不是一个复杂的要求，但 LLM 坚持采用一种与目标不符的不同方法。
现实检验
我遇到的下一个主要挑战是使浏览器插件与 Chrome 和 Firefox 兼容。虽然 LLM 最初在为实现该目标生成代码方面做得很好，但除非我明确提醒它，否则它往往会忘记跨浏览器要求。如果我没有在提示中保持这种上下文的新鲜度，它会生成忽略兼容性约束的新代码，从而导致重复的实现、不一致的行为或细微的错误，这些错误需要花费大量时间来跟踪。
事实证明，双浏览器要求比预期的更苛刻。LLM 开始在多个地方复制逻辑，或者对整个代码库进行全面更改。由于无法立即阅读和完全理解这些更改，我发现自己盲目地接受了损坏或不完整的更新。我花费在调试或恢复更改上的时间比实际进展上的时间还要多。
为了管理这一点，我不得不建立一个新的流程。我学会了一次只要求一个特定的功能，并提供足够的细节让 LLM 正确理解它。然后我会审查代码，测试它，只有在确认结果后，我才会继续下一个提示。这有助于我更容易地隔离问题，并在出现问题时快速恢复。但是，随着项目变得越来越复杂，我对 LLM 更改的信任开始减弱。
生产力提升
尽管存在这些挑战，但一旦我找到了正确的节奏，并对什么有效、什么无效产生了直觉，我的生产力仍然高于没有 LLM 的情况。强大的编码背景产生了很大的影响。很明显，在 Vibe Coding 的这个阶段，良好的编码技能不仅仅是有帮助的，而且是必不可少的。
快速阅读和理解生成的代码，并在运行代码之前就能感觉到某些东西是否有效，以及制定能够更有效地指导模型的提示的能力，都被证明是非常宝贵的。样板代码几乎总是由 LLM 完美处理的。但是，随着项目变得越来越复杂，我的编码技能受到了前所未有的考验。
未来的经验
Vibe Coding 感觉只是一个开始。很难准确预测它将走向何方，但有一点是明确的：它可以显著提高经验丰富的开发人员的生产力。在这个阶段，该技术仍然严重依赖于使用者的强大编码技能。拥有这种基础的开发人员可以将他们的产出提升到新的水平。
如果没有 Vibe Coding，我可能不会坐下来实现这个项目，因此想象一下还有哪些其他的个人想法最终可能会重见天日，这令人兴奋。这种转变值得拥抱和学习。Vibe Coding 还不能独自解决新的问题；它仍然依赖于人的触觉，改进的动力，完善的动力，追求卓越的动力。这才是始终推动我们前进的动力。我很高兴看到它将带领我们走向何方。
对于任何希望开始自己利用 Vibe Coding 的人，您应该注意以下五件事：
- 根据您的需求优先选择 IDE。 随着项目快速扩展，根据您的独特需求评估选项。虽然我使用了 Trae，但 VS Code 插件已经变得非常有效，因此在选择一个之前，请尝试几个。
- 编写清晰的提示并保持上下文更新。 不要期望 LLM 仅通过阅读您的代码就能完全理解您的项目或需求。
- 验证一切。 不要盲目接受代码建议；请确保您自己验证一切，否则您会遇到麻烦。
- 编码技能至关重要。 您的编码能力越强，您从 Vibe Coding 中获得的收益就越多。如果您对自己的编码技能没有信心，您就会成为瓶颈，无法有效地审查、调试或指导模型。
- 拥抱意想不到的好处。 一个令人惊讶的优势体现在用户体验方面。我从来不喜欢处理 CSS 或样式，尤其是在确保跨浏览器兼容性的麻烦上。但是，由于多模态模型，我现在可以提供一个模型并获得可用的结果。仅此一项就为我节省了数小时的繁琐工作。
我已经在 Chrome 和 Firefox 商店中发布了我的插件。如果您有兴趣尝试或有功能建议，请随时联系！
本文中表达的观点是我个人的观点，并不反映 Oracle 的观点。
