上章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/JS15分钟1轮RTC1轮EMI数据持久化30分钟5分钟1轮EMI标签功能1-2小时交互逻辑复杂15分钟1轮EMI1轮bug修复导入导出1-2小时解析Chrome HTML格式10分钟1轮EMIAI对这种格式很熟调试排错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]避坑
Web应用口述编程实战：1小时做出个人书签管理器（vibe-coding进阶实操）
发布时间：2026/6/9 15:19:25
上章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/JS15分钟1轮RTC1轮EMI数据持久化30分钟5分钟1轮EMI标签功能1-2小时交互逻辑复杂15分钟1轮EMI1轮bug修复导入导出1-2小时解析Chrome HTML格式10分钟1轮EMIAI对这种格式很熟调试排错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]避坑
