Vibe Coding之道：从Hulk扩展程序看Prompt工程的艺术

在AI编程助手日益普及的今天，我们正经历着编程范式的深刻转变。传统的"手写每一行代码"正在向"精准指导AI生成代码"演进。这种基于氛围和直觉的编程方式，我称之为Vibe Coding。Vibe Coding不是懒散，而是"松弛且高效的协作状态"。它让代码不再是障碍，而是实现创意的工具。

韭菜炒大葱.

428人浏览 · 2025-11-16 11:05:27

韭菜炒大葱. · 2025-11-16 11:05:27 发布

Vibe Coding之道：从Hulk扩展程序看Prompt工程的艺术

在AI编程助手日益普及的今天，我们正经历着编程范式的深刻转变。传统的"手写每一行代码"正在向"精准指导AI生成代码"演进。这种基于氛围和直觉的编程方式，我称之为Vibe Coding。✨

为什么我们需要Vibe Coding？

在过去的开发中，我们常常陷入这样的困境：

为Chrome扩展的manifest.json配置纠结半天
重复编写popup.html的结构
调试跨脚本通信时反复出错
为权限问题头疼不已

而Vibe Coding告诉我们： “编程不再是最重要环节，文档才是。” 📝

Vibe Coding的核心要素

Vibe Coding不是让AI替我们思考，而是让我们更专注于需求定义和场景设计。它需要我们提供以下关键文档：

需求文档：清晰描述功能和交互流程
设计稿：提供视觉参考（如ux.png）
技术文档：指定技术栈和规范
测试文档：定义验收标准

AI擅长的是将这些文档转化为代码，而我们则专注于"解决用户问题"。这才是开发的本质。💡

Hulk扩展：Vibe Coding的完美实践

让我们以Hulk扩展为例，展示Vibe Coding的全过程：

1. 精准的Prompt设计

你是一个经验丰富的Chrome扩展程序开发者，请帮我开发一个名为Hulk的扩展程序。
UX设计图参考ux.png。
具体交互步骤如下：
Step1: 点击程序图标打开弹出窗口，在窗口中默认提示："改变背景颜色"、"点击下方按钮将当前页面背景色改为绿色"和一个"改变颜色"按钮。
Step2: 点击按钮，网页背景改变成绿色。
注意：请使用icons文件夹的图标作为应用程序的图标

这个Prompt包含了关键要素：

角色设定：明确指定AI扮演"经验丰富的开发者"
项目命名：给项目具体名称"Hulk"
视觉参考：提及UX设计图
交互流程：清晰列出步骤
细节要求：包括图标使用等指示

2. AI生成的完整代码

基于上述Prompt，AI生成了完整的Chrome扩展代码：

manifest.json（核心配置）：

{
  "manifest_version": 3,
  "name": "Hulk",
  "version": "1.0",
  "description": "改变网页背景颜色的扩展程序",
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icons/home.png",
      "32": "icons/home.png",
      "48": "icons/home.png",
      "128": "icons/home.png"
    }
  },
  "icons": {
    "16": "icons/home.png",
    "32": "icons/home.png",
    "48": "icons/home.png",
    "128": "icons/home.png"
  },
  "permissions": ["activeTab", "scripting"],
  "content_scripts": [{
    "matches": ["<all_urls>"],
    "js": ["content.js"]
  }]
}

popup.html（用户界面）：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hulk扩展</title>
  <style>
    body {
      width: 200px;
      padding: 15px;
      margin: 0;
      font-family: Arial, sans-serif;
      background-color: #f5f5f5;
    }
    .container {
      text-align: center;
    }
    h2 {
      font-size: 18px;
      margin-bottom: 10px;
      color: #333;
    }
    p {
      font-size: 14px;
      margin-bottom: 20px;
      color: #666;
      line-height: 1.4;
    }
    button {
      background-color: #4CAF50;
      color: white;
      border: none;
      padding: 10px 20px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 14px;
      margin: 4px 2px;
      cursor: pointer;
      border-radius: 4px;
      transition: background-color 0.3s;
    }
    button:hover {
      background-color: #45a049;
    }
  </style>
</head>
<body>
  <div class="container">
    <h2>改变背景颜色</h2>
    <p>点击下方按钮将当前页面背景色改为绿色</p>
    <button id="changeColor">改变颜色</button>
  </div>
  <script src="popup.js"></script>
</body>
</html>

content.js（核心功能）：

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  if (request.action === 'changeBackgroundColor') {
    document.body.style.backgroundColor = '#4CAF50';
    document.documentElement.style.backgroundColor = '#4CAF50';
    sendResponse({success: true, message: '背景颜色已成功修改为绿色'});
  }
});

popup.js（交互逻辑）：

document.addEventListener('DOMContentLoaded', function() {
  const changeColorButton = document.getElementById('changeColor');
  
  changeColorButton.addEventListener('click', function() {
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
      chrome.tabs.sendMessage(tabs[0].id, {action: 'changeBackgroundColor'});
    });
  });
});

3. 为什么这个Prompt如此有效？

角色设定：AI知道它应该以专业开发者视角思考
流程清晰：Step1和Step2的分解让AI理解交互逻辑
细节要求：指定图标路径，避免AI随意生成
视觉参考：提到ux.png，让AI理解设计意图

4. 实现的效果图

从Hulk到更强大的工具

Hulk只是一个起点。掌握了Vibe Coding的协作方式后，我们可以轻松扩展：

增加功能：添加"颜色选择器"、"恢复默认色"按钮
开发新工具：制作"网页字体调整插件"、“图片压缩助手”
团队协作：将需求文档同步给同事，实现"多人定需求，AI生代码"

正如文章中所说：“从’改背景’到’做产品’，只需补充需求文档。” 🚀

Vibe Coding的真正价值

Vibe Coding不是让AI取代开发者，而是让我们从机械性工作中解放出来，专注于产品价值和用户体验。它让我们能更专注于：

产品设计的合理性
用户需求的精准理解
交互流程的流畅性
未来扩展的可维护性

当我们不再为"怎么写代码"而焦虑，就能把更多精力放在"解决什么问题"上。这才是开发的真谛。💡

结语

Vibe Coding不是懒散，而是"松弛且高效的协作状态"。它让代码不再是障碍，而是实现创意的工具。

如果你也被代码门槛拦住了创意，不妨从一个简单的插件开始，试试"备好文档，召唤AI"的协作方式。毕竟，真正限制我们的从来不是代码能力，而是没被落地的好想法。🌟

从Hulk开始，让我们一起拥抱Vibe Coding，开启高效协作的新篇章！🎉

https://edu.csdn.net/learn/39067/627173?utm_source=2019755004

汇聚全球AI编程工具，助力开发者即刻编程。

更多推荐

AI5 - “你说需求，我写代码”：自然语言驱动的编程新范式

AI编程社区

CSS十问——好奇心+刨根问底=CSSer

季负偷觅1. 创建 Blazor web工程,选Autoimage2. 打开 GitHub Copilot 窗口,输入提示词使用 Blazor 编一个五子棋游戏image3.复制代码测试为了方便调试, 我们先把运行模式由 InteractiveAuto 改为 InteractiveServer打开 App.razor 编辑两行 @rendermode="InteractiveAuto" 改为 @