“vibe coding”这个词从去年开始频繁出现在各种技术帖里。前半段热度很高后半段褒贬不一多数人觉得这是“糊弄式编程”的遮羞布。但我不这么看——它更像一种新的交互方式你把脑子里模糊的画面原原本本描述给AI它替你敲出第一版方案你再根据结果不断“vibe”回去。我就是靠着这种方式做出来一个真正每天在用的记录类小程序。全程没有系统学过前端框架也没有找别人帮忙前后花了两个晚上。今天这篇不谈高深理论就老老实实把过程、代码、翻车现场和对AI编程的边界思考都写一写想尝试vibe coding的朋友可以少踩几个坑。1. 一个“懒人需求”催生出来的小程序雏形1.1 我到底想要什么极简的每日三件好事这个项目的起点特别朴素。有一阵子我情绪状态很差每天总觉得什么都没做成睡前翻手机全是自我否定。一个朋友知道我这种情况后给了一个很土但有效的建议——每天睡觉前写下三件当天让你觉得“还行”的小事小到“地铁上居然有座位”都算数。我照做了在备忘录里写了大概半个月但问题很快就暴露了备忘录是按日期连续滚动的回看时要不断往上翻写着写着就懒得翻有时候挤在最后一行情绪上头时根本找不到昨天写了什么。这时我冒出个念头为什么不做一个专门记录“每日三件好事”的小页面最好是打开就是当天日期三种分类填空保存退出第二天再看就是新的一页。过了零点自动归档平时还能按日期往回看。最好是打开即用没有任何登录、弹窗、新手引导。这个需求听起来很小但市面上现成应用不是功能太重就是UI花里胡哨符合极简诉求的几乎没有。我又不是专业开发者前端只能算半吊子手写界面和交互逻辑要很长时间。也就是这时候我又刷到了几篇vibe coding的安利帖里面有人说“你把想要的东西描述清楚了剩下的是AI的事”。我认真想了想这个需求足够简单、边界足够清晰拿来练手正合适。1.2 为什么没有先画原型直接上手“vibe”按照常规开发流程应该先画原型、理清数据结构、定好页面层级然后再写代码。哪怕是一个小工具有原型至少能避免思路乱窜。但我很清楚自己这个项目的情况用户只有我一个人核心流程只有“输入三条小事、保存、回看历史”三个动作页面形态基本不需要纠结。在这种前提下如果还按老一套流程来反而会消耗我本来就不多的热情。所以我选择了一种相对“有控制的偷懒”先不动手画任何原型图先打开AI编码助手把脑子里的场景尽量详细地描述一遍让它给出第一版。这里我要特别强调“尽量详细”四个字而不是只丢一句“帮我写个小程序”。和AI协作的第一条纪律就是你必须在第一次对话时尽量说清目标、限制和不要什么不然后面一定会有连串返工。我当时的做法是先用口语化文字写了一段“需求说明书”包括页面顶部显示今天日期、中间三个输入框、下方一个保存按钮、历史列表按日期倒序排列、不需要用户登录、不需要社交功能、不要多余动画。然后把这段文字原封不动发给AI让它生成一个小程序页面。它问我“是否要分享到朋友圈”“是否需要数据导出”我没想到这部分就直接补了一句“都不要我只需要极简记录。”2. 与AI编码助手的第一轮“同声传译”2.1 我给出的第一版提示词以及AI回给我的东西这里先把当时最关键的提示词贴出来虽然有点长但很有参考价值请帮我写一个小程序页面用来记录每天三件开心的小事。 页面顶部显示今天日期下面有三个输入框分别对应“第一件小事”“第二件小事”“第三件小事”再下面是一个大的“保存”按钮。点击保存后把今天三条记录和日期一起存储起来下次打开页面能直接看到今天是否已经写过。 历史记录按日期倒序展示允许我查看以前某一天写了什么但不需要编辑和删除。 这是个人自用工具不需要登录不要社交分享不要任何动画。界面保持最简洁的风格即可。AI的第一版速度很快十秒左右生成了一整个页面骨架大致结构是导航栏标题、日期占位、三个textarea、一个按钮底部还有一个“历史记录”区域。看起来逻辑完整但仔细一读问题立刻暴露出来——它擅自加了一个“分享”按钮和一个“编辑”按钮。原因很简单它在训练数据里看到过太多标准模板默认了“记录类小程序分享和编辑是标配”。我明明说了不要它还是往里面塞这就是为什么提示词里的“不要”和“只要”一样重要而且最好是负向清单和正向清单同时写。2.2 数据存储逻辑从全局变量到本地缓存的过程第一版跑通之后我立刻发现一个致命问题一旦关闭页面重新打开当天写好的三条小事全都不见了。去看AI生成的代码发现它把记录存在了一个全局数组里类似这样let recordList []; // 内存数组 function saveRecord(newItem) { recordList.push(newItem); }这个写法在页面生命周期内确实能用但小程序的页面状态一被系统回收内存数据就跟着灰飞烟灭。我起初以为是自己操作姿势不对反复试了几次才确认AI默认选择了最简单的内存存储因为它没意识到“下次打开还在”这个隐藏需求。所以我在对话里补了一句“请把记录持久化到本地缓存关闭小程序再打开也要保留。”AI很快在代码里加入了本地缓存读写核心逻辑和下面这段代码思路一致const STORAGE_KEY daily_good_things; function loadRecords() { const cached wx.getStorageSync(STORAGE_KEY); return cached ? JSON.parse(cached) : {}; } function saveRecords(records) { wx.setStorageSync(STORAGE_KEY, JSON.stringify(records)); }避免直接使用具体平台API的风险我把上面的代码当作示意来理解就好。核心思路是用一个固定的key把所有记录序列化成字符串写进本地存储读取时再反序列化回对象。这个过程并不复杂但却是整个小程序能否“长期可用”的分水岭。如果没有这个补充我做出来的东西本质上就是一朵昙花打开一次就没了。2.3 交互细节点击“记好了”之后发生了什么保存按钮的事件逻辑是整个小程序里最值得抠细节的部分。AI第一版生成的是一个非常直接的做法点击按钮后读取三个输入框的值拼接成一个对象push到数组然后清空输入框。逻辑看着顺但有一个典型漏洞——没有考虑用户连续点击按钮的情况。假设用户手滑点了两次保存同一天就会出现两条一模一样的记录。我要求AI修掉这个问题后它给出的处理方式也很有代表性先判断当天是否已经存在记录如果存在就直接提示“今天已经记录过了”。同时把保存按钮在点击后暂时置灰。我自己又加了一道校验三个输入框都必须有内容且“去掉首尾空格后不能为空”。最终保存流程大概是这样的function handleSave() { const first inputFirst.value.trim(); const second inputSecond.value.trim(); const third inputThird.value.trim(); if (!first || !second || !third) { showToast(请不要留空写下至少一条也可以); return; } const today formatDate(new Date()); const records loadRecords(); if (records[today]) { showToast(今天记录过了明天再来吧); return; } records[today] { first, second, third, createdAt: Date.now() }; saveRecords(records); renderHistory(); clearInputs(); showToast(已保存); }这段逻辑看起来不难但从AI原始版本到最终版本我们之间来回改了三轮。第一轮补了trim和空值校验第二轮补了当天唯一性判断第三轮才想到把按钮状态和提交动作串起来。每一步都很机械但也正是这些机械的小细节决定了一个工具好不好用。3. 真机实测之后“能跑”和“能用”的距离3.1 跨天的日期归属bug晚上写的内容跑哪去了在开发者工具的模拟器里一切看起来都正常。但当我把它安装到真机上尤其是真正连续用了两天之后发现了一个隐蔽的bug每天晚上22点以后保存的记录第二天早上打开时在历史列表里找不到。一开始我以为是缓存没写进去后来一步步排查才发现问题出在日期生成上。AI最初的版本是在“加载页面”时去取一次当前日期然后用这个日期作为保存的key。如果用户前一天晚上打开过页面没有写东西第二天凌晨继续挂着这个页面再输入内容并保存时它用的还是昨天的日期于是新记录被写进了昨天那一条今天看起来就是空的。这算是典型的“生命周期”错误AI看不见页面在后台存活多久更不会意识到日期应该以“保存动作触发的时刻”为准而不是“页面加载的时刻”。我后来让AI改成了在点击保存时重新取一次当前时间并同时记录日期字符串和时间戳。修完之后还要删除错误写入的旧数据这一步AI没法替我做只能自己写清理逻辑去更新本地缓存。3.2 空值和超长输入AI写校验经常只顾一半AI生成校验逻辑时有一种通病它总是会先检查字段是否为空却经常忘记处理“清一色空格”和“过长的文本”。我在测试时特意粘贴了一段两百多字的废话进去结果整个记录卡片被撑得变形保存下来的文本也把历史页面的间距弄得乱七八糟。于是我们又修改了一次保存逻辑。这次我特别强调所有输入内容先trim再判断长度超过200个字符就不允许提交。AI帮我在页面上加了两个限制一个是在输入框上直接加最大长度属性另一个是在保存时再做一次检查。这里我学到的经验是校验必须分两层一层在用户界面层另一层在数据写入层。界面层限制是为了不给用户添麻烦数据写入层限制是为了防止脏数据污染历史记录。3.3 我让AI连续改了三个小需求结果它把老功能改丢了这个阶段是最让人血压升高的一段。有了前两轮的成功经验我胆子大了一口气提了三个需求历史记录改成按月分组、增加一条“今天还没写”的状态提示、把保存按钮从圆角改成直角。AI确实把新功能都加上了但同时把之前的“当天只能记录一次”逻辑弄丢了。我在真机上试了两次发现一天能存三条记录进去检查代码才看到它是在重构时把原来的判断条件覆盖掉了。这就像是在一堆积木上不断往上摆新积木只要底座不稳最上面的一定会晃。AI不会记得它之前生成过什么也不会主动做回归测试。后面我学乖了每让它改一个需求就先让它把“本次变更影响到了哪些函数”列出来再把它改过的代码逐段复查一遍。这种模式下AI更像一个打字速度很快的初级程序员我则成了那个盯着它改作业的助教。4. “AI生成的代码我敢不敢上线”一条自己的验收清单4.1 我会重点检查的六个地方做完这版小程序之后我认真想过一个问题如果把它发布给更多人使用我目前的技术能力能不能保证它的稳定性答案是不能。因为AI生成的代码没有经过系统的工程保障所以至少得有一份属于自己的验收清单。下面这六条是我根据这次实践总结出来的适用范围不限于本案例任何用AI辅助写小程序的人都用得上。检查点为什么重要这次踩到的情况数据持久化确保关闭页面、清缓存后数据不丢AI第一版用了内存数组刷新就丢输入校验空值、空格、超长文本都要拦下来三行全空提示不统一超长文本让布局崩坏日期边界跨天、跨月、重复提交的边界行为要稳跨天记录归到了前一天异常处理缓存读写失败时不能白屏没有catch一旦解析失败直接崩溃重复操作按钮连点、重复保存必须防住没有当天唯一性判断前可重复保存敏感信息密钥、token不能写死在代码里个人工具没涉及但发布前必须检查这张表其实帮我理清了一个很重要的观念AI可以快速生成大量看起来正确的代码但“看起来正确”和“真正正确”之间隔着的就是这些细节。每一个检查点背后都是一个用户真实会遇到的痛点。4.2 “让AI把代码复述一遍”比“让它继续改”更有用迭代到后半程我发现一个超级好用的方法与其不断要求AI修改代码不如先让它把某一段代码的逻辑用自然语言讲给我听。比如我会问“你这份代码里保存按钮的点击处理函数一共分几个步骤如果某个步骤失败了会怎么样”AI在复述的过程中往往会自己发现自己代码里的漏洞甚至会主动帮你改掉。有一回我让它复述“历史记录是如何排序的”它解释完说“目前是按日期字符串排序但如果日期格式不统一可能导致排序错误。”这个隐患我根本没想过于是顺势让它把这个修复也做了。让AI做“代码讲解”本质上是在用它的自然语言理解能力辅助进行代码审查。你不需要完全看得懂每一行代码但你需要听得懂它解释出来的逻辑你最好还能追问一句“这里真的不会出问题吗”很多时候追问这一句比让它多写十个功能都值钱。4.3 哪些测试不能省至少要在真机跑一遍模拟器上的“正常运行”在真机上往往会出现一堆意料之外的问题。我遇到最典型的三个一是真键盘弹出时会把输入框和保存按钮盖住手指点保存要先收键盘二是不同的系统字体大小下记录卡片的高度会参差不齐三是本地缓存在卸载重装后会瞬间清空这在模拟器上很难复现。所以我的建议非常直接哪怕是个自用的小工具也必须留出半天时间做真机全流程测试。从安装、首次启动、首次填写、保存退出、重新打开、跨天查看一直测到断网状态下的表现。只有把这些场景都走一遍你才敢说自己体验过自己做的产品。5. 写在最后vibe coding教会我的几件事5.1 vibe coding 的“vibe”不是乱来很多人以为vibe coding就是“我随便描述两句AI自己发挥我躺着收代码”。我自己试过之后才明白完全不是这么回事。你要把需求拆分得足够清楚把边界条件考虑得足够周全把“不要什么”说得足够明确AI才能给你一个接近可用的东西。真正的vibe是在你已经知道目的地的情况下让AI帮你开车而不是你在后座睡觉它想开去哪就去哪。5.2 它适合做个人工具和原型验证但别指望一步登天如果你只是想做一个小程序给自己用或者给小组内部做原型演示vibe coding会给你带来非常高的效率。但如果你想做出一个面向大众、涉及多人数据同步、支付、账号体系的商业产品AI生成的代码就只是一个粗糙的起点后面需要补的东西比它生成的部分多得多。我这次做的极简记录工具所有数据都在本地所以才能靠AI两晚搞定。一旦涉及后端复杂度会指数级上升个人不太推荐在没有工程储备的情况下硬上。5.3 真正值钱的能力仍然是判断力和把控力这次体验之后我最大的感受不是“AI让我不用学编程了”而是“AI让我必须更要搞明白我要的是什么”。和AI协作的整个过程中我一直在做判断哪些功能是多余的、哪些数据要持久化、哪个边界条件不能放过。这些判断不依赖很深的代码功底但依赖你对用户场景的理解和对常识的坚持。一个完全不懂业务的人即使AI代码写得飞快也很难判断对不对。最后再分享一个自己后来的习惯每次让AI动手前先写下“必须实现”和“坚决不要”两列清单每次让AI改完代码先让它自测一遍再让它输出一分钟以内的变更说明。这两条规矩看着简单却能把vibe coding 的翻车概率降低一半以上。这个小程序现在还在我手机里每天睡前写下三件小事已经坚持了两个月。它代码谈不上优雅但每一次打开都在提醒我一个人最重要的作品不是代码本身而是那些被你记录下来的具体生活瞬间。