Vibe Coding 实战：告别混乱的浏览器收藏！我开发了一个 AI 书签整理神器
分享一个用 Vibe Coding 开发的浏览器扩展项目——AI Smart Bookmark Organizer。该扩展支持智能保存、批量整理、清理大师、历史回滚等功能，支持中英文双语界面，可对接 OpenAI/DeepSeek/Kimi/Ollama 等多种 AI 服务。
前言
还在为浏览器收藏夹里堆积的「只收藏不整理」而发愁？还在一个个手动给书签分类？我的浏览器收藏夹曾经有 500+ 条书签，在经历一次彻头彻尾的人力整理后，决定用浏览器扩展 + AI 来解决这个问题。于是，AI Smart Bookmark Organizer 诞生了。
这个扩展几乎是用当下最流行的开发模式「 vibe coding 」实现的，开发环节与 AI 的对话轮数 < 40，耗时 9 小时（包含人工测试反馈），作为初次尝试尽可能全流程 vibe 的体验，建立了一个初步可用的原型，可谓惊喜满满。
扩展已在 github 开源，欢迎体验和提交 issue：https://github.com/SeonPan/ai-smart-bookmark-organizer
鸣谢
Kimi2.5 Agent：主力开发
MiniMax Agent Desktop：本地文档整理，以及与 Kimi 对比实现
GLM-4.7：用于部分 BUG 修复
本文关键词：Chrome Edge 扩展、浏览器扩展开发、收藏夹、书签管理、Vibe Coding、AI 开发
文章目录
一、为什么做这个产品？
1.1 痛点分析
相信很多朋友和笔者一样：
- 书签栏塞得满满当当
- 几百条不知道什么时候收藏的链接
- 我好像收藏过这个文章，在哪来着？
- 打开浏览器书签管理一片混乱
…
而早在 2025 年 DeepSeek 发布之初，笔者就请 D指导 帮忙整理书签，颇有启发。但我不是来学习怎么整理，而是希望能自动化呀[○･｀Д´･ ○] ~ 拖拖拉拉一年过去了，终于——尝到了 Vibe Coding 的甜头（会不会启动的太晚了喂！）
1.2 解决思路
如果能让 AI 来帮我分析页面内容，自动推荐分类和标签，并以扩展的方式嵌入浏览器使用，那不就解决了吗？
| 传统方式 | AI 方式 |
|---|---|
| 手动选择文件夹 | AI 自动推荐分类 |
| 无标签 | AI 自动生成标签 |
| 1秒收藏 + 无尽整理 | 3秒解决后顾之忧 |
二、产品功能预览
扩展的主要功能包括：智能保存、批量整理、清理大师、书签统计等。
核心价值：
| 价值点 | 说明 |
|---|---|
| 🤖 高效智能 | AI自动分析，一键分类收藏 |
| 🔒 隐私优先 | 使用 API Key 只存本地，书签数据不上传 |
| 💰 成本可控 | 支持本地 Ollama，完全免费 |
| 🛡️ 安全操作 | 自动备份，一键回滚 |
2.1 智能保存
点击扩展图标 → 点击AI分析 → 查看建议 / 编辑文件夹 → 查看 / 编辑标签 → 保存。
例如，直接对扩展设置页进行分析，AI 判断这个页面可以保存到现有的《工具》文件夹，并生成额外标签。
这个流程也可以通过（可自定义）快捷键 Alt+Shift+S 一键实现。
2.2 批量整理
2.2.1 选区分析
对已经收藏的书签进行批量整理：选择范围→点击执行→确认分类前后位置→应用更改。
2.2.2 用量提醒
友好提醒 token 用量，避免书签过多时造成意外消耗。
2.2.3 结果预览
确定更改前可预览结果，显示将要创建的新文件夹，以及分类移动前后的位置对比。
2.2.4 支持回滚
支持版本记录，可回滚到批量整理前的书签树。
2.3 清理大师
支持失效链接检测删除，以及重复书签自定义去重、保留方式。
2.4 书签统计
统计书签总数、文件夹数、最大深度等，并通过气泡图进行标签可视化，点击标签气泡可下钻到对应标签的书签列表。
三、Vibe Coding 开发实录
3.1 技术栈
| 层级 | 技术选择 | 原因 |
|---|---|---|
| 前端框架 | React 18 + TypeScript | 组件化开发，类型安全 |
| 构建工具 | Vite + CRXJS | 快速构建，Chrome 扩展打包 |
| UI 组件 | shadcn/ui + TailwindCSS | 好看且轻量 |
| 状态管理 | React Context + Hooks | MVP 阶段足够 |
| 存储 | chrome.storage + IndexedDB | 设置存储 + 快照存储 |
| AI 通信 | Native fetch | 流式响应支持 |
3.2 架构模式
3.3 隐私设计
❌ 不做后端服务（避免数据泄露风险）
❌ 不做用户注册登录（减少隐私收集）
✅ API Key 存 chrome.storage.local（本地加密）
✅ 书签数据不离开用户浏览器
✅ 支持本地 Ollama（完全离线）
调试 Ollama 的连接大概是人工介入最多的部分之一，大多数 BUG 是一两次对话反馈就解决了。
3.4 项目初始化
笔者的操作很简单，把前期写好的 PRD 直接丢给 AI，让其照单执行，随后就是不断的测试反馈，作为产品经理把对方当成一位研发专家即可。
prompt：按照PRD进行开发，分阶段进行，在必要的环节让我进行测试验证
整个产品的核心也就是书签分类逻辑：
你是一个专业的书签分类助手。根据用户提供的信息，分析并推荐分类和标签。
输入信息：
- 标题：{title}
- 现有文件夹：{folders}
要求：
1. 推荐 1 个最合适的分类（从现有文件夹中选择，若无合适的则新建）
2. 推荐 3-5 个标签
3. 输出 JSON 格式：{ category, tags, confidence }
3.5 迭代清单节选
- API连接测试成功，ollama连接报错：连接失败: AI API error: 40 -|
- 浏览器里输入ollama地址是正常显示Ollama is running的，cmd看模型list里也存在对应的模型名称
- 文件夹列表中还是有显示，并且文件夹数由之前的3变成2（异常），最大深度由之前的2变成1（正常）
- 统计部分按我给的代码来修改，其他模块不要动：typescript…
- 生成开发说明文档：帮助开发人员清晰认知项目架构、技术栈、各模块文件作用、核心函数实现、当前进度和剩余开发计划，必要部分使用mermaid画图辅助理解
- Alt+S快捷键无效，需修正，而且只是快捷打开操作界面还不够，要设计更好的快捷操作。现在的步骤是：点击扩展图标→点击AI智能分析→确认分类/创建→选择文件夹→点击保存。操作路径太长了
- 在后台的【书签统计】页面增加一个刷新按钮，点击刷新统计结果
- 实现清理大师：失效链接检测、重复书签检测，用户确认后删除失效链接，重复链接若在文件夹中则可指定保留哪一个文件夹里的，不在文件夹中则直接去重
3.6 心得小结
用 AI 辅助开发扩展的整体感受：
✅ 优势：快速搭建项目骨架、实现 AI 调用框架、减少 CRUD 重复劳动
⚠️ 注意：需要自己把控架构、复杂的业务逻辑需要仔细 review
🎯 建议：先想清楚要什么，再让 AI 实现，比让 AI 思考「做什么」更高效
四、后续计划
4.1 发布计划
- GitHub开源✅：https://github.com/SeonPan/ai-smart-bookmark-organizer
- Chrome / Edge 商店上架：敬请期待（只是易于搜索安装啦，功能和开源版一致，暂不考虑提供服务
4.2 功能规划
| 版本 | 功能 | 状态 |
|---|---|---|
| v1.0.0 | 智能保存 | ✅ 已完成 |
| v1.0.0 | 批量整理 | ✅ 已完成 |
| v1.0.0 | 清理大师 | ✅ 已完成 |
| v1.0.0 | 历史回滚 | ✅ 已完成 |
| v1.0.0 | 书签统计 | ✅ 已完成 |
| v1.0.5 | 边界测试、BUG修复 | 🔨 进行中 |
| v1.2.0 | 文件夹嵌套层级分类 | 📅 计划中 |
| v1.2.0 | 分析记录精细化管理 | 📅 计划中 |
| v1.2.0 | 操作界面交互优化 | 📅 计划中 |
| v1.3.0 | 智能检索书签 | 📅 计划中 |
| v1.3.0 | 根据近期收藏推荐阅读历史书签 | 📅 计划中 |
| v1.3.0 | 建议清理吃灰书签 | 📅 计划中 |
后记
到这里，AI Smart Bookmark Organizer 的核心功能实现就介绍得差不多了，更多细节可查看 Github 中的用户操作手册。从一个「收藏夹太乱」的痛点出发，到用 vibe coding 方式完成开发，整个过程还是很爽的。
这个项目从有想法到初步可用，中间大部分时间在和 AI 对话「哪个模块有什么样的BUG」，不得不说，现在 AI 辅助编程真的让个人开发者的效率提升了很多。当然，需求说明、架构设计、代码审查和功能测试还是需要自己把关的，不能完全依赖 AI。依个人浅见，想用 AI 去开发产品，要有技术层的架构意识，也要有产品层的用户意识，不然就会总是产出看起来酷炫的“小时级验证”，出不来稳定的生产级系统，但如果目的不是靠一人之力落地，而仅仅是快速验证，倒是也足够了。
有感兴趣的同学可以关注一下后续优化版本，欢迎提交 issue ~ 这里是致力于用 AI 提升效率的 Seon塞翁，我们下一篇见！
有“AI”的1024 = 2048，欢迎大家加入2048 AI社区
更多推荐
3
0- 0
已为社区贡献5条内容
所有评论(0)