Vibe Coding之道：从Hulk扩展程序看Prompt工程的艺术在AI编程助手日益普及的今天，我们正经历着编程范式

本文通过一个Chrome扩展开发实例，探讨如何通过精心设计的Prompt与AI高效协作

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

从Hulk扩展程序说起

最近，我需要开发一个简单的Chrome扩展程序Hulk，功能很简单：点击扩展图标，弹出窗口，点击按钮将网页背景变为绿色。使用AI助手生成这样的扩展本应简单，但如何准确传达需求却是一门艺术。

初始Prompt的构建

看看我为Hulk扩展程序设计的Prompt：

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

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

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

这段Prompt虽然简短，但包含了几个关键要素：

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

代码生成的结果

基于这个Prompt，AI生成了完整的Chrome扩展代码，包括：

<!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>
    /* 弹出窗口的CSS样式 */
    body {
      width: 200px;
      padding: 15px;
      font-family: Arial, sans-serif;
      text-align: center;
    }
    /* 更多样式代码... */
  </style>
</head>
<body>
  <h3>改变背景颜色</h3>
  <p>点击下方按钮将当前背景色改为绿色</p>
  <button id="changeColorBtn">改变颜色</button>
  
  <script src="popup.js"></script>
</body>
</html>

以及对应的JavaScript逻辑：

// popup.js
document.addEventListener('DOMContentLoaded', function() {
  const changeColorBtn = document.getElementById('changeColorBtn');
  
  changeColorBtn.addEventListener('click', function() {
    chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
      chrome.scripting.executeScript({
        target: { tabId: tabs[0].id },
        function: setBackgroundColorToGreen
      });
    });
  });
});

function setBackgroundColorToGreen() {
  document.body.style.backgroundColor = '#4CAF50';
  
  const containers = document.querySelectorAll('main, div, section, article');
  containers.forEach(container => {
    if (!container.dataset.originalBgColor) {
      container.dataset.originalBgColor = container.style.backgroundColor || '';
    }
    
    if (container.style.backgroundColor) {
      container.style.backgroundColor = '#4CAF50';
    }
  });
}

Vibe Coding的核心原则

1. 氛围营造优于技术细节

Vibe Coding的核心在于创造正确的“氛围”或“语境”，而不是纠缠于具体的技术实现。在我的Prompt中，我没有说“请使用chrome.tabs.query API获取当前标签页”，而是描述用户交互的流程和最终效果。

良好氛围的特征：

明确的角色设定
清晰的目标描述
上下文环境设定
期望的“感觉”或“体验”

2. 渐进式细化

Vibe Coding是一个迭代过程。从高层次的需求描述开始，根据AI的响应逐步添加细节：

第一轮：基本功能描述
第二轮：添加样式要求
第三轮：考虑边界情况和错误处理

3. 示例驱动

在Prompt中提供示例或参考，即使是概念性的，也能显著提高输出质量。我提到的“UX设计图参考ux.png”就是一个典型的例子 - 即使没有实际的设计图，这个概念也能引导AI生成具有视觉吸引力的界面。

为什么要存档Prompt？

1. 可重现性

存档Prompt确保了项目可重现。几个月后，当需要修改或调试Hulk扩展时，我可以回顾最初的Prompt，理解生成代码的上下文和意图。

# Hulk扩展 - 原始Prompt存档
## 项目目标：创建改变网页背景色的Chrome扩展
## 生成时间：2024年1月15日
## 使用的AI助手：Trae

### 原始Prompt：
[此处存放完整的Prompt内容]

### 生成的文件结构：
- manifest.json
- popup.html
- popup.js
- content.js
- icons/...

2. 知识积累

每个存档的Prompt都是一个学习案例。通过分析哪些Prompt有效、哪些需要改进，我们可以逐步完善与AI协作的模式。

3. 团队协作

在团队环境中，存档的Prompt成为共享知识的基础。新成员可以通过阅读历史Prompt快速了解项目的设计决策和代码生成逻辑。

4. 调试和优化

当生成的代码出现问题时，回溯到原始Prompt可以帮助识别误解的根源，从而优化未来的Prompt设计。

Vibe Coding的实践建议

1. 开始于“为什么”

在编写Prompt前，先思考项目的核心价值和用户需求。Hulk扩展不仅仅是“改变背景颜色”，而是“提供一种快速改变网页视觉体验的简单工具”。

2. 使用隐喻和类比

像“Hulk”这样的命名本身就传达了力量感和改变的含义，这种隐喻能帮助AI更好地理解项目的“氛围”。

3. 平衡具体性与灵活性

过于具体的Prompt可能限制AI的创造力，而过于宽泛的Prompt则可能导致不相关的输出。找到平衡点是关键。

4. 预期迭代

将AI助手的第一次响应视为初稿，而不是最终产品。准备好通过多轮对话细化和调整输出。

面向未来的编程

Vibe Coding代表了编程范式的演进。随着AI能力的提升，程序员的角色正在从代码编写者转变为AI指导者、系统架构师和创意导演。

未来的程序员可能需要：

精准表达需求的能力
系统思维和架构设计能力
对AI能力和局限的理解
创造性问题解决的技巧

在Hulk扩展的例子中，成功的不是我能写出改变背景色的代码，而是我能清晰地向AI传达这个简单功能应该如何集成到Chrome扩展的生态中，如何设计用户交互，以及如何确保代码的健壮性。

结语

Vibe Coding和Prompt工程正在成为数字时代的重要技能。通过精心设计的Prompt存档和实践，我们不仅能提高当前项目的开发效率，还在为未来的AI协作积累宝贵的经验和模式。

无论是开发像Hulk这样的小工具，还是构建复杂的企业应用，掌握与AI高效协作的艺术都将是我们这个时代程序员的核心竞争力。毕竟，未来的编程可能不再关乎你能写多少代码，而在于你能多好地指导AI创造价值。

本文通过Hulk Chrome扩展程序的开发实例，探讨了Vibe Coding的理念和实践，强调了Prompt设计和存档在AI编程时代的重要性。无论你是刚接触AI辅助编程的新手，还是经验丰富的开发者，希望这些见解能帮助你在与AI协作的旅程中更加得心应手。