Web应用口述编程实战：1小时做出个人书签管理器（vibe-coding进阶实操）
上章5分钟搞定了批量重命名工具——热身结束。
今天来个真正有分量的：用口述编程做一个完整的Web应用。
不是玩具，不是半成品，是你真的会用的东西——个人书签管理器。
阿Lee为什么选这个项目？
- 每个人都有"收藏夹爆炸"的问题——浏览器里几百个书签，找的时候找不到
- 功能需求明确，适合SVC框架拆解
- 前后端都能练到，是个完整的Web应用
- 做完你自己就能用，不是写完就扔的demo
目标：1小时，从零到一个能用的书签管理器。
需求拆解：SVC框架起手
复杂项目不能一口气说完，阿Lee用SVC框架把需求拆成4步：
表格
| 步骤 | 内容 | 验收标准 |
|---|---|---|
| Step1 | 前端界面：添加/展示/搜索书签 | 能添加书签、看到列表、能搜索 |
| Step2 | 数据存储：LocalStorage持久化 | 关闭页面再打开，数据还在 |
| Step3 | 分类标签：打标签+按标签筛选 | 能给书签打标签，能按标签过滤 |
| Step4 | 导入导出：从浏览器导出→导入到工具 | 能导入Chrome书签HTML文件 |
每步做完验收，通过再走下一步。
Step1：前端界面
口述指令：
你是一个前端工程师，帮我做一个个人书签管理器的Web页面，功能：1）添加书签（标题+URL+描述）2）书签列表展示（卡片式布局）3）搜索框实时过滤书签。约束：只用HTML/CSS/JS，不用任何框架，单文件实现，界面要现代简洁，深色主题
等AI生成。大概15-20秒，它会给你一个完整的HTML文件，里面包含CSS和JS。
阿Lee拿到的第1版效果：
- 顶部搜索栏，输入关键词实时过滤
- 添加按钮，点击弹出表单
- 书签卡片列表，显示标题+URL+描述
- 深色主题，圆角卡片，看着挺舒服
验收：添加了3个书签，搜索过滤正常，列表展示OK ✅
但有两个小问题——添加书签的表单没有URL格式校验，而且卡片排列在手机上会挤成一团。
EMI迭代：
在上面的代码基础上做修改：1）给URL输入框加上格式校验，不是合法URL时提示用户 2）卡片布局改成响应式的，手机上1列，平板2列，桌面3列
20秒后拿到修改版，两个问题都解决了。
Step1验收通过✅
Step2：数据持久化
Step1有个致命问题——刷新页面数据就没了。书签管理器，数据必须持久化。
口述指令：
在上面的基础上加上数据持久化：1）用LocalStorage保存书签数据 2）页面加载时从LocalStorage读取数据 3）每次增删改书签后自动保存到LocalStorage 4）加一个删除书签的功能
阿Lee不需要重新描述整个项目——EMI框架的核心就是"在上面的基础上改"。
拿到代码后测试：
- 添加书签 → 刷新页面 → 数据还在 ✅
- 删除书签 → 刷新页面 → 确认删除 ✅
- 多次增删改 → 数据一致性检查 ✅
Step2验收通过✅
Step3：分类标签
书签多了，光靠搜索不够——你需要分类。
口述指令：
继续迭代：1）添加书签时可以选标签（从已有标签中选择，或创建新标签）2）书签卡片上显示标签 3）顶部加一个标签筛选栏，点击标签过滤对应书签 4）支持多标签筛选（同时选多个标签）
这一步改动比较大，因为标签功能涉及UI交互逻辑。阿Lee的建议是：改动大的时候，说清楚所有细节，别让AI猜。
所以我的口述指令把4个功能点全部列出来了，而不是说"加个标签功能"。
拿到代码后测试：
- 添加书签时选标签 ✅
- 创建新标签 ✅
- 标签筛选 ✅
- 多标签筛选 ✅
但发现一个问题——标签筛选和搜索框不能同时生效，选了标签后再搜索，搜索不生效。
EMI修复：
修复一个bug：标签筛选和搜索框应该同时生效。逻辑是：先按标签过滤，再在过滤结果中按搜索关键词过滤
修了，验收通过。
Step3验收通过✅
Step4：导入Chrome书签
这是最实用的功能——把你浏览器里几百个书签一键导入进来。
口述指令：
加上书签导入导出功能：1）导入：支持Chrome导出的书签HTML文件，解析出所有书签的标题和URL 2）导出：把当前书签数据导出为JSON文件 3）导入时自动检测重复书签（URL相同），重复的跳过不导入 4）导入完成后显示导入了多少个、跳过了多少个重复的
Chrome导出的书签HTML文件格式比较特殊，但AI对这种常见格式非常熟悉——它训练数据里有大量的Chrome书签解析代码。
测试导入：
- 从Chrome导出书签HTML → 导入到工具 ✅
- 重复URL自动跳过 ✅
- 显示导入/跳过数量 ✅
- 导出JSON文件 ✅
Step4验收通过✅
最终效果
4步完成，整个书签管理器的功能清单：
表格
| 功能 | 状态 |
|---|---|
| 添加书签（标题+URL+描述） | ✅ |
| URL格式校验 | ✅ |
| 书签列表展示（卡片式） | ✅ |
| 响应式布局（手机/平板/桌面） | ✅ |
| 搜索框实时过滤 | ✅ |
| 标签分类+筛选 | ✅ |
| 多标签同时筛选 | ✅ |
| 标签筛选+搜索联合过滤 | ✅ |
| 删除书签 | ✅ |
| LocalStorage持久化 | ✅ |
| 导入Chrome书签HTML | ✅ |
| 重复书签检测 | ✅ |
| 导出JSON | ✅ |
一个单文件HTML，零依赖，打开浏览器就能用。
传统开发 vs 口述编程
阿Lee不是空口说白话的人，来看真实对比：
表格
| 维度 | 传统方式 | 口述编程 |
|---|---|---|
| 前端界面 | 2-3小时（手写HTML/CSS/JS） | 15分钟（1轮RTC+1轮EMI） |
| 数据持久化 | 30分钟 | 5分钟（1轮EMI） |
| 标签功能 | 1-2小时（交互逻辑复杂） | 15分钟（1轮EMI+1轮bug修复） |
| 导入导出 | 1-2小时（解析Chrome HTML格式） | 10分钟（1轮EMI，AI对这种格式很熟） |
| 调试排错 | 1-2小时 | 15分钟（迭代时顺带修了） |
| 总计 | 5-9小时 | 约60分钟 |
口述编程的提效不是线性的——越是模板化的功能，提效越明显。
Chrome书签解析这种事，传统方式你得查HTML格式文档、写解析代码、测试调试，1-2小时起步。口述编程1句话，AI 20秒搞定。为什么？因为这段代码AI训练数据里见过无数遍，它闭着眼都能写。
阿Lee的复盘：SVC框架为什么这么重要
做完这个项目，阿Lee对SVC框架有了更深的理解：
1. 拆步骤的本质是降低AI的认知负担
你一口气说"做一个书签管理器，要添加、搜索、标签、导入导出"，AI要同时处理4组功能的逻辑关系——大概率写出"每个功能都半成品"的代码。
拆成4步，每步AI只需要专注1组功能，质量直接拉满。
2. 验收是SVC的灵魂
Step3标签筛选+搜索不能同时生效的bug，如果我不验收直接进Step4，后面所有代码都是在这个bug基础上写的——越往后改越难。
验收=在每个地基浇筑后检查是否合格，不合格就回退重来。
3. 每步的代码是下一步的上下文
SVC的每一步都建立在上一步的代码基础上。AI看到现有代码，就知道"接下来要在什么基础上改"——这比从零描述需求高效10倍。
Web应用做完了。1小时，4个步骤，13个功能点，一个真正能用的书签管理器。
但口述编程不止是写代码——它是一种"用自然语言驱动一切"的能力。
下章，阿Lee带你做一件更酷的事：不写一行代码，用口述编程+扣子平台做一个AI Bot。
从"写代码"到"指挥AI"，又近了一步。
阿Lee | 10年嵌入式老兵转AI | 口述编程vibe-coding专栏
专栏导航：[Ch1]认知 → [Ch2]工具 → [Ch3]环境 → [Ch4]进阶 → [Ch5]心法 → [Ch6]第一次 →[Ch7]Web实操→ [Ch8]Bot实操 → [Ch9-10]进阶实操 → [Ch11]变现 → [Ch12]避坑