当前位置：首页 > news >正文

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

news 2025/11/17 6:13:52

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'});});});
});