不写一行代码，我用 AI 五轮对话做出了一个任务管理应用

核心洞察

这篇文章最有意思的地方在于，它把 Vibe Coding 讲成了一个可操作的流程，而不是停留在概念层面。我见过太多人第一次用 AI 写代码就一口气丢五十行需求进去，结果 AI 输出一堆跑不起来的东西，然后得出结论说“AI 编程不靠谱”。问题根本不在 AI，在于节奏。这篇教程给的 Plan → Execute → Verify 三步循环，每轮只推一个功能点，才是真正能跑通的做法。

---

本章完整演示 Vibe Coding 的全过程。核心思路很简单：不埋头写代码，用自然语言描述需求，让 AI 来执行。

目标是不写一行代码，做出一个真实可用的 Web 应用。

---

核心结论

1. Vibe Coding 的核心工作节奏是 Plan → Execute → Verify 三步循环：每轮只推进一个功能点，先描述需求让 AI 分析方案，确认后生成代码，运行验证通过再进入下一轮，而不是一次性把所有需求丢给 AI。

2. Vibe Coding 由 OpenAI 联合创始人 Andrej Karpathy 提出：核心理念是开发者沉浸在产品的「氛围」中，忘记代码细节，只描述意图，由 AI 负责实现，角色从「实现者」转变为「设计者」。

3. 完整实战只需三个免费工具：VS Code 编辑器（已内置 GitHub Copilot，登录 GitHub 账号即可激活）、Node.js（LTS 版本，需 v20.x.x 或更高、npm 10.x.x 或更高），无需安装额外插件。

4. 实战项目采用 Vue 3 + Vite + Tailwind CSS + localStorage 技术栈：通过五轮对话迭代完成一个任务管理应用，涵盖骨架搭建、任务列表与表单、数据持久化、看板拖拽视图、深色模式与移动端适配。

5. 好的提示词公式为「目标 + 约束 + 上下文」：例如明确指定文件名、功能点、样式方案和禁止引入的依赖库，比笼统的「帮我做一个任务列表」效果显著更好；遇到 Bug 时可直接将完整错误信息、期望效果和已尝试方法粘贴给 AI 修复。

先搞懂：Vibe Coding 到底是什么

这个名字来自 OpenAI 联合创始人 Andrej Karpathy 的一条推文。

他的意思是：你沉浸在产品的「氛围」里，忘记代码细节，只描述你想要什么，AI 帮你实现。

和你现在的编程方式有什么区别

Vibe Coding 的核心工作节奏

整个开发过程遵循一个三步循环：

每完成一步就验证一步，通过之后再进入下一个循环。

这就是 Vibe Coding 的核心秘诀：不是一次性把所有需求丢给 AI，而是一小步一小步地推进，每步都确认方向正确。

---

环境准备

只需要三个东西，而且全部免费。

1. VS Code 编辑器

下载地址：https://code.visualstudio.com

VS Code 教程：https://www.runoob.com/vscode/vscode-tutorial.html

VS Code 支持 Windows / macOS / Linux，完全免费。

2. GitHub Copilot（VS Code 已内置，无需安装）

VS Code 最新版本已经内置了 GitHub Copilot，不需要安装任何扩展。

我们只需要做一件事：

1. 打开 VS Code，点击右上角的账户图标
2. 选择 Sign in with GitHub，登录你的 GitHub 账号
3. 登录后 Copilot 自动激活

如果没有 GitHub 账号，先去 github.com 免费注册一个。

打开编辑器就能看到 Copilot 入口，只需要登录 GitHub 账号即可，无需去扩展市场安装插件。

登录后查看：

点击右上角的小图标就可以调出 Copilot 聊天窗口：

3. Node.js

下载地址：https://nodejs.org

Node.js 教程：https://www.runoob.com/nodejs/nodejs-tutorial.html

选择 LTS 版本，安装后打开终端验证：

node -v   # 应显示 v20.x.x 或更高
npm -v    # 应显示 10.x.x 或更高

认识几个快捷键

这两个快捷键是你最常用的：

---

项目立项：我们要做什么

现在我们要用 Vibe Coding 方式构建一个完整的任务管理应用。

功能清单

• 创建、编辑、删除任务
• 任务有三种状态：待办、进行中、完成
• 优先级分三档：高（红色）、中（黄色）、低（绿色）
• 看板视图：三列拖拽改变任务状态
• 深色模式：一键切换
• 数据自动保存到浏览器（刷新不丢失）
• 手机也能用（响应式布局）

技术选型

---

第一轮对话：搭骨架

现在我们开始真正的 Vibe Coding。不是一次性告诉 AI 所有需求，而是一步一步来。

Step 1：创建项目

打开终端，创建项目：

npm create vite@latest vibe-coding-runoob -- --template vue

打开新终端，进入该项目，然后按照 tailwindcss，使用 code . 命令让项目在 VS Code 中打开：

cd vibe-coding-runoob
npm install
npm install -D tailwindcss @tailwindcss/vite
code .

现在 VS Code 打开了项目，按 Ctrl+Shift+I（Mac: Cmd+Shift+I）打开 Copilot Chat 面板，右上角也有个切换面板的按钮：

Step 2：第一次对话

在 Chat 面板里输入下面这段话，就是把你想要的东西用自然语言说出来：

我在开发一个任务管理 Web App，项目名 vibe-coding-runoob。
技术栈：Vue 3 + Vite + Tailwind CSS。

请帮我搭建项目骨架，创建以下文件：

1. src/types/task.ts — 定义 Task 类型
   字段：id, title, description, status, priority, dueDate, createdAt
   status 可选值：'todo' | 'in-progress' | 'done'
   priority 可选值：'low' | 'medium' | 'high'

2. src/App.vue — 应用主页面
   - 顶部导航栏（标题"Vibe Coding Runoob"）
   - 中间显示任务列表区域

要求：
- 使用 Vue 3 script setup 语法
- 使用 Tailwind CSS 做样式
- 界面简洁干净，主色调用 indigo（靛蓝色）
- 现在先用假数据展示，后面再接真实功能

AI 会一段一段地输出代码并修改文件代码，你点击保留让它自动写入文件。

申请执行命令，你只需要点允许就可以了：

Step 3：验证

AI 代码写完后，会提示我们可以在终端运行：

npm run dev

右上角点击打开终端按钮，然后在终端执行命令：

浏览器打开 http://localhost:5173，看到页面就说明第一步成功了。

完成效果如下：

这就是 Plan → Execute → Verify 的第一轮。你描述了目标，AI 执行了，你验证了结果。后面的每一轮都按这个节奏来。

遇到不懂的代码？

Vibe Coding 不需要你读懂每一行代码。但如果某段代码你完全看不懂，选中它，按 Ctrl+I，输入：

用通俗的中文解释这段代码在做什么

AI 会用你能理解的语言解释它。

---

第二轮对话：实现任务列表和表单

骨架跑通了，现在来实现真正的功能。

Step 1：任务卡片组件

继续在 Chat 面板输入：

创建 src/components/TaskCard.vue 组件：

功能：
- 展示单个任务的信息：标题、描述、优先级标签、截止日期
- 优先级用颜色区分：high 红色、medium 黄色、low 绿色（左边框即可）
- 点击左侧复选框标记任务为完成（标题加删除线）
- 右上角有删除按钮（× 图标）
- 鼠标悬停时卡片微微放大（hover:scale-[1.02]）

Props 接收：task（Task 类型）
Emit 事件：toggle（切换完成状态）、delete（删除任务）

AI 生成后文件写入点保留，命令执行点允许，最后效果：

然后创建任务列表容器：

创建 src/components/TaskList.vue 组件：

功能：
- 接收任务列表，用 TaskCard 展示每一项
- 任务按创建时间倒序排列（最新的在上面）
- 顶部有状态筛选按钮：全部 / 待办 / 进行中 / 完成
- 没有任务时显示空状态提示："还没有任务，点击下方按钮创建第一个吧"

Step 2：创建任务表单

创建 src/components/TaskModal.vue 组件：

功能：
- 点击"+ 新建任务"按钮打开弹窗
- 表单字段：标题（必填）、描述（选填）、优先级（下拉选择）
- 标题为空时显示红色错误提示"标题不能为空"
- 点击弹窗外的灰色遮罩关闭弹窗
- 按 ESC 键关闭弹窗
- 提交后用 emit 把新任务传给父组件

使用 v-model 绑定表单数据
使用 Teleport 把弹窗渲染到 body 下

Step 3：把组件拼起来

现在更新 App.vue，把 TaskList 和 TaskModal 组合到一起：

更新 src/App.vue：

- 引入 TaskList 和 TaskModal 组件
- 使用 reactive 管理 tasks 数组（先用示例数据）
- 实现 addTask 函数：接收 TaskModal 提交的数据，添加到 tasks 数组
- 实现 toggleTask 和 deleteTask 函数
- TaskModal 的显示/隐藏用 ref(false) 控制

示例数据包含 2 条任务，让页面看起来不空

Step 4：验证

在浏览器里手动操作一遍：新建任务 → 点复选框标记完成 → 删除任务。全部功能正常运转后，进入下一轮。

---

第三轮对话：数据持久化

现在刷新页面任务就没了。我们需要把数据存到浏览器的 localStorage 里。

告诉 AI 你的需求

现在任务数据只存在内存里，刷新就没了。请把数据持久化到 localStorage：

1. 创建 src/utils/storage.ts：
   - saveTasks(tasks): 把任务数组存为 JSON
   - loadTasks(): 读取并解析 JSON，读取出错时返回空数组
   - 存储键名：vibe-coding-runoob-tasks

2. 更新 src/stores/taskStore.ts：
   - 用 Vue reactive 管理状态
   - 初始化时从 localStorage 加载数据
   - 使用 watch 自动监听变化并保存（deep: true）
   - 导出 addTask、updateTask、deleteTask 函数
   - 首次使用时如果没有数据，自动创建 3 条示例任务

3. 更新 App.vue，改为从 taskStore 获取数据和方法

验证

# 在浏览器中：
1. 添加几条任务
2. 刷新页面 → 任务还在！
3. 按 F12 打开开发者工具 → Application → Local Storage
4. 找到 vibe-coding-runoob-tasks，查看存储的 JSON 数据

如果数据没了，把 F12 控制台里的错误信息粘贴给 AI，让它修复。

---

第四轮对话：看板视图

需求描述

我想添加一个看板视图（Kanban），文件：src/components/KanbanBoard.vue

功能：
- 三列：待办 | 进行中 | 已完成
- 任务卡片显示在对应状态的列中
- 卡片可以拖拽到其他列（用 HTML5 原生拖拽 API）
- 拖入新列时自动更新任务的 status
- 在 App.vue 顶部加两个 Tab 按钮："列表"和"看板"
- 切换时保持数据一致

注意：不需要引入任何拖拽库，用原生的 dragstart、dragover、drop 事件即可。

AI 生成后验证：拖一张卡片从「待办」到「进行中」，确认任务状态更新了。

---

第五轮对话：深色模式和移动端适配

深色模式

添加深色模式：创建 src/components/ThemeToggle.vue

功能：
- 点击按钮切换亮色/深色模式
- 在 html 标签上添加/移除 dark class
- 用 localStorage 记住用户选择（键名：vibe-coding-runoob-theme）
- 首次访问时跟随系统设置（prefers-color-scheme）
- 按钮放在导航栏右侧

同时给所有组件添加 dark: 前缀的深色样式。

移动端适配

适配手机屏幕（375px 宽）：

- 看板三列在手机上改成竖向单列布局
- 任务模态框在手机上改成从底部滑出的样式
- 所有按钮的点击区域不小于 44px
- 表单输入框字号不小于 16px（防止 iOS 自动缩放）
- 导航栏在手机上用汉堡菜单

使用 Tailwind 的响应式类：sm: md: lg:

验证：在浏览器按 F12，切换到手机模式（375px），逐一检查每个页面。

---

遇到 Bug 怎么办：万能排错模板

这是 Vibe Coding 的「急救包」。遇到任何错误，直接用这个模板：

我遇到了一个问题，帮我修复：

【错误信息】
把终端或浏览器控制台的完整错误粘贴在这里

【我想实现的效果】
描述你期望发生什么

【我已经尝试过的方法】
列出你试过但没解决的操作

AI 会根据错误信息自动定位问题、给出修复方案。你不需要自己分析原因。

---

让 AI 审查你的代码

每完成一个大功能，在 Chat 里输入：

请审查我当前项目的代码，重点检查：
1. 有没有安全风险
2. 有没有性能问题
3. 错误处理是否完整
4. 有没有可以简化的地方

AI 会逐条给出问题和修复建议。这是有经验的开发者才能做的事，但有了 AI，你也能做到。

---

部署上线

项目做好了，最后一步是让它上线，任何人都能访问。

推送到 GitHub

$ git init
$ git add .
$ git commit -m "feat: vibe-coding-runoob 任务管理应用"
# 在 github.com 创建同名仓库后：
$ git remote add origin https://github.com/你的用户名/vibe-coding-runoob.git
$ git push -u origin main

部署到 Vercel

1. 访问 vercel.com，用 GitHub 账号登录
2. 点击 Add New Project，选择 vibe-coding-runoob 仓库
3. Framework 选 Vite，直接点 Deploy
4. 等 1-2 分钟，拿到 xxxx.vercel.app 域名

把链接发给朋友，他们就能用你的应用了。

---

Vibe Coding 总结

写好提示词的公式

好的提示词 = 目标 + 约束 + 上下文

迭代节奏

每次对话 → 只做一个功能
每次修改 → 立刻在浏览器里验证
每个功能完成 → 立刻 git commit
每天结束 → push 到 GitHub

不要攒很多修改再一起测试，那是给自己制造麻烦。

这些事不要丢给 AI

• 完全不看代码就接受，至少要知道改了哪些文件
• AI 说「这段代码有安全风险」时，认真看待
• 上线前不手动测试每一个功能

常见问题（FAQ）

Vibe Coding 和传统编程到底有什么区别？

传统编程需要记忆语法和 API、逐行手写并自己调试；Vibe Coding 则用自然语言描述意图，由 AI 生成代码，通过多轮对话迭代，错误信息直接丢给 AI 修复。你的角色从实现者变成设计者，边聊边做、边做边调整。

Vibe Coding 的核心工作节奏是什么？

核心是 Plan → Execute → Verify 三步循环：先描述需求和目标，让 AI 分析并给出技术方案；确认方案后让 AI 生成代码；然后运行验证，把错误交给 AI 修复。每完成一步就验证一步，通过后再进入下一个循环，一小步一小步推进。

用 Vibe Coding 开发需要准备哪些环境？

只需要三个免费工具：VS Code 编辑器、GitHub Copilot（VS Code 最新版已内置，登录 GitHub 账号即可激活）、Node.js（选 LTS 版本，安装后用 node -v 和 npm -v 验证）。常用快捷键有 Ctrl+I 内联 Chat、Ctrl+Shift+I 打开 Chat 面板。