Vibe Coding 实战教学：用 Trae 协作开发 Chrome 扩展 “Hulk”

一、什么是 Vibe Coding？

Vibe Coding 是一种以"氛围"和"上下文"为核心的新型编程协作范式。它强调：

人与 AI 编程助手（如 Trae）的深度协作
文档 > 代码：清晰的需求、设计稿、接口说明是生成高质量代码的前提
开发者角色转变：从写每一行代码，变为提供上下文、监督逻辑、把控质量

在 Vibe Coding 模式下，我们不再执着于"手敲代码"，而是专注于：

写好需求文档
绘制线框图或设计稿
规划项目结构
定义交互流程

AI（如 Trae）则负责将这些"vibe"转化为可运行的代码。

二、实战目标：开发 Chrome 扩展 "Hulk"

我们将使用 Vibe Coding 的方式，与 Trae 合作开发一个名为 Hulk 的 Chrome 扩展程序。

功能需求（需求文档）

用户点击扩展图标，弹出 popup 窗口
窗口中显示：
- 标题："改变背景颜色"
- 提示文字："点击下方按钮将当前页面背景色改为绿色"
- 一个按钮："改变颜色"
点击按钮后，当前网页的背景色变为绿色

设计参考（UX 设计稿）

假设你已提供 ux.jpg，其中展示了 popup 的布局：简洁卡片式 UI，居中文字 + 按钮。

技术约束

使用 icons/ 文件夹中的图标作为扩展图标
使用标准 Chrome Extension Manifest V3 架构
不依赖外部库（纯 HTML/CSS/JS）

三、为 Trae 提供完整上下文（Vibe 准备）

为了让 Trae 高效生成代码，我们需要提供以下"vibe"材料：

类型	内容
需求文档	如上所述的功能描述
设计稿	`ux.jpg`（视觉参考）
目录结构规划	明确文件组织
技术栈说明	Manifest V3、popup、content script

规划项目目录结构

bash 复制代码

hulk-extension/
├── manifest.json          # 扩展配置
├── icons/
│   ├── icon16.png
│   ├── icon48.png
│   └── icon128.png
├── popup/
│   ├── index.html         # 弹窗页面
│   ├── style.css          # 弹窗样式
│   └── script.js          # 弹窗逻辑
└── content.js             # 注入页面，修改背景色

四、Trae 生成的代码（基于上述上下文）

下面是 Trae 在接收到完整上下文后，应能自动生成的代码。

1. `manifest.json`

json 复制代码

{
  "manifest_version": 3,
  "name": "Hulk",
  "version": "1.0",
  "description": "一键将网页背景变为绿色！",
  "icons": {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  },
  "action": {
    "default_popup": "popup/index.html",
    "default_title": "Hulk - Change Background to Green"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ],
  "permissions": []
}

2. `popup/index.html`

xml 复制代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <h2>改变背景颜色</h2>
    <p>点击下方按钮将当前页面背景色改为绿色</p>
    <button id="changeColor">改变颜色</button>
  </div>
  <script src="script.js"></script>
</body>
</html>

3. `popup/style.css`

css 复制代码

body {
  width: 250px;
  padding: 16px;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

.container {
  text-align: center;
}

button {
  margin-top: 12px;
  padding: 8px 16px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}

4. `popup/script.js`

javascript 复制代码

document.getElementById('changeColor').addEventListener('click', () => {
  // 向当前标签页发送消息
  chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
    chrome.tabs.sendMessage(tabs[0].id, { action: 'changeBackgroundColor' });
  });
});

5. `content.js`

ini 复制代码

// 监听来自 popup 的消息
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === 'changeBackgroundColor') {
    document.body.style.backgroundColor = 'green';
  }
});

五、Vibe Coding 的协作要点总结

✅ 成功的关键：提供清晰上下文

如果只说"做个改背景色的插件"，Trae 可能遗漏 popup 结构或权限配置。
但当我们提供交互步骤 + 目录结构 + 设计意图，生成的代码几乎可直接运行。

✅ 开发者的新角色

不是写代码的人，而是"vibe 架构师"
负责：
- 定义用户旅程（Step1 → Step2）
- 绘制线框图（哪怕手绘拍照）
- 编写结构化需求（避免模糊描述）
- 审查 AI 生成的逻辑是否符合预期

✅ 耐心打磨"vibe"

第一次生成可能不完美？没关系！

补充说明："按钮要居中"、"不要修改字体颜色"
Trae 会基于反馈迭代优化

这正是 Vibe Coding 的精髓：通过持续对话，让 AI 理解你的"感觉" 。

六、如何测试 Hulk 扩展？

打开 Chrome → chrome://extensions/
开启「开发者模式」
点击「加载已解压的扩展程序」，选择 hulk-extension 文件夹
访问任意网页，点击 Hulk 图标
点击"改变颜色"按钮 → 背景变绿！

七、延伸思考：Vibe Coding 的未来

复杂产品也能这样开发吗？
当然！只要拆解清楚模块（登录、数据展示、设置页），每个模块都可用同样方式协作。
是否还需要学编程？
需要，但重点变了：从语法细节 → 系统设计 + 上下文表达能力。
文档即产品
在 Vibe Coding 中，一份好的 PRD（产品需求文档）可能比 1000 行代码更有价值。

结语

通过这次 Hulk 扩展的开发，我们体验了 Vibe Coding 的核心理念：

用清晰的文档和设计，引导 AI 生成可靠代码；人类专注创造与监督，而非重复劳动。

现在，轮到你了------

拿起你的设计稿，写下你的需求，和 Trae 一起，Vibe 出下一个产品吧！

🌱 提示：本文本身就是一个"vibe 文档"------如果你把这篇文章喂给 Trae，并说"请按此文实现 Hulk 扩展"，它就能生成全部代码。这就是 Vibe Coding 的力量。