这个系列写到第三期我想聊一个比“怎么让 AI 写代码”更现实的问题为什么很多人用 vibe coding 生成一个 demo 很快但一接入真实项目就崩或者干脆跑不起来如果你只是用 AI 生成一段代码复制到编辑器里发现报错再复制回去让 AI 改如此反复那你其实还没有真正进入 vibe coding 的状态。vibe coding 的核心不是“让 AI 写代码”而是建立一套以 AI 为执行主体、以人类为验证主体的开发循环描述需求、生成代码、运行验证、反馈修复。这套循环一旦跑通小白也能在几小时内做出一个能演示、能部署、能给别人用的应用。这一期我会先把 vibe coding 的概念边界讲清楚再给出一套完整可执行的流程最后用一个真实的小项目演示从零开始让 AI 帮你做一个待办事项应用并在本地跑起来。如果你手里已经有 Vercel AI 这类平台账号也可以直接用平台能力完成部分环节。文章会尽量少讲抽象概念多给命令、配置和代码方便你边看边操作。1. 先搞清楚vibe coding 到底解决了什么问题vibe coding 这个词一开始是用来形容一种“靠感觉编程”的状态你不太清楚每一行代码的细节但通过不断给 AI 提需求、看运行结果、再提修改意见最终把应用做出来。它由知名 AI 从业者 Andrej Karpathy 在一次分享中提出后迅速传播成为 AI 辅助编程领域讨论度最高的工作方式之一。但这个词被传播得太广之后反而带来了两个误解。第一个误解是“vibe coding 不需要会编程”。事实上你不需要会手写复杂的算法但你需要会读报错、会判断运行结果是否符合预期、会告诉 AI 怎么改。也就是说编程中“验证”和“决策”的部分依然需要人来完成。第二个误解是“vibe coding 让 AI 一次性生成所有代码”。如果你尝试过就会知道AI 生成的代码第一次就跑通的比例并不高尤其当项目复杂到一定程度时。真正的 vibe coding 是“生成—运行—报错—修复—再运行”的快速迭代循环而不是一锤子买卖。那么它到底解决了什么问题我认为是解决了“从想法到可运行原型”的成本问题。传统方式下一个完全不会编程的人想做一个网页应用需要先学 HTML/CSS/JavaScript再学框架再学部署至少需要几周甚至几个月。vibe coding 把这条路径压缩成了几个步骤你把需求用自然语言描述清楚AI 生成代码你运行验证遇到问题再让 AI 修。原本最耗费时间的“写代码”环节被大幅压缩剩下的时间主要花在“想清楚要什么”和“验证结果”上。所以vibe coding 适合三类人有产品想法但不会写代码的人想快速做原型验证。刚入门编程的初学者想通过真实项目理解代码逻辑。有经验的开发者想减少重复性样板代码的编写时间。但它不适合完全不看运行结果、不读报错、把 AI 输出当最终答案的人。AI 会一本正经地写出有 bug 的代码这是常态不是例外。2. vibe coding 与传统开发的边界什么能交给 AI什么不能先给一个结论vibe coding 不是“去掉开发”而是“把开发的中心从手写代码转移到需求描述和结果验证”。这个转移过程里有些事适合交给 AI有些事必须自己掌控。适合交给 AI 的部分从零生成项目骨架。根据需求编写页面、接口、工具函数。解释一段报错信息并给出修复方案。为已有代码补充注释、测试用例或文档。生成配置文件和部署脚本的初稿。必须由人掌控的部分项目整体需求AI 不知道你要做一个什么产品只能执行你的描述。技术选型用 Vue 还是 React、用 SQLite 还是 PostgreSQL这些决定应该由你评估后确定。代码是否能上线AI 生成的代码可能存在安全漏洞、数据泄露风险、逻辑错误必须经过审查和测试。账号和密钥API Key、数据库密码这些敏感信息绝不能直接交给 AI 或提交到公开仓库。最终验收运行结果是否符合预期只有你能判断。在传统开发中开发者把需求翻译成代码在 vibe coding 中你把需求翻译成提示词AI 生成代码你再把运行结果翻译成新的需求。这个翻译质量决定了项目的成败。这里要给小白一个非常重要的提醒不要让 AI 直接操作你的核心账号或生产环境。如果你要部署到服务器尽量先在本地或测试环境跑通确认没有异常后再操作。涉及数据库、支付、用户数据的功能一定要谨慎再谨慎。3. 环境准备小白开始 vibe coding 前要装什么虽然 vibe coding 降低了编程门槛但一些基础环境仍然需要准备。好消息是这些准备步骤现在都非常标准化照着命令执行即可。3.1 安装 Node.js 与包管理器绝大多数 AI 生成的 Web 应用都基于 Node.js 生态所以需要先安装 Node.js。安装完成后打开终端执行以下命令检查版本node -v npm -v如果能看到类似 v18 或 v20 的版本号说明环境正常。版本请以实际安装为准本文重点演示通用流程。3.2 准备编辑器推荐使用 VS Code它有两个明显优势一是对 JavaScript/TypeScript 项目支持好二是内置终端可以一边看代码一边运行命令符合 vibe coding 的快速迭代节奏。3.3 准备 Git 与代码仓库托管平台建议从第一天就使用 Git 管理代码这对 vibe coding 尤其重要因为 AI 修复代码时可能会引入新问题你需要一个可以随时回退的版本节点。git init git add . git commit -m init: AI 生成的初始版本不要嫌麻烦。当你发现 AI 改坏了某个功能、想回到上一个可运行版本时git 能救你一命。3.4 准备 AI 模型与密钥你需要一个可以调用的大模型服务。常见的方案包括 OpenAI 系模型、Google 的 Gemini、Anthropic 的 Claude以及国内可用的各种模型服务。具体选择哪个取决于你的网络环境、预算和使用场景。模型平台的 API Key 申请方式以各自官方文档为准。通常你需要把 API Key 配置到项目的环境变量文件.env中例如OPENAI_API_KEYsk-你的密钥再次强调.env文件要加入.gitignore绝不能提交到公开仓库。如果密钥泄露及时到平台后台重置。3.5 可选的平台辅助Vercel AI 之类的一体化平台如果你不想手动配置密钥和模型也可以选择 Vercel AI 这类提供完整工程化能力的平台。这类平台通常把模型接入、前端 UI、后端函数、部署发布整合在一起你只需要专注于产品逻辑和提示词本身。具体操作路径以平台当前版本控制台为准核心思路都是选择模型、创建项目、编写提示词、预览效果、部署上线。4. 核心流程拆解从想法到可运行项目的四个阶段有了环境之后我们来拆解一个完整的 vibe coding 工作流。整个过程可以分成四个阶段每个阶段都有明确的目标和验证方式。4.1 阶段一需求描述这个阶段的目标是产出一份“AI 能读懂”的需求说明书。注意越模糊的需求AI 生成的结果越不可控。不要这样描述“我想做一个待办事项应用。”可以这样描述“做一个网页版待办事项应用支持添加任务、标记完成、删除任务。任务列表要保存在本地刷新页面不丢失。界面要求简洁美观使用 Vue 3 Tailwind CSS 实现项目名为 todo-app。”关键点是把功能清单、约束条件、技术栈、项目名一次性说清楚。AI 对“做什么”很敏感对“怎么做”也有偏好但你需要主动给出边界。4.2 阶段二原型生成把上面的需求描述发给 AI让它生成完整的项目文件和代码。此时你可以要求它输出项目结构并逐个文件创建。比较好的做法是在项目目录下创建一个docs/文件夹把需求文档和 AI 生成的说明保存下来。这些文档会成为后续迭代的依据。4.3 阶段三运行修复这个阶段最容易让小白崩溃因为报错信息往往又长又难懂。但请记住一句话报错不是失败而是系统在告诉你下一步该怎么问 AI。遇到报错不要自己去搜解法直接把完整报错信息复制给 AI加上一句“请解释这个报错并给出修复方案”。AI 通常能精准定位问题。如果一次没改好就把新报错继续发回去循环两三次通常会解决。4.4 阶段四功能验证运行通过不代表需求完成。你需要逐个验证功能点新增任务是否生效刷新页面后任务是否还在删除任务是否正常界面在手机尺寸下是否可用把验证结果反馈给 AI让它继续修正。这个阶段本质上是在替你做“测试工程师”的工作。验证越细致最终成品质量越高。5. 完整实操示例用 AI 生成一个待办事项应用这一节我们实际演示一遍。为了让你能完整复现我会把核心代码和命令列出来并说明每一步的作用。5.1 初始化项目先创建一个目录并初始化一个 Vite Vue 项目。Vite 是目前前端项目初始化最常用的工具之一速度很快。npm create vitelatest todo-app -- --template vue cd todo-app npm install如果提示npm create vitelatest不可用可能是网络问题可以切换 npm 镜像源后重试。这里要说明的是不同版本的 Vite 生成的项目结构可能略有差异但不影响整体流程。5.2 安装 Tailwind CSS可选如果你在需求里提到使用 Tailwind CSS可以按以下命令安装。Tailwind 的作用是快速写出好看的界面减少手写样式的时间。npm install -D tailwindcss tailwindcss/vite然后在vite.config.js中注册插件// 文件路径vite.config.js import { defineConfig } from vite import vue from vitejs/plugin-vue import tailwindcss from tailwindcss/vite export default defineConfig({ plugins: [vue(), tailwindcss()], })这个配置的作用是让 Tailwind 的样式工具类在 Vue 单文件组件中生效。配置完成后运行npm run dev可以看到页面正常渲染再继续下一步。5.3 使用 AI SDK 接入模型能力如果这个待办事项应用需要 AI 帮忙生成任务描述、做任务分类那么可以接入一个大模型 API。这里使用 Vercel AI SDK 的官方封装作为示例因为它对前端项目比较友好。先安装依赖npm install ai ai-sdk/openai然后创建一个服务端接口文件。以 Vite 的简单中间件为例核心代码如下// 文件路径src/api/generate.js import { generateText } from ai import { openai } from ai-sdk/openai export async function generateTaskSummary(content) { const { text } await generateText({ model: openai(gpt-4o-mini), prompt: 请把下面这个待办事项描述成一个简短的中文任务标题${content}, }) return text }这段代码的用途是接受一段用户输入的描述调用模型生成一个简洁的任务标题。实际项目中你可以把prompt换成任何你需要的任务指令。需要注意的是模型名称gpt-4o-mini是示例具体可使用的模型名称随着时间可能变化请以你所用模型服务的最新文档为准。也可以换成其他模型提供方。5.4 编写待办事项核心逻辑接下来实现待办事项本身的增删改查。为了让刷新页面后数据不丢失我们直接把任务列表保存到浏览器的 localStorage。这是一个非常适合小白的方案不需要额外部署数据库。// 文件路径src/composables/useTodo.js import { ref, watch } from vue const todos ref(JSON.parse(localStorage.getItem(todos) || [])) watch( todos, (value) { localStorage.setItem(todos, JSON.stringify(value)) }, { deep: true } ) export function useTodo() { function addTodo(text) { todos.value.push({ id: Date.now(), text, done: false, }) } function toggleTodo(id) { const todo todos.value.find((item) item.id id) if (todo) { todo.done !todo.done } } function removeTodo(id) { todos.value todos.value.filter((item) item.id ! id) } return { todos, addTodo, toggleTodo, removeTodo, } }这段代码的逻辑很直观todos是一个响应式数组初始值从 localStorage 读取任何变化都会同步写回 localStorage。addTodo用于新增toggleTodo用于切换完成状态removeTodo用于删除。5.5 编写页面最后写一个简单的页面把上面的逻辑串起来。这是最常规的 Vue 单文件组件写法。!-- 文件路径src/App.vue -- template main classmax-w-lg mx-auto p-6 h1 classtext-2xl font-bold mb-4我的待办事项/h1 form submit.preventhandleAdd input v-modelnewTodo placeholder输入任务描述 classborder rounded px-3 py-2 w-full / button typesubmit classmt-2 bg-blue-500 text-white rounded px-4 py-2 添加 /button /form ul classmt-6 space-y-2 li v-fortodo in todos :keytodo.id classflex items-center justify-between border rounded p-3 span :class{ line-through: todo.done }{{ todo.text }}/span div classspace-x-2 button clicktoggleTodo(todo.id)完成/button button clickremoveTodo(todo.id)删除/button /div /li /ul /main /template script setup import { ref } from vue import { useTodo } from ./composables/useTodo const newTodo ref() const { todos, addTodo, toggleTodo, removeTodo } useTodo() function handleAdd() { const text newTodo.value.trim() if (!text) return addTodo(text) newTodo.value } /script页面本身不长一个输入框、一个添加按钮、一个任务列表。每个任务右侧有“完成”和“删除”两个操作按钮。这就是一个最小可运行的前端应用。5.6 把整个过程交给 AI 执行上面这些代码是我为了演示拆解出来的。在实际 vibe coding 流程里你不需要手写这些。你可以把这段需求直接发给 AI“请创建一个 Vue 3 Vite 项目实现一个待办事项应用。功能包括添加任务、标记完成、删除任务。任务数据保存到 localStorage。界面使用 Tailwind CSS保持简洁。项目初始化完成后告诉我如何在本地运行。”然后让 AI 帮你生成所有文件你负责运行、验证、反馈。上面的代码示例只是给你一个“参照物”让你知道 AI 生成出来的东西大概长什么样。6. 运行与效果验证怎么确认 AI 写的代码是真的“能用”项目代码准备好之后运行验证是最关键的一步。在项目根目录执行npm run dev如果一切正常终端会输出一个本地地址通常是http://localhost:5173。浏览器打开这个地址你应该能看到一个简洁的待办事项页面。然后按照需求逐项验证在输入框中输入“买牛奶”点击“添加”列表中出现“买牛奶”。点击“完成”按钮文字出现删除线。点击“删除”按钮任务消失。刷新页面已添加的任务仍然存在。如果上述所有步骤都符合预期说明 AI 生成的代码在这个环境下是可用的。如果运行失败第一步不是重装环境而是看终端里的报错信息。最常见的几种情况是依赖没有安装完整、组件导入路径错误、ESLint 或语法检查报错。把报错完整复制给 AI让它修改。这里要强调一个判断标准vibe coding 的“成功”不是代码没有红色报错而是功能行为符合你的预期。就算代码写得再漂亮如果任务无法添加项目依然不算完成。7. 常见问题与排查思路根据小白使用 vibe coding 的常见情况我整理了一张排查表遇到问题可以直接对照。问题现象可能原因排查方式解决方案启动项目时提示找不到vite命令依赖未安装完整检查根目录是否有node_modules文件夹执行npm install页面打开是白屏组件导入路径错误或 JS 语法错误打开浏览器控制台查看报错把控制台报错发送给 AI 修复添加任务后刷新页面数据丢失localStorage 未使用或写入失败打开控制台执行localStorage.getItem(todos)检查useTodo中的 watch 逻辑调用模型接口报 401API Key 未配置或已失效检查.env文件重新配置密钥并重启项目安装依赖时网络超时镜像源不稳定查看 npm 配置源切换为国内镜像源后重试部署到平台后功能正常但样式错乱CSS 框架版本不匹配查看构建日志让 AI 检查 Tailwind 版本与配置每一条其实都对应着一个具体的操作动作。遇到问题时不要急着删除重来先把报错信息保存下来这些都是你与 AI 沟通的重要上下文。8. 小白 vibe coding 的最佳实践与安全底线走了几轮“生成—验证—修复”循环之后你会发现 vibe coding 的真正门槛不是“让 AI 写代码”而是“如何管理 AI 生成代码的过程”。这里给出几个对小白最实用的建议。第一把提示词当成代码来管理。每个项目建议在docs/prompts.md里记录你用过的重要提示词。这样当项目改崩了、需要重新生成某部分功能时你还能找到当时“成功的那次”是怎么描述的。第二小步迭代不要让 AI 一次改太多。每次只让 AI 增加或修改一个功能点验证通过后再继续下一个。一次改十个点任何一环出错你都不知道是哪里引入的问题。第三任何敏感信息都不能进入代码库。API Key、数据库连接串、密码、token一律放到环境变量文件中并确保.gitignore包含.env。这在任何采用 AI 辅助开发的流程里都是不可妥协的底线。第四不要直接在生产环境验证。AI 生成的代码先在本地运行、再在测试环境验证最后才考虑部署。如果你使用 Vercel 这类一体化平台注意区分 preview预览和 production生产环境。第五AI 生成的依赖包版本要检查。小白经常忽略这一点。AI 可能给你一个旧版本的依赖导致与当前项目不兼容。遇到类似问题优先让 AI 检查依赖版本兼容性而不是强行忽略报错。第六学会使用 Git 回滚。建议每一个可运行状态都提交一次git add . git commit -m feat: 完成待办事项新增功能这样即使 AI 后来改坏了某个功能你也能随时回到上一个可用的版本。这是成本最低、收益最高的一种保险。第七保留“人工审查”环节。在把 AI 生成的代码用于任何涉及用户数据、支付、登录认证的项目前建议找有经验的开发者做一次代码审查或者使用有安全扫描能力的平台辅助检查。vibe coding 可以让你快速起步但不能替你承担安全责任。9. 总结与下一步这一期我们从概念到实操完整走了一遍 vibe coding 的流程理解它可以解决什么问题、准备基础环境、掌握四个工作阶段、用 Vue 3 实现了一个可运行并支持数据持久化的待办事项应用、列出常见问题与排查方法最后补充了工程上的安全建议。你可以立刻开始动手找一个想做的小工具用 AI 生成项目骨架用npm run dev在本地跑起来然后逐项验证功能。遇到报错就把报错复制给 AI继续迭代。不要追求一次成功这个反复修复的过程本身就是 vibe coding 最有价值的部分。下一步值得深入研究的方向有三个一是学会写更精准的提示词这需要你不断总结哪些描述能让模型一次产出更接近需求二是尝试把 AI 生成的代码部署到 Vercel 这类平台理解构建、部署、环境变量的概念三是尝试给你现有的项目加入 AI 能力比如用大模型做内容分类、摘要生成、数据清洗。如果你关注国内生态一些系统级开发工具也在引入类似的 AI 辅助编程能力思路是相通的让 AI 承担重复工作让人专注于需求、验证与决策。把这一期的基础打牢后面无论切换到哪个平台、哪套工具链你都能快速适应。