Vibe Coding：人机共生时代的开发革命 —— 从概念到 Chrome 扩展实战

Vibe Coding：用氛围编程解锁零代码创造

Vibe Coding（氛围编程）是由 OpenAI 联合创始人 Andrej Karpathy 提出的全新编程理念，核心是通过自然语言交互与 AI 协作，让创造不再受限于代码编写能力。这种模式下，低代码、零代码工具与编程智能体（如 Trae）成为核心载体，普通人只需明确想法，就能快速落地各类产品，打破了技术壁垒对创意的束缚。

从工具到创意：Vibe Coding 的落地场景

Vibe Coding 的应用范围极具弹性，小到轻量工具，大到商用产品，都能通过 AI 协作快速实现。其中，Chrome 扩展程序是最直观的落地场景之一 ------ 就像经典的 JSONView 扩展，仅需聚焦 "接口 JSON 数据格式化展示" 这一核心需求，就能通过 AI 生成工具，解决开发中的实际查看痛点。

而借助 Vibe Coding 模式，我们能更进一步：无需深陷代码细节，只需清晰传递功能目标，AI 就能完成从逻辑到实现的全流程，让每一个实用想法都能快速转化为可用工具。

实战：Vibe Coding 协作型 Chrome 扩展开发

以 Chrome 扩展开发为例，Vibe Coding 的核心是 "协作" 而非 "独写"，具体落地路径简单高效，且已通过实际测试验证可行性：

1. 明确协作输入

用自然语言 prompt 精准描述任务，比如 "开发一个 Chrome 扩展，实现接口 JSON 数据的格式化展示与折叠查看"。
补充设计稿或线框图，明确界面布局与交互逻辑，减少 AI 理解偏差。

AI编辑器关键词：

css 复制代码

请根据@instruction.txt当中的需求帮我开发对应的chrome扩展程序。
首先列出项目的文件目录，然后把对应的文件代码补充完整。

instruction.txt

复制代码

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

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

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

  注意以下两点：
  请使用icons文件夹的图标作为应用程序的图标

然后我们看cursor给我们生成的代码就好。 popup.css文件

css 复制代码

:root {
  color-scheme: light dark;
  font-size: 16px;
  font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
}

body {
  margin: 0;
  padding: 16px;
  min-width: 240px;
  background-color: #0f1115;
  color: #f1f5f9;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hero h1 {
  margin: 0 0 4px;
  font-size: 1.125rem;
}

.hero p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.4;
  color: #cbd5f5;
}

button {
  padding: 12px 16px;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  color: #0f172a;
  background-color: #22c55e;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(34, 197, 94, 0.4);
}

button:active {
  transform: translateY(1px);
  box-shadow: none;
}

.status {
  margin: 12px 0 0;
  font-size: 0.9rem;
  line-height: 1.4;
  color: #34d399;
}

.status.error {
  color: #f87171;
}

popup.html文件

html 复制代码

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <title>Hulk</title>
    <link rel="stylesheet" href="popup.css" />
  </head>
  <body>
    <header class="hero">
      <h1>改变背景颜色</h1>
      <p>点击下方按钮将当前页面背景色改为绿色</p>
    </header>
    <main>
      <button id="changeColorBtn" type="button">改变颜色</button>
      <p id="statusMessage" class="status" role="status" aria-live="polite"></p>
    </main>
    <script src="popup.js"></script>
  </body>
</html>

popup.js文件

js 复制代码

const changeColorBtn = document.getElementById("changeColorBtn");
const statusMessage = document.getElementById("statusMessage");

function setStatus(message, isError = false) {
  if (!statusMessage) return;
  statusMessage.textContent = message;
  statusMessage.classList.toggle("error", isError);
}

async function changeBackgroundToGreen() {
  try {
    const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
    if (!tab || !tab.id) {
      console.warn("未找到活动标签页。");
      setStatus("未找到可操作的标签页。", true);
      return;
    }

    if (!tab.url || /^chrome:|^chrome-extension:|^chrome-devtools:/.test(tab.url)) {
      setStatus("无法修改受保护页面（如 chrome://）。", true);
      return;
    }

    await chrome.scripting.executeScript({
      target: { tabId: tab.id },
      func: () => {
        document.body.style.setProperty("background-color", "#16a34a", "important");
      }
    });
    setStatus("已应用绿色背景。");
  } catch (error) {
    console.error("注入脚本失败：", error);
    setStatus("修改失败，请检查权限或重试。", true);
  }
}

changeColorBtn?.addEventListener("click", changeBackgroundToGreen);

重构协作逻辑：文档大于代码

与 Trae 等 AI 编程智能体合作时，编码本身不再是核心，完整的上下文文档才是高效产出的关键。这些文档会成为 AI 生成代码的决策依据，避免反复修改：

需求文档：明确扩展的核心功能、使用场景与预期效果。
技术文档：指定开发规范、依赖工具与适配要求。
设计稿 / 线框图：定义界面元素、交互逻辑与视觉风格。
接口文档：说明扩展所需调用的接口、参数与返回格式。
测试文档：列出功能测试点与兼容性要求。

打开chrome://extensions/

点开开发者目录，在浏览器打开得到：

完成代码生成后，通过 Chrome 浏览器的 "开发者模式" 加载扩展目录，即可快速验证效果 ------ 从需求描述到功能落地，全程无需手动编写大量代码，仅需聚焦核心逻辑与质量监督。

Vibe 协作：人机共生的创造新范式

Vibe Coding 的本质是 "人机分工"，找到与 AI 编辑器的最佳合作节奏，就能最大化创造效率：

核心原则：提供清晰、完整的上下文文档，让 AI 明确方向。
分工逻辑：将 AI 擅长的代码生成、语法校验等工作交给 Trae，人类则聚焦 AI 不擅长的需求拆解、逻辑把关与质量监督。
成长路径：在协作中同步积累能力，重点掌握需求文档撰写、线框图绘制、项目目录架构设计等核心技能。
核心心态：保持耐心 "氛围编程"，人机磨合的过程也是创意逐步落地的过程，无需追求一步到位。