Vibe Coding 保姆级入门：不会写代码，我用 AI 做出了能上线的产品

不写一行代码，把「杭州一日游规划器」从一个空文件夹做到能跑通、能搜索、能排行程的完整 Web 应用——这是 B 站 UP 主在本期视频里实际演示的 Vibe Coding 流程。视频以自身六次翻车为代价，总结出了「想、框、存、抓、喂」五个关键动作，每一段都配有真实的对话截图和排错思路，堪称一份可跟着做的操作手册。

Vibe Coding 到底是什么

这个说法最早由 Andrej Karpathy 在 2025 年初提出，核心意思是：顺着感觉写，甚至忘掉代码本身。你说人话，AI 写代码；你要什么，跑起来看；告诉它哪儿不对，它来写、它来改。

但 UP 主在视频里泼了一盆冷水：AI 改得越快，翻车也越快。这次他一共翻了六次，其中最隐蔽的一次差点让整个行程推荐逻辑出错。所以 Vibe Coding 不是靠感觉，而是靠你把话说清楚。

工具方面，他使用的是 Claude，也强调换成别的 AI 编程工具流程一样适用。整个演示从「新建一个文件夹」开始，里面除了一份 key 配置什么都没有。

Andrej Karpathy 是特斯拉前 AI 总监、OpenAI 创始成员之一，2024 年创立 AI 教育公司 Eureka Labs。他在 2025 年初的一条推文中首次提出 Vibe Coding 概念，描述一种「完全沉浸于氛围、拥抱指数级生产力、甚至忘记代码存在」的开发方式。这个词随后被《柯林斯词典》评为 2025 年度词汇，并引发广泛讨论。其核心主张是：开发者用自然语言描述意图，AI 负责生成与迭代代码，人类退居「指挥者」角色。不过 Karpathy 本人也提醒，这种方式适合快速原型和低风险项目，对安全性、正确性要求高的生产系统仍需传统工程审查。理解这一背景，就能明白为什么视频里 UP 主要反复强调「把话说清楚」——Vibe Coding 的上限取决于你表达需求的精度。

想：先让 AI 问你，别让 AI 猜

第一句话是：「我想做给城市周边一日游规划器，先别写代码，先问我几个问题，把需求和数据接口确认清楚。」

AI 果然没有急着动手，而是抛回一连串选择题：地点数据用哪家？规划要做到哪几步？目的地怎么推荐？前端用什么技术？

UP 主逐项点选：地图用高德，天气用和风，先不做复杂地图，只做桌面端。他说这一步看着没写代码，其实是在帮自己省掉后面一大堆返工。AI 写的是快，可它不会替我决定产品到底要什么，所以第一个字就是「想」——先想清楚，别让 AI 猜。

高德开放平台和和风天气是视频里选用的两个第三方数据接口。高德提供地图、POI（兴趣点）搜索、地理编码、路径规划等能力，开发者注册后申请 Web 服务 API Key 即可调用，免费额度通常够个人项目使用；和风天气则专注气象数据，提供实时天气、逐小时预报、生活指数等接口。两者都需要在请求中携带 Key 进行鉴权。UP 主选用它们的原因一是国内数据较全，二是都有稳定的免费档位。但要注意，这类 Key 如果直接写在前端代码里，任何访问者都能通过浏览器开发者工具看到，存在被盗刷风险，这也是视频最后「三道护栏」中第一条要解决的隐患。

框：告诉 AI 路走哪条、边界在哪里

确认完需求，AI 兴奋地直接写了一大套多文件的完整版。UP 主赶紧叫停：「就用最简单的网页三件套，先做成一个文件，地点用高德，天气用和风，第一版只做桌面浏览器。」

这就是第二个字「框」——给 AI 划定路线和边界。收到明确指令后，AI 把多余的目录删掉，收成一个 index.html。

边界定好之后，UP 主仍然只让它做一件事：输入程式，把景点列出来，天气先不做，界面也先别美化。AI 收到后只做这一件，自己开浏览器去测。第一次打开显示的是旧页面，它自己排查发现是浏览器缓存，再测一次，输入「杭州」返回 25 个景点，第一条是杭州基督教会崇义堂。

页面是丑了点，黑底上的字都看不太清，但「程式—坐标—景点」这条路是真的通了。能跑就行，先证明最关键的那条路走得通，剩下的后面一块一块加。

存：每做好一步，就留一个能回去的地方

功能没急着加，UP 主先做了一件事——存档。他跟 AI 说：「帮我用 Git 提交一版，备注写"景点搜索可用版"。」

他把 Git 比作游戏存档，并提到一个真实案例：有人闭关两周做项目全程没备份，文件一换两周白干。这次存下了 A98 开头的版本，第三个字就是「存」——每做好一步就留一个能回去的地方。

存好之后，才把看不清的字修好，然后开始「找功能」，而且一次只加一样。

• 第一样：山内地点，补上评分、人均、车程，他换了高德的新接口，一类拿到 25 条。中间有一类突然显示没有结果，自己一查是参数传错了。
• 第二样：能点开的卡片，这里没有用户评论，只放接口真实给的信息。
• 第三样：天气体感内格，显示成了 undefined，字段名写错，一改就好，晴 24 度。
• 第四样：排行程，上午景点、中午饭店、下午休闲，只用真实拿到的地点，下雨就给室内备选。他先把规则写清楚再动手，第一次排出来上午去的是一座教堂，西湖边的景点更是一座教堂，根本进不来。换了搜索关键词，上午才排上流浪文音。

Git 是目前最主流的分布式版本控制系统，最初由 Linus Torvalds 为管理 Linux 内核开发而创建。它的核心价值在于：每次提交（commit）都会为当前代码状态拍一张快照，并记录是谁、在什么时候、改了什么。开发者可以随时回滚到任意历史版本，也可以创建分支并行实验而不影响主线。视频里 UP 主把 Git 比作「游戏存档」非常贴切——在 Vibe Coding 场景下，AI 一次改动可能涉及多个文件，如果没存档，一旦引入难以定位的 Bug，就可能被迫从零重来。常用命令只有几条：git init 初始化仓库、git add . 暂存改动、git commit -m "备注" 提交版本。对非专业开发者来说，记住「每完成一个可运行的小功能就提交一次」这个习惯，比记命令更重要。

抓：把现场交代清楚，AI 才知道从哪下手

四样功能凑齐了，可最关键的翻车也来了。刷新重新搜一遍「杭州」，行程里写着上午去流浪文音，可往下一看，景点第一名是星辰音乐喷泉，流浪文音被挤到后面去了。

这时候只说一句「顺序不对」可不行。UP 主把三件事说清楚：怎么出的错、我看到了什么、我想要什么。有报错就复制，界面不对就截图。他写的是：「输入杭州后，行程推荐的地点和下面的卡片对不上，我想要的是行程里那三个地方排在美类第一章，再标上十段。」

AI 很快找到了原因：不是两份数据，是同一份数据排了两次——卡片按距离排，行程按评分点车程打分。改成先把行程三站选出来，再把它们顶到美类第一章。刷新再看，上午流浪文音、午餐上房火锅、下午上城区体育中心，全都排在第一位，还带上了十段标签。

第四个字「抓」，就是抓住现场细节，AI 才知道从哪下手。

喂：把真正有用的信息喂够

Bug 修好了，UP 主让它「好看一点」。但他没说「帮我美化一下」这种太空的话，而是给了一串具体指令：

天气放顶部，三类分组，评分、人均、营业时间、距离优先，蓝色科技风，配一点层，每一类只留五个，标上号，整体照 iOS 的毛玻璃来。

你看每一句要求都能在页面上找到对应的变化。AI 改完还自己核对了一遍，行程三站和每一类的第一章对得上。第五个字「喂」，就是把真正有用的信息——参考图、截图、配色，还有你不喜欢什么——都可以直接丢给它。

iOS 毛玻璃效果（Frosted Glass）指苹果在 iOS 7 之后大量使用的半透明模糊视觉风格，技术实现上通常依赖 CSS 的 backdrop-filter: blur() 属性，让背景内容在元素后方产生模糊朦胧感，配合半透明白色叠加，营造出层次分明的「玻璃面板」视觉。这种风格对前端来说并不难写，但关键在于「模糊半径、透明度、边界阴影」几个参数需要反复微调才好看。UP 主在提示词里直接点名「照 iOS 的毛玻璃来」，等于给 AI 提供了一个明确的美学锚点，比说「做得好看点」有效得多。这也印证了「喂」的核心：把抽象要求翻译成 AI 能直接映射到代码的具象参照。

能跑不等于能上线：三道必须补的护栏

页面好看了，功能也齐了，那它能直接上线吗？UP 主从头完整跑了一遍，输入杭州，天气、行程、出行建议都出来了，三类卡片的第一章都对得上，行程点开还有详情。

但他很清醒：能在我电脑上跑，不等于能直接上线。这一版的 key 还写在前端代码里，只能自己本地用。他列出三道护栏：

1. 密钥不能放在网页里，正式上线要挪到服务端去。
2. 接口要限次数，出错了要有兜底，不然可以被人刷爆，外部服务一出问题整个页面也跟着挂。
3. 修 Bug 只改最小范围，别顺手把没问题的地方也重写了。加功能就只加功能，修问题就只修问题，别把它们混在同一次对话里。范围越清楚，AI 给的结果越好，验证也越好回退。

最后复盘一下，想、框、存、抓、喂五个动作全部走了一遍，翻车六次全部修好，先跑通再长大，这才是能落地的 Vibe Coding。UP 主把方法和提示词都打包好了，评论区留言即可获取。