vibe coding 零基础实战：用 AI 对话做家庭账本

前两天我老婆忽然凑过来问我你对着电脑说几句话页面就自己出来了这是不是意味着以后不用学编程了我跟她说这个玩法现在有个名字叫 vibe coding。她当场表示想试试。于是一个完全不懂代码的人花了一个晚上居然真的做出了一个能用的“家庭账本”。这篇文章就以她的完整体验为主线讲清楚 vibe coding 是什么、开始前要准备什么、核心工作流怎么走再给出一套可以直接复制运行的实战案例最后总结零基础最容易踩的坑。如果你完全不懂代码可以跟着一步步做如果你本来就是开发者这篇文章同样能帮你建立一套使用 AI 编程的工程化习惯毕竟 vibe coding 不是“让 AI 随便写写”那么简单。1. “不懂代码的人也能写程序”先搞清楚 vibe coding 是什么1.1 一次真实的“新手翻车”我老婆的第一步很简单打开一个 AI 对话工具输入了一句“帮我做个记账的网站”。AI 很快生成了一段完整的 HTML 文件她保存成index.html双击打开页面成功显示出来。她特别兴奋因为页面上有输入框、有按钮、有列表看起来完全像一个正经应用。她添加了几条测试数据工资 12000、买菜 200、打车 30。列表显示正常余额计算也对。然后她刷新了一下页面。数据全没了。她愣住了问我“页面没问题为什么数据没了”这个问题恰恰是理解 vibe coding 最重要的一课。AI 生成的代码默认只把数据放在内存里刷新页面后内存清空一切归零。如果想让数据保留必须使用浏览器的localStorage存储能力或者接一个后端数据库而这一步需要你在需求里明确提出。所以从第一天起就要建立两个认知“能运行”不等于“已完成”。AI 给出的第一个版本通常是最小可用版本离完整产品还有距离。AI 是替你写代码不是替你思考需求。你漏掉的数据持久化需求AI 不会自动帮你想全。1.2 vibe coding 的准确定义vibe coding 的直译是“氛围编程”或“感觉式编程”它是一种以自然语言为主要“编程语言”的开发方式。在这个模式下你不再逐行手写语法而是通过对话描述你想要什么、希望怎么改、遇到什么报错。AI 模型负责生成代码、调整页面、解释错误甚至帮你优化设计方案。人的角色从“写代码的人”变成了“提需求、做验收、给反馈的人”。vibe coding 的几个核心特征语言驱动用中文或英文描述需求AI 生成代码。即时反馈生成 → 运行 → 反馈 → 再生成形成闭环。上手门槛低不需要先学完一门编程语言也能做出能跑的东西。但依然需要人需要你判断结果对不对需要你描述清楚目标也需要你对数据和隐私负责。换句话说vibe coding 不是“编程的终结”而是“编程入口的平民化”。它降低了从想法到产品的门槛但没有取消思考这个环节。1.3 它和传统编程、低代码有什么区别为了让你更清楚 vibe coding 的定位我用一个表格对比一下传统编程、低代码和 vibe coding对比维度传统编程低代码/无代码vibe coding主要操作手写代码拖拽组件、配置流程用自然语言描述需求AI 生成代码对开发者的要求语法、算法、调试能力懂业务建模和数据流会表达需求 会验收结果上手门槛高中低低但需要学“如何提问”灵活性最高受限取决于 AI 能力和上下文适用场景复杂业务系统、底层框架企业内部应用、表单流程原型验证、个人工具、教学练手典型风险开发周期长平台绑定结果不确定需要人工把关其实它们并不是对立关系。实际项目里三者完全可以混合使用用 vibe coding 快速验证原型用低代码搭建管理后台用传统编程处理核心业务逻辑。2. 开始前先花 10 分钟准备环境很多零基础的人一听到“写代码”就自动联想到复杂的开发环境。但实际上体验 vibe coding 需要的准备工作很少。2.1 选择一个顺手的 AI 工具目前市面上能帮你 vibe coding 的工具大致分三类对话式通用大模型直接在对话框里向 AI 要代码适合零基础因为你只需要打字。常见的有各类通用 AI 助手。IDE 内置 AI 编程助手例如 Cursor、GitHub Copilot、通义灵码等集成在代码编辑器里适合边写边改也适合开发者使用。网页/应用生成平台通过描述直接生成界面甚至可部署的应用例如 Vercel 旗下的 v0 这类工具适合快速做原型。零基础用户最推荐从第一类入手。原因很简单不需要安装任何开发工具也不需要理解“工程结构”只要会打字就能开始。需要提醒的是这些工具迭代非常快界面、模型能力、配额规则都在变化。你不需要纠结“哪个最强”先随手选一个能对话的跑通一次完整流程比反复对比工具更有价值。2.2 零基础的最小工具清单以下是体验 vibe coding 的最小工具清单建议先准备齐工具作用说明浏览器运行 HTML 页面、查看效果Chrome 或 Edge 均可需要支持 F12 开发者工具AI 对话工具生成代码、解释报错、迭代修改注册一个能对话的 AI 工具即可本地文件夹保存项目文件建议一个项目单独建一个文件夹文本编辑器查看和修改代码记事本也能用但推荐 VS CodeGit版本备份和回滚可选进阶后再学这里要特别强调一点对于完全零基础的人不要先花两周去学 HTML、CSS、JavaScript 基础再开始。vibe coding 的核心体验就是“先做出来再理解”。等你做出了第一个页面再让 AI 解释每一行代码学习效率会高很多。2.3 版本与安全说明本文的实战案例使用纯 HTML CSS JavaScript不需要安装依赖也不需要后端服务任何现代浏览器都可以直接运行。AI 工具版本差异较大本文不限定具体工具也不给具体版本号。你需要以你当前使用的工具界面为准但核心思路是通用的。另外开始之前请记住三条安全原则不要向 AI 发送真实敏感信息比如身份证号、银行卡、密码、家庭住址等。练习阶段一律使用假数据。第三方平台要最小授权注册账号时不需要授权的权限一律不点。部署到公网前先想清楚一旦部署上线页面上的内容就可能被其他人访问到千万不要把含密钥或隐私的东西放上去。3. 掌握 vibe coding 的核心工作流vibe coding 看似随意但有一套稳定的工作流。把它拆开之后你会发现它跟正经软件开发流程没有本质区别需求 → 设计 → 编码 → 测试 → 迭代。3.1 把需求“说成人话”vibe coding 的第一步是写提示词也就是把需求描述清楚。很多人第一次用 AI 写代码时只会说“帮我做个网站”这种描述太模糊AI 只能生成一个“看起来很通用”的页面自然大概率不符合你的预期。一个比较完整的提示词建议包含五个要素角色让 AI 扮演什么角色比如“前端工程师”“Python 开发”。背景这个项目给谁用、解决什么问题。功能清单把要实现的功能逐条列出来。技术约束比如“只用一个 HTML 文件”“数据保存到本地”“不需要后端”。输出要求比如“先给完整代码再给运行说明最后给注意事项”。下面是一份可以直接复制修改的提示词模板请扮演一名熟悉 HTML/CSS/JavaScript 的前端工程师。 背景我要做一个家庭记账工具使用者是完全不懂编程的家人。 需求 1. 页面只有一个 HTML 文件CSS 和 JavaScript 内联在文件里 2. 能添加收入和支出记录包含金额、分类、日期、备注 3. 能展示当前余额、收入总金额、支出总金额 4. 记录要保存在浏览器的 localStorage 中刷新页面不丢失 5. 界面简洁、温暖适合手机和电脑浏览。 输出要求 - 先给出完整代码 - 再简单说明我该怎么运行它 - 最后用 3 条以内列出需要注意的点。你可以看到这个提示词并不神秘核心就是“把需求说清楚”。越是含糊的需求AI 越只能给你一个“平均水准”的答案。3.2 先让 AI 生成最小可用版本第一次尝试时不要一股脑要求 AI 一次性实现所有功能。正确的做法是先让 AI 生成一个最小可用版本也就是 MVP。比如你想做“记账工具”第一轮只需要让它实现能添加记录能显示记录列表能算出余额数据不丢失。其他的高级功能比如图表统计、月度汇总、多用户登录全部留到第二轮以后再说。这样做的好处是页面复杂度低出错概率小你能快速看到真实效果建立信心每一轮迭代方向明确AI 不容易“改崩”。3.3 运行、反馈、再迭代拿到 AI 生成的代码后先运行起来然后进入“反馈-迭代”循环。反馈时建议遵循三条原则原则一一次只提一个核心诉求。像“帮我加一个分类顺便把样式改成蓝色再把背景改成渐变”这种多任务反馈AI 容易顾此失彼。一次一处修改验证通过后再提下一个。原则二把“最新完整代码”放进上下文。AI 聊天窗口的上下文是有限的。如果你让 AI 改了好几轮之后它可能已经记不清当前代码变成什么样了。这时候更好的做法是开一个新对话把当前最新的完整代码贴进去然后说“基于这份代码帮我修改”。原则三描述现象而不是猜测原因。当你发现页面出现报错时直接把错误信息完整复制给 AI而不是先给出自己的猜测。例如这样说运行后报错ReferenceError: xxx is not defined 请先定位是哪一行代码导致的解释为什么报错再给出修复后的完整代码。3.4 让 AI 当你的老师对零基础的人来说vibe coding 最大的隐藏福利是AI 几乎是一个 24 小时在线的私人老师。你可以随时让 AI 做这些事情“请逐行解释这段代码是什么意思。”“localStorage 是什么请用大白话讲给我听。”“这段代码里哪些部分容易被优化为什么”“如果我要在这个页面里加一个删除功能应该怎么做”这一点非常重要。因为 vibe coding 如果只停留在“让 AI 生成代码”你只是一个代码搬运工。但如果你每次都追问一句“为什么”你的编程思维会提升得很快。4. 实战带老婆做一个“家庭预算小账本”下面进入完整实战环节。我们以“家庭预算小账本”为例从头走一遍 vibe coding 的完整流程。4.1 第一阶段描述需求并生成页面我老婆的第一版提示词太简单效果不好。后来我们按本文 3.1 节的模板重新组织了一遍需求AI 给出了一个完整可用的页面。经过几轮微调之后我们得到了一段类似下面的代码。这里要说明一下AI 第一次生成的代码可能没有这么工整也可能存在细节问题。下面这段是经过整理后的可用版本你把它保存为family-budget/index.html就能直接运行。4.2 完整可运行代码文件路径family-budget/index.html!DOCTYPE html html langzh-CN head meta charsetUTF-8 / meta nameviewport contentwidthdevice-width, initial-scale1.0 / title家庭预算小账本/title style * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: PingFang SC, Microsoft YaHei, sans-serif; background: #fdf6ec; color: #333; padding: 24px; } .container { max-width: 640px; margin: 0 auto; } h1 { text-align: center; color: #b76e3c; margin-bottom: 16px; } .summary { display: flex; gap: 12px; margin-bottom: 20px; } .card { flex: 1; background: #fff; border-radius: 12px; padding: 16px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); text-align: center; } .card .label { font-size: 13px; color: #999; } .card .value { font-size: 22px; font-weight: 600; margin-top: 6px; } .card.income .value { color: #3a8b5c; } .card.expense .value { color: #c0392b; } .card.balance .value { color: #2c3e50; } .form { background: #fff; border-radius: 12px; padding: 16px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); margin-bottom: 20px; } .form-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; } .form-row select, .form-row input { flex: 1; min-width: 120px; padding: 8px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px; } button { cursor: pointer; border: none; border-radius: 8px; background-color: #b76e3c; color: #fff; padding: 8px 16px; font-size: 14px; } button:hover { opacity: 0.9; } .list { background: #fff; border-radius: 12px; padding: 16px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); } .list-title { font-weight: 600; margin-bottom: 12px; } .record { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid #f0f0f0; } .record:last-child { border-bottom: none; } .record .info .category { font-size: 13px; color: #888; margin-top: 2px; } .record .amount { font-weight: 600; } .record .amount.income { color: #3a8b5c; } .record .amount.expense { color: #c0392b; } .record .del { background: #eee; color: #555; padding: 4px 10px; border-radius: 6px; font-size: 12px; } .empty { color: #aaa; text-align: center; padding: 20px 0; } /style /head body div classcontainer h1家庭预算小账本/h1 div classsummary div classcard income div classlabel收入/div div classvalue idincomeTotal0.00/div /div div classcard expense div classlabel支出/div div classvalue idexpenseTotal0.00/div /div div classcard balance div classlabel余额/div div classvalue idbalance0.00/div /div /div div classform div classform-row select idtype option valueincome收入/option option valueexpense支出/option /select select idcategory option valuesalary工资/option option valuefood餐饮/option option valuedaily日用品/option option valuetransport交通/option option valueother其他/option /select /div div classform-row input typenumber idamount placeholder金额 min0 step0.01 / input typetext idnote placeholder备注可选 / input typedate iddate / /div button idaddBtn添加记录/button /div div classlist div classlist-title最近记录/div div idrecordList/div /div /div script const KEY family_budget_records; // 读取本地记录 function getRecords() { try { return JSON.parse(localStorage.getItem(KEY)) || []; } catch (e) { return []; } } // 保存记录 function saveRecords(records) { localStorage.setItem(KEY, JSON.stringify(records)); } // 金额格式化 function formatMoney(value) { return Number(value).toFixed(2); } // 渲染列表和汇总 function render() { const records getRecords(); const incomeTotal records .filter(item item.type income) .reduce((sum, item) sum Number(item.amount), 0); const expenseTotal records .filter(item item.type expense) .reduce((sum, item) sum Number(item.amount), 0); document.getElementById(incomeTotal).textContent formatMoney(incomeTotal); document.getElementById(expenseTotal).textContent formatMoney(expenseTotal); document.getElementById(balance).textContent formatMoney(incomeTotal - expenseTotal); const list document.getElementById(recordList); if (records.length 0) { list.innerHTML div classempty还没有记录先加一笔吧/div; return; } const sorted [...records].sort((a, b) (b.date || ).localeCompare(a.date || )); list.innerHTML sorted.map((item, index) { const amountClass item.type income ? income : expense; const typeText item.type income ? 收入 : 支出; return div classrecord div classinfo div${item.note || typeText} · ${item.category}/div div classcategory${item.date || }/div /div div span classamount ${amountClass} ${item.type income ? : -}${formatMoney(item.amount)} /span button classdel>请基于我提供的以下代码进行修改不要重写整个页面 1. 点击“删除”按钮时先弹出 confirm 确认框确认后才删除 2. 删除后列表和顶部汇总都要同步更新 3. 只给出需要修改的代码片段。这里的关键是“基于现有代码修改”和“只给出需要修改的代码片段”。如果你让它重写整个页面很容易把之前调好的样式和功能弄乱。实际上上面 4.2 节的代码已经包含了删除确认功能。你在自己的项目里可以从“第一版不带删除确认”的代码开始再让 AI 帮你加上这个功能体验一次完整的迭代过程。4.5 可选部署到线上Vercel如果你想把做好的页面分享给家人朋友可以部署到 Vercel 这类静态托管平台。第一种方式是使用命令行部署适合愿意多了解一点工具链的同学# 如果电脑还没有安装 Node.js需要先安装 Node.js LTS 版本 npm install -g vercel # 进入项目目录 cd family-budget # 执行部署第一次会提示登录和项目配置 vercel如果没有安装 Node.js也可以直接在 Vercel 网站上传项目文件夹或者在 GitHub 建一个仓库、导入仓库。不同平台的操作入口变化较快以当时官网提示为准。部署完成后平台会生成一个公网地址打开就能访问。部署前再提醒一次先用假数据测试不要把任何真实的个人隐私数据写在页面上。5. 新手常踩的 5 个坑常见问题与排查零基础玩家在 vibe coding 过程中遇到下面这五类问题最多。5.1 刷新页面后数据全没了这是最经典的问题我老婆第一次就踩中了。原因AI 生成的代码把数据保存在内存变量中刷新页面后变量被清空。解决要求 AI 把数据存储切换到localStorage。你可以直接说现有数据的保存方式刷新后会丢失请改用 localStorage 保存数据并在页面加载时从 localStorage 恢复数据。如何避免第一次提需求时就把“数据要保存在本地刷新不丢失”写进功能清单。5.2 AI 越改越乱功能互相冲突原因在同一个对话里修改了太多次上下文过长AI 忘了之前的改动或者是多次叠加需求导致代码逻辑冲突。解决开一个新对话把当前最新完整代码粘贴进去然后说“基于这份代码修改”。每次只提一个改动点验证通过后再继续。如何避免养成“一个项目分多个对话”的习惯不要在一个聊天窗口中无限修改。5.3 代码报错看不懂错误信息原因零基础用户对错误信息里的变量名、堆栈、术语感到陌生。解决不要自己硬扛。把完整报错信息复制给 AI并附上相关代码运行后报错ReferenceError: xxx is not defined 这是我的完整代码请告诉我错在哪一行为什么错以及修复后的代码。如何避免学会打开浏览器的 F12 开发者工具切到 Console 面板把红色报错复制下来。这是你最重要的排错手段。5.4 生成的页面和想象中差别很大原因