🚀 从“Hulk”扩展开发实战，聊聊我找到的“Vibe Coding”最佳姿势

引言

作为一名前端学习者，我曾沉迷于在每一个像素和每一行代码上精益求精。

但最近，一种名为 "Vibe Coding" 的协作模式彻底改变了我的工作流。它并非鼓吹"零代码"，而是强调一种新的分工：开发者作为"导演"，而AI作为"首席工程师" 。

今天，我将通过一个完整的实战项目------开发一款名为 "Hulk"的Chrome扩展（功能很简单：一键将网页背景变绿），来展示这种高效、愉悦的协作模式。

一、理念先行：什么是 Vibe Coding？

一句话解释Vibe Coding：VibeCoding 是一种强调开发者在良好氛围（vibe）中高效、愉悦地编写代码的编程理念或工作状态，通常融合了合适的音乐、环境、工具和心流体验。

在开始敲代码之前，我们先统一一下"思想"。根据我的理解，Vibe Coding 的核心是：

目标导向：关注"做什么"和"为什么"，而不是一开始就陷入"怎么做"。
文档即上下文：清晰、结构化的文档是与AI（如 Trae, Cursor, GPT等）高效协作的基石。AI不擅长猜你的心思，但它极其擅长在清晰的上下文中执行任务。
人机协同：开发者负责架构设计、边界划定、逻辑审查和" vibe "（感觉）把控；AI负责快速生成模板代码、实现基础功能。
低代码是结果，而不是手段：我们的目标是高质量、快速地交付产品，自动化代码生成是实现这一目标的强大工具。

简单来说，我们不再是从0到1 的码砖工，而是从0.5到1.5的架构师和质检员。

二、项目实战：Hulk 扩展的 Vibe 开发流

我们的产品需求非常明确：

一个名为 Hulk 的扩展，使用指定图标。
点击扩展图标，弹出窗口显示提示信息和"改变颜色"按钮。
点击按钮，当前网页背景变为绿色。

Step 1: 奠定基石 - 项目清单与架构

传统的做法是直接打开编辑器创建 manifest.json。但在 Vibe Coding 模式下，我首先创建了一份"需求文档"（instruct.txt），这将成为我给AI的"工作任务书"。

instruct.txt 复制代码

你是一个经验丰富的Chrome 扩展程序开发者，请帮我开发一个名为Hulk的扩展程序。
UX 设计图参考ux.jpg

具体交互步骤如下：
Step1:点击程序图标打开弹出窗口，在窗口中默认提示："改变背景颜色"、"点击下方按钮将当前页面背景色改为绿色"，和生成一个"改变颜色"按钮

Step2:点击按钮，网页背景改变为绿色

注意以下：
请使用icons文件夹的图标作为图标

ux.jpg：

icons：

提供好对应文件夹中的参靠文件后，就可以让AI帮我们生成了

在右侧对话框中输入：

很快，AI给了我一份完美的 manifest.json。它正确地声明了 activeTab和 scripting权限，这正是MV3中注入脚本所需的关键配置。看，好的文档（需求）直接产出了正确的核心配置。

我们可以在Chrome插件管理中手动添加一下，查看效果：

插件设计效果：

使用效果：

至此，一个功能完备的Chrome扩展已经诞生。 整个过程，我更像是一个产品经理和架构师，通过自然语言向AI下达精确的指令，而AI则完美地扮演了执行者的角色。

三、Vibe Coding 的心法：耐心与文档

通过Hulk扩展的开发，我深刻体会到Vibe Coding的成功关键：

清晰的上下文（文档）是生命线：需求文档、技术选型（MV3）、设计稿（ux.jpg）共同构成了一个完整的上下文。这让AI能生成高度准确的代码，减少返工。
做AI不擅长的事 ：AI可能会在复杂的业务逻辑或非常规交互上犯错。我的工作是划定边界、设计架构、并进行最终的质量把关 。例如，我会审查AI生成的 manifest.json中的权限是否合理，popup.js中的API调用是否符合MV3规范。
耐心迭代：Vibe Coding 不是一蹴而就的魔法。有时需要根据生成结果，反过来调整你的提示词和文档，进行多次迭代。这是一种对话，而不是单次命令。

四、效果展示与源码

这就是我们的Hulk扩展：（此处应替换为ux.jpg的实际效果图 ）最终项目结构：

scss 复制代码

hulk-extension/
├── icons/
│   ├── icon16.png
│   ├── icon48.png
│   └── icon128.png
├── manifest.json  (来自AI生成)
├── popup.html     (来自AI生成)
└── popup.js       (来自AI生成)
└── ux.jpg
└── instruction.txt

五、结语：拥抱开发范式的转变

开发Hulk这个简单的扩展，如果手动编写，可能也需要15-20分钟。但在Vibe Coding模式下，我仅仅通过编写需求和审查代码，在5分钟内就完成了功能。

这节省的不仅仅是时间，更是将我的心智负担从"语法细节"和"API记忆"中解放出来，投入到更重要的产品设计和架构决策上。

未来，编码能力可能不再局限于"手写代码的行数"，而在于清晰定义问题的能力、架构设计的能力，以及与AI智能体高效协作的能力 。Vibe Coding，就是这种未来工作模式的现在进行时。