Vibe Coding 实战全程实录：我用4小时做了个能跑的产品，中间差点放弃三次

我花了4个小时，用自然语言从零搭了一个能用的产品。

我不是在炫耀——我想告诉你中间有多少次我以为它完了。

第一次崩溃发生在第37分钟，AI给我生成了一段"看起来完美"的API调用代码，本地跑起来一片报错。第二次是在第二个小时，我意识到它压根没理解我说的"支持搜索"是什么意思。第三次……算了，先从头说起。

这个过程改变了我对编程门槛的判断——不是变低了，而是变得更清晰了。

---

第一章：Vibe Coding 不是又一个噱头

2025年初，AI领域的教父级人物 Andrej Karpathy 在推文里造了一个词：Vibe Coding。

他的原话大意是：现在我写代码基本上靠"感觉"——把需求说给AI听，接受它给的代码，出错了就把报错扔回去，基本不细看代码本身。

这话一出，技术社区炸了。有人说这是在开倒车，有人说这才是未来。

但大多数人误解了这件事的本质。

AI辅助编程是：你会写代码，AI帮你写得更快。

Vibe Coding 是：你有想法，AI帮你把想法变成能跑的东西——你不需要会写代码。

它改变的不是你写代码的速度，而是你是否需要会写代码这件事本身。

GitHub Copilot 的数据显示，开发者借助AI生成的代码占比已经超过40%。但这个数字背后藏着一个更重要的趋势：越来越多的产品原型，正在被完全不懂编程的人做出来。

这是一次真实的门槛位移。但门槛降低不等于消失——这正是我想通过实战告诉你的。

---

第二章：我选了什么来做实验，以及为什么这个选题重要

我给自己定了一个实验对象：「链接备忘录 + AI摘要」小工具。

功能很具体：

• 粘贴一个URL，自动抓取标题和摘要
• 调用AI生成一句话总结
• 所有链接本地存储，支持关键词搜索
• 有个简洁的Web界面

选这个不是随机的。它满足几个关键条件：

如果这个能做出来，说明Vibe Coding在个人工具场景是真实可行的。如果中间翻车，翻车的地方就是边界所在。

---

第三章：全流程实录——从一句话需求到可以用的产品

3.1 Prompt 设计阶段：把"我想做一个XX"翻译成AI能执行的需求

最常见的错误是直接说："帮我做一个链接收藏工具。"

这等于让厨师"做点好吃的"——AI会给你一个它认为合理的方案，但大概率不是你想要的。

我用的是一个结构化的需求描述模板：

你是一个全栈开发工程师。我需要你帮我构建一个Web应用，具体要求如下：

【产品名称】LinkMemo - 链接备忘录

【核心功能】
1. 用户粘贴URL后，自动抓取网页标题
2. 调用OpenAI API生成该链接内容的一句话摘要（中文）
3. 所有数据存储在本地JSON文件中
4. 支持按关键词搜索已保存的链接
5. 删除链接功能

【技术栈要求】
后端：Node.js + Express
前端：原生HTML/CSS/JS（不用框架，保持简单）
存储：本地JSON文件

【输出要求】
请先给我项目的文件结构，再逐个给出每个文件的完整代码。
不要省略任何代码，不要用"..."代替。

【约束条件】
代码要能直接运行，不需要额外配置
API Key通过环境变量传入
界面要简洁，移动端也能用

这个模板做了几件关键的事：

• 给AI一个角色定位
• 功能描述具体到"一句话摘要"而不是"AI总结"
• 明确技术栈，避免AI自作主张用你不熟悉的框架
• 要求"不省略代码"——这一条非常重要，否则AI会给你残缺的代码

3.2 迭代对话阶段：第一版跑不通怎么办

AI给出了第一版代码，大约200行。我按照文件结构创建好，node server.js 跑起来。

然后——

Error: Cannot find module 'node-fetch'

这是第一个坑。AI生成的代码引用了一个没有在 package.json 里声明的依赖。

很多人到这里就放弃了，或者开始手动查文档。但Vibe Coding的正确姿势是：把报错原文扔回去，加一句上下文说明。

运行 node server.js 后出现以下报错，请帮我修复：

[报错信息粘贴在这里]

注意：我是直接按照你给的代码创建的文件，没有做任何修改。
请告诉我需要运行哪些命令来安装缺失的依赖，
并检查代码中是否还有其他未声明的依赖。

AI立刻给出了完整的 package.json 和安装命令。

这里有个细节很重要："我没有做任何修改"这句话是关键。它让AI知道问题在它的输出里，而不是你的操作里，避免AI给你一堆"检查你的环境配置"的废话。

3.3 卡壳时刻：AI给了幻觉代码，我怎么发现的

第一次真正的卡壳发生在实现"自动抓取网页内容"这个功能上。

AI给出的代码是这样的（有问题的版本）：

// AI生成的第一版 - 有问题
async function fetchPageContent(url) {
const response = await fetch(url);
const html = await response.text();

// 用正则提取正文
const bodyMatch = html.match(/]>([\s\S]?)<\/body>/i);
const bodyContent = bodyMatch ? bodyMatch[1] : '';

// 去除HTML标签
const textContent = bodyContent.replace(/<[^>]+>/g, '');

return textContent.substring(0, 2000);
}

看起来没问题，对吧？

跑起来之后，我发现有两个问题：

1. 大量网站有CORS限制，直接从服务端fetch某些URL会被拒绝

2. 正则提取的内容乱七八糟，充满了script标签的内容、导航栏文字，完全不是正文

这段代码"能运行"，但给AI的输入是噪声数据，生成的摘要毫无意义。

这就是Vibe Coding最危险的地方：AI给的代码在语法上是正确的，逻辑上看起来合理，但实际效果是错的。 如果你不测试真实场景，你不会发现这个问题。

修正后的方案：

// 修正版 - 使用 cheerio 做更精准的内容提取
const cheerio = require('cheerio');

async function fetchPageContent(url) {
try {
const response = await fetch(url, {
headers: {
'User-Agent': 'Mozilla/5.0 (compatible; LinkMemo/1.0)'
},
timeout: 10000
});

const html = await response.text();
const $ = cheerio.load(html);

// 移除无用元素
$('script, style, nav, footer, header, aside').remove();

// 优先提取 article 或 main 标签内容
const mainContent = $('article, main, [role="main"]').text()
|| $('body').text();

// 清理多余空白
return mainContent.replace(/\s+/g, ' ').trim().substring(0, 3000);

} catch (error) {
return ''; // 抓取失败时返回空字符串，不中断流程
}
}

这里我切换了一次模型（从 GPT-4o 换到 Claude Sonnet 4.6），发现对长代码文件的理解能力和错误定位能力差距很明显。如果你也想灵活切换模型测效果，[api.884819.xyz](https://api.884819.xyz) 的多模型统一接口省去了反复注册的麻烦——Vibe Coding 本质上是高频、长上下文的对话，模型能力不能妥协，但账单也不能失控。

3.4 最终上线：部署到 Vercel 的完整路径

本地跑通之后，我让AI帮我把项目改造成可以部署到Vercel的版本。

这里又有一个坑：原来用本地JSON文件存储的方案在Vercel上不可用（Vercel是无状态的Serverless环境）。AI建议我改用 Vercel KV（Redis）或者直接用免费的 PlanetScale MySQL。

我选了更简单的方案：localStorage + 纯前端应用。把后端逻辑压缩到最小，AI摘要生成通过前端直接调用API。

整个改造过程又花了大约40分钟，两轮对话完成。

最终产品：一个部署在Vercel上的静态Web应用，URL可以分享，数据存在浏览器本地。功能完整，界面能用。

---

第四章：诚实的复盘——能做什么，不能做什么

走完全程之后，我可以给出一个相对清醒的判断。

✅ Vibe Coding 真正擅长的场景

❌ Vibe Coding 会持续踩坑的场景

一个判断标准：如果你的产品出了bug，最坏的结果是"用户体验不好"，Vibe Coding 可以接受。如果最坏的结果是"数据泄露"或"资金损失"，请不要完全依赖 Vibe Coding。

整个实战过程中调用 Claude API 的费用，我用的是 [api.884819.xyz](https://api.884819.xyz) 做的中转——Vibe Coding 的核心就是高频、长上下文的对话，模型能力不能妥协，但账单也不能失控。这个平台支持 Claude Opus 4.6、GPT-5系列等主流模型，按量计费，没有月租，适合个人开发者做实验性项目。

---

第五章：你现在就能开始的 Vibe Coding 起手式

工具链推荐

需求描述 → Claude Sonnet 4.6 / GPT-5.1（理解力强，上下文长）
代码编辑 → Cursor / Windsurf（AI原生IDE，直接在编辑器里对话）
部署     → Vercel（前端项目免费，5分钟上线）
API中转  → api.884819.xyz（多模型统一接口，按量付费）

Prompt 模板：需求描述模板

你是一个[技术栈]全栈工程师。我需要构建一个[产品名称]。

【核心功能】
1. [功能1，描述要具体到用户操作层面]
2. [功能2]
3. [功能3]

【技术约束】
前端：[框架或"原生HTML/JS"]
后端：[语言+框架]
存储：[数据库或文件]
部署目标：[Vercel/本地/其他]

【输出格式】
请先给出完整的文件结构，再逐文件给出完整代码。
不要省略任何代码，不要用省略号代替实现。

【验收标准】
代码应该能在[运行环境]中直接运行，不需要额外配置。

Prompt 模板：报错追问模板

运行后出现以下报错，请帮我定位问题并给出修复方案：

【报错信息】
[完整粘贴报错内容]

【上下文】
我按照你上一条回复创建了文件，没有做任何修改
运行命令：[你执行的命令]
运行环境：[Node版本/Python版本/系统]

请先说明报错原因，再给出修复后的完整代码（不要只给改动部分）。

Prompt 模板：功能扩展模板

在现有代码基础上，我需要增加[新功能]。

【现有代码】
[粘贴相关文件的完整代码]

【新功能描述】
触发条件：[用户做什么操作]
期望结果：[系统应该做什么]
边界情况：[异常情况怎么处理]

请只修改需要改动的文件，给出修改后的完整版本。

Vibe Coding 工作流全图

你的想法
↓
结构化需求描述（用需求模板）
↓
AI生成初版代码
↓
本地运行测试
↓ ←─────────────────┐
发现问题？               │
├── 报错 → 用报错模板追问 ┘
├── 功能不对 → 用功能扩展模板
└── 没问题 → 继续下一步
↓
真实场景验证（不只是"能跑"，要测边界情况）
↓
部署（Vercel / Railway / 本地）
↓
上线使用，发现新需求，回到顶部

---

写在最后

Vibe Coding 不会让人人都成为工程师，但它会让更多人有资格把自己的想法变成可以跑的东西。

这是一个真实的变化，不是营销词汇。

如果你想现在就开始：

1. 打开 [api.884819.xyz](https://api.884819.xyz) 注册账号（新用户注册即送体验token，国产模型免费用，不需要邮箱验证，直接用户名+密码搞定）

2. 找一个你自己有真实需求的小工具想法

3. 用本文的需求描述模板写出你的第一个Prompt

4. 遇到报错不要关掉，把报错贴回去继续问

---

这篇我们走完了 Vibe Coding 的完整链路。

但有一个问题我故意留到下一篇再说——

当你的产品真的能用了，你会发现下一个瓶颈不是代码，而是：怎么让 AI 帮你做产品决策，而不只是执行指令。

下一篇，我们聊 Prompt Engineering 的进阶用法：

敬请期待。

---

#VibeCoding #AI编程 #Claude #Prompt技巧 #8848AI #AI工具 #全栈开发 #人工智能