本文最后更新于 2026-05-20，文章内容可能已经过时。

Vibe Coding 实战全记录：我花 6 小时、写了不到 20 行代码，做出了一个真实可用的产品

我花了 6 小时，亲手写的代码不到 20 行，但最终跑通的产品有将近 450 行代码。

这不是标题党。剩下那 430 行，是 AI 写的。

但更重要的是：这个产品是真实可用的，不是那种"跑起来了但一碰就崩"的玩具。它能记录我的每日任务，能在一天结束时调用大模型 API 生成一段有质感的总结，能在浏览器里正常交互。

我知道你现在的反应——要么觉得这在吹牛，要么觉得这没什么了不起。但在你下结论之前，我想把这 6 小时的全过程完整拆给你看，包括那些翻车的地方。

---

第一章：什么是 Vibe Coding？先别被名字骗了

"Vibe Coding"这个词最早由 Andrej Karpathy 提出，字面意思是"凭感觉编程"。但如果你真的理解成"随便说说，AI 就帮你写完"，那你大概率会在第一个小时就放弃。

它的真实定义更接近这个：以意图为驱动、以迭代为节奏的人机协作开发范式。

你不是在"写代码"，你是在持续地把意图翻译成 AI 能执行的指令，然后验证结果，然后调整意图。这个闭环转得越顺，产出就越快。

用一个对比表格来打破两种常见的错误预期：

它不是魔法，你仍然需要知道自己想要什么、判断 AI 给的东西对不对。但它确实把"从零到能跑"的门槛降低了一个数量级。

---

第二章：我选了什么产品来做实验，以及为什么

选题很重要。Vibe Coding 不适合一上来就做复杂系统，但也不能做个"Hello World"糊弄自己。

我选了一个个人任务追踪 + 每日总结生成器，理由如下：

功能边界清晰：增删改查任务 + 一个"生成总结"按钮，不会无限蔓延
需要调用 AI API：这是 Vibe Coding 最有代表性的场景，也是很多人卡住的地方
有前后端交互：不是纯脚本，需要 HTML + JS + 后端逻辑，有一定复杂度

技术栈我选了 Python（Flask）+ 原生 HTML/JS，没有用任何前端框架。原因很简单：越轻量，AI 犯错的机会越少，你能看懂的地方越多。

---

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

这是本文的核心章节。我会把每个阶段的关键 Prompt 和实际遭遇都写出来。

Phase 1：需求提示词工程

很多人第一步就错了——直接问 AI："帮我做一个任务管理 App。"

然后 AI 给你吐出一个 React + TypeScript + Redux 的完整工程，你看着那 20 个文件，直接放弃。

正确的做法是先做需求拆解，再把拆解结果喂给 AI。我用的是这个 Prompt 模板：

我要做一个轻量级的个人任务追踪工具，具体要求如下：

技术栈：Python Flask + 原生 HTML/JS，不用任何前端框架
功能清单：
1. 添加任务（标题 + 描述 + 优先级）
2. 标记任务完成/未完成
3. 删除任务
4. 点击"生成今日总结"按钮，调用 OpenAI 兼容接口，返回一段 200 字以内的每日复盘

约束条件：
所有数据存储在本地 JSON 文件，不用数据库
单文件后端（app.py），前端只有一个 index.html
代码要有注释，我需要能看懂

请先给我整体的文件结构和每个文件的职责说明，不要急着写代码。

注意最后那句"不要急着写代码"——这是关键。先让 AI 给你一个架构草图，你确认没问题再让它动手写，能省掉大量返工。

Phase 2：骨架生成与第一次崩溃

AI 给出架构草图后，我确认了结构，然后让它生成完整代码。

第一次运行，报错了：

ModuleNotFoundError: No module named 'flask'

这是最常见的新手坑。但重点不是这个错误本身，而是你怎么描述这个错误。很多人直接把报错截图扔给 AI，然后 AI 给你一堆解释但没有可执行的下一步。

我用的报错描述模板：

运行 python app.py 时出现以下报错，请告诉我：
1. 这个错误的原因是什么（一句话）
2. 具体的修复命令（直接给我能复制粘贴的）
3. 修复后我应该怎么验证问题解决了

报错信息：
[粘贴完整报错]

我的环境：macOS，Python 3.11，用的是系统自带 Python，没有虚拟环境

这个模板的核心逻辑是：把 AI 的输出格式锁死，不让它给你写一篇散文式的解答。它给我的回答直接可用：

pip install flask
验证：运行后访问 http://127.0.0.1:5000，看到页面即成功

骨架跑通之后，那种感觉是真实的——浏览器里出现了一个有输入框、有列表、有按钮的页面。虽然很丑，但它活了。

Phase 3：功能迭代对话

骨架跑通之后，进入迭代阶段。这个阶段的节奏感非常重要——每次只提一个需求，不要一口气说"我要改样式、加动画、还要优先级排序"。

我的迭代对话大概经历了 11 轮，每轮的 Prompt 结构长这样：

当前状态：任务列表可以正常添加和删除了
这一步我想实现：点击任务标题，可以展开显示详细描述
约束：不要引入新的 JS 库，用原生 DOM 操作实现
请只修改 index.html 中需要改动的部分，不要重新生成整个文件

"不要重新生成整个文件"——这句话在 Phase 3 会帮你省掉大量时间。AI 有个习惯，一旦你让它修改，它倾向于把整个文件重写一遍，然后你要花时间 diff 哪里变了。限制输出范围，效率高很多。

Phase 4：接入 API 打通最后一公里

这一步是整个流程里最有成就感的——也是很多人卡死的地方。

卡住的原因通常不是代码，而是 API 的申请门槛和费用问题。OpenAI 官方账号需要海外信用卡，Claude 的 API 有地区限制，Gemini 的配额规则让人头疼。

我在实验中用的是 [api.884819.xyz](https://api.884819.xyz)——它聚合了 GPT 系列、Claude 系列、Gemini 系列等主流模型，国内直连、按量计费，对于 Vibe Coding 这种高频调用的场景来说，比直接开官方账号便宜不少，也省去了网络折腾。

调用格式和 OpenAI 标准接口完全兼容，下面这段代码直接可用，只需要把 base_url 换成对应地址：

import requests
import json

def generate_daily_summary(tasks: list) -> str:
"""
调用大模型 API，根据今日任务列表生成每日总结
"""
# 把任务列表格式化成文本
completed = [t for t in tasks if t.get("done")]
pending = [t for t in tasks if not t.get("done")]

task_text = f"今日完成任务（{len(completed)}项）：\n"
for t in completed:
task_text += f"- {t['title']}\n"

task_text += f"\n未完成任务（{len(pending)}项）：\n"
for t in pending:
task_text += f"- {t['title']}\n"

prompt = f"""
以下是我今天的任务完成情况，请帮我生成一段 200 字以内的每日复盘总结，
语气真诚，重点指出今天的亮点和明天可以改进的一点。

{task_text}
"""

response = requests.post(
"https://api.884819.xyz/v1/chat/completions",  # 替换为实际地址
headers={
"Authorization": "Bearer YOUR_API_KEY",
"Content-Type": "application/json"
},
json={
"model": "gpt-5.1",  # 可替换为 claude-sonnet-4.6 等
"messages": [{"role": "user", "content": prompt}],
"max_tokens": 300
}
)

return response.json()["choices"][0]["message"]["content"]

这段代码我让 AI 生成了初版，然后自己改了变量命名和注释——这就是我"亲手写的不到 20 行"的主要来源。

---

第四章：踩了哪些坑——Vibe Coding 的真实边界

我不是来卖课的。以下三个坑是我实际踩过的，每一个都让我多花了至少半小时。

坑 1：上下文窗口断裂，AI"失忆"了

当对话轮次超过 15-20 轮，AI 开始忘记前面的约定。最典型的表现是：你之前说好"数据存在 tasks.json"，但 AI 在第 18 轮突然给你生成了一段操作 SQLite 数据库的代码。

解法：每隔 10 轮，在新消息开头加一段"记忆锚点"：

【重要背景，请记住】
当前项目：Flask 任务追踪器
文件结构：app.py + templates/index.html + tasks.json
数据存储：JSON 文件，不用数据库
上一步完成：任务的添加/删除/完成标记功能已跑通
这一步目标：[你的新需求]

坑 2：AI 自信地给出了错误逻辑

在实现"按优先级排序"时，AI 给了我这样一段代码：

tasks.sort(key=lambda x: x['priority'])

看起来没问题。但我的优先级字段存的是字符串："高"、"中"、"低"——字符串排序的结果是按拼音，"低"排在"高"前面，"中"排在最后。完全错了。

AI 没有问我优先级的数据类型，直接给了一个"通用"方案。

解法：在提需求时，主动告知数据结构。不要假设 AI 记得你之前说的细节：

任务对象的数据结构如下：
{"id": 1, "title": "写报告", "priority": "高", "done": false}
priority 字段是字符串，值只有"高"、"中"、"低"三种
请按高→中→低的顺序排序

坑 3：多文件修改时结构混乱

当我让 AI 同时修改 app.py 和 index.html 时，它有时会把前端的 JavaScript 逻辑写进 Flask 的路由函数里，或者把后端的变量名和前端的 API 路径对不上。

解法：多文件修改时，一次只改一个文件，改完验证，再改下一个。效率看起来慢了，但返工成本低很多。

---

第五章：这套流程能复制吗？给不同水平读者的路线图

答案是：能，但你要找到适合自己的入口。

🟢 小白版（0 基础也能开始）

工具：Cursor 编辑器 + Claude Sonnet 4.6（内置，不需要单独申请 API）
做法：在 Cursor 里直接对话，让它生成代码，点击"Apply"按钮应用，不需要碰终端
时间成本：第一个项目预计 3-5 小时
技术门槛：会打字就行，但需要耐心做 3-5 次"报错→修复"的循环
适合做什么：静态网页、简单脚本、数据处理工具

🟡 进阶版（本文演示的路径）

工具：Claude / GPT 对话 + 本地 Python 环境 + API 调用
做法：自己运行代码，调用外部 API 实现真实功能
时间成本：第一个完整项目 6-10 小时
技术门槛：能在终端运行命令，知道怎么安装 Python 包
适合做什么：有 API 调用的工具、数据仪表盘、自动化脚本

如果你走的是进阶版路径，需要在本地调用 API，[api.884819.xyz](https://api.884819.xyz) 是目前我测试下来接入成本最低的选项，新用户注册即送体验 token，先跑通流程再说。

🔴 折腾版（给想深入的人）

工具：本地部署 Ollama + 多模型切换 + 自建 API 中间层
做法：在本地跑开源模型，根据任务类型动态切换不同模型
时间成本：需要 1-2 周才能建立稳定的工作流
技术门槛：需要理解模型部署、API 路由、基本的 DevOps 概念
适合做什么：对隐私敏感的项目、需要高度定制化的工作流

---

结语：工具，不是捷径

回到开头那个数字——6 小时、不到 20 行手写代码、一个真实可用的产品。

我不想把这个结果神话化。Vibe Coding 不是让你躺平的理由，它是一种把你的时间从"写语法"转移到"想清楚要什么"的工具。而"想清楚要什么"，恰恰是很多人最缺练习的能力。

如果你现在想开始，我建议的第一步非常简单：打开任意一个 AI 对话界面，用本文 Phase 1 的 Prompt 模板，描述一个你真正想做的小工具。 不要等到"学会编程"再开始——那一天可能永远不会来。

本次实验的数据汇总：

| 指标 | 数据 | | 总耗时 | 约 6 小时 | | 对话轮数 | 31 轮 | | 手写代码行数 | 约 18 行 | | AI 生成代码行数 | 约 430 行 | | 遭遇报错次数 | 7 次 | | 需要手动修复的逻辑错误 | 3 处 |

---

这次我用 Vibe Coding 搭的是一个单机工具，一个人、一个 AI、一个对话窗口。

但下一个问题更有意思——

如果产品需要多个 AI 模型协作完成不同任务，比如一个负责理解需求、一个负责写代码、一个负责审查逻辑、一个负责生成测试用例……

这不是科幻。这是 Multi-Agent 开发的雏形，而且它已经可以在普通人的电脑上跑起来了。

下一篇，我会用同样的「全流程实录」方式，带你看看 AI 团队协作是什么感觉——几个模型互相配合帮你干活，效率是什么量级的。

敬请期待。

---

本文由8848AI原创，转载请注明出处。关注8848AI，带你从零开始学AI。

#VibeCoding #AI编程 #人工智能 #8848AI #AI教程 #Claude #GPT #编程入门