从一个很小的痛点说起
每次和朋友聊天，总会聊到这类话题：
"你用的什么笔记软件？" "这个效果用什么做的？" "有没有好用的 XXX 推荐一下？"
然后就是一顿翻聊天记录、翻收藏夹、翻浏览器书签……找到了发个链接过去，没找到就说一句"我回头找找"——然后大概率就忘了。
更难受的是反过来：自己发现了一个超好用的工具，想分享给朋友，结果能做的也就是甩个链接到群里，没上下文、没分类、没下文。
工具的发现和分享，一直缺少一个体面的方式。
所以我做了 LinkHub——一个链接聚合平台。
LinkHub 是什么
简单说：每个人可以创建自己的工具箱，公开分享给所有人。
你可以把日常使用的工具、网站、资源整理成「合集」，比如「我的 AI 工具箱」「前端开发必备」「设计素材合集」。别人浏览你的主页，就能一目了然地看到你在用什么。
👇 先看首页长什么样：
核心功能：
- 🔗 创建合集：把相关链接整理到一个合集里，加标题、描述、标签
- 👀 浏览发现：看别人公开的合集，发现新工具
- ⭐ 收藏：看到好用的合集，一键收藏到自己的收藏夹
- 🏷️ 分类体系：AI、Web开发、设计、工具、效率……按领域分类浏览
👇 按分类浏览，精准定位：
— 分类卡片网格，覆盖 AI、前端、设计、工具等主流领域
- 🌍 中英双语：支持国际化，中文和英文自由切换
👇 英文版同样丝滑：
- 完整的英文界面，搜索、分类、合集一应俱全
- 🔐 隐私控制：合集可以选择公开或私有
- 📖 一键导入：支持从浏览器书签批量导入
- 🧩 浏览器书签栏工具：拖拽到书签栏，随时保存当前页面
从想法到上线，三个月
LinkHub 这个项目从 2026 年 2 月开始，到今天大概三个月，64 次提交。不是全职做的，基本是周末和晚上的时间。
第一步：先把骨架搭起来
选了 Next.js 15 + React 19 + Tailwind CSS 4 的组合，后端用 Supabase（数据库 + 认证一体），部署在 Vercel 上。这套组合的好处是全栈一个人就能搞定，不用折腾后端服务器。
前几天主要在做：
- 项目初始化和基础配置
- 中英双语国际化（next-intl）
- 用户认证系统（邮箱注册登录 + GitHub/Google OAuth）
- 基础页面框架
👇 认证页面，支持 OAuth 一键登录：
- GitHub/Google OAuth 按钮 + 邮箱密码登录 + 验证码
👇 注册页也做了邮箱验证：
- OAuth 快捷注册 + 姓名/邮箱/密码表单 + 邮箱验证码
认证这块踩了不少坑。NextAuth.js 配合 Supabase 的流程比想象中复杂，尤其是开发环境和生产环境的 OAuth 回调地址不一样，调试了很久。后来加了个开发模式，用 Resend 邮箱验证码登录，终于丝滑了。
第二步：核心功能——合集
合集是 LinkHub 的核心。一个合集包含：标题、描述、分类、标签、多条链接（每条有标题+URL+描述），以及公开/私有的开关。
做合集表单的时候，最纠结的是「多复杂算合适」。一开始做了标签选择器、链接预览、自动抓取网站信息，功能很全但表单很长，填一个合集要十分钟。后来砍掉了不少，保留核心字段，体验好多了。
自动抓取网站信息这个功能倒是留下来了——输入 URL 后会自动获取页面标题和描述，省得手动填。这个用的是 Next.js 的 API Route + cheerio，简单但实用。
第三步：分享和发现
有了合集，下一步就是让别人能看到。
做了分类浏览（AI、Web开发、设计、工具等）、热门合集排序、搜索功能。首页展示平台统计数据——多少个合集、多少用户、多少浏览量——给新用户一个「这里有人用」的信号。
收藏功能做了登录拦截：未登录用户点击收藏会跳转到登录页，登录后自动回来继续操作。这个小体验花了不少心思。
第四步：锦上添花
基础功能跑通后，加了一些提升体验的东西：
- 暗黑模式：这个是刚需，开发者不用暗黑模式？
👇 暗黑模式，保护眼睛：
-
深色背景 + 高对比度文字，夜间使用更舒适
-
浏览器书签导入：很多人的工具收藏都在浏览器书签里，一键导入省得手动搬
-
Bookmarklet：拖到浏览器书签栏，浏览任何网页时点击就能保存到 LinkHub
-
SEO + PWA + RSS：让搜索引擎能收录，让用户能当 App 用，让订阅者能收到更新
-
管理后台：分类管理、用户管理、内容审核
-
用户主页：每个人有自己的公开主页，展示所有公开合集
最后还接入了 Vercel Analytics 和腾讯 Aegis 做性能监控，毕竟访问速度直接影响用户体验。
技术选型的一些想法
选择这套技术栈，不是追逐潮流，而是因为真的适合独立开发者：
| 技术 | 为什么选 |
|---|---|
| Next.js 15 | App Router + Server Components，前后端一体 |
| React 19 | 最新特性，开发体验好 |
| Supabase | 免费额度够用，数据库+认证+存储一体，省掉搭后端的时间 |
| Tailwind CSS 4 | 写样式快，不需要设计系统也能写出不丑的界面 |
| next-intl | 国际化方案简洁，和 App Router 集成好 |
| Radix UI | 无障碍+可定制，组件底层扎实 |
全部免费起步，Supabase 免费版、Vercel 免费版，Resend 免费，域名也就几十块一年。个人项目不需要一开始就花钱。
Vibe Coding：一个人怎么干几个人的活
说实话，在同时做2份工作，还要做奶爸的情况下，做出这个完整度的项目，放在以前不可能。但 2026 年有了 AI 编程助手，一切都不同了。
我不是「让 AI 写代码然后我复制粘贴」那种用法。我的工作流更像是一个项目经理 + 架构师，AI 是我的开发团队。下面分享几个让我效率翻倍的方法。
1. 先想清楚，再动手：Brainstorming + Planning
很多人拿到 AI 编程工具就开始「帮我写个 XX 功能」，然后发现写出来的东西跟自己想的不一样，改来改去，比手写还慢。
我的习惯是：动手之前先和 AI 对齐需求。
具体来说就是两步：
第一步：Brainstorming（头脑风暴）——把模糊的想法变成清晰的设计。我会跟 AI 一问一答，让它帮我理清：这个功能到底要解决什么问题？有几种实现方案？各自的 trade-off 是什么？它会给出 2-3 个方案并附带推荐，我选一个再继续深入。
第二步：Writing Plans（写计划）——把设计方案拆成 2-5 分钟一个的小任务。每个任务都写清楚：改哪个文件、写什么代码、怎么验证、commit 信息是什么。这样 AI 执行的时候不需要猜，我也不需要反复纠正。
💡 关键技巧：计划写得越细，AI 执行越准。一个「实现用户认证系统」的任务，不如拆成「创建 User 模型」→「添加密码哈希」→「写登录接口」→「加 JWT 生成」→「写注册接口」五个小任务。
2. 技能系统（Skills）：让 AI 越用越懂你
这是我用下来觉得最有价值的功能，可能很多人还不知道。
AI 编程助手有一个「技能系统」——你可以把常用的操作流程、踩坑经验、项目约定保存成技能文档。下次遇到类似的任务，AI 会自动加载对应的技能，按照你验证过的流程来执行。
举个例子：我在做 LinkHub 的过程中，发现 Next.js 15 + next-intl 的路由配置有几个坑（middleware 顺序、locale 检测逻辑），调试了半天才搞定。我把它保存成一个技能，后来再开新项目的时候，AI 直接按正确的方式配置，一次通过。
技能可以覆盖各种场景：
| 技能类型 | 例子 |
|---|---|
| 框架踩坑 | 「Next.js App Router 的这几个坑要注意」 |
| 工作流 | 「用 Cursor CLI 写代码的标准流程」 |
| 项目约定 | 「这个项目的 CSS 变量命名规范是……」 |
| 调试套路 | 「遇到这个报错，按这四步排查」 |
| 设计模式 | 「写 React Hook 时遵循这几个原则」 |
💡 关键技巧：每次踩完坑、纠正完 AI 的错误，立刻存技能。不要指望下次 AI 能自己记住——它不会。但技能文档它会每次加载，所以这相当于在给 AI 做「入职培训」。
3. 分而治之：Subagent 驱动开发
复杂功能我不用一个 AI 从头写到尾，而是拆成独立的小任务，每个任务派一个全新的 AI 去做（Subagent）。
为什么不用同一个 AI 一直写？
- 上下文污染：写了任务 A 再写任务 B，AI 会把 A 的假设带到 B 里
- 纠错困难：一个 AI 写了 500 行代码，发现前面有 bug，改起来牵一发动全身
- 质量失控：没有审查环节，错误会累积
我的流程是：
任务 → 派一个 AI 写 → 另一个 AI 审查（规格符合性）→ 再一个 AI 审查（代码质量）→ 通过
听起来三个 AI 好像很奢侈？实际上每个 AI 只跑 2-5 分钟，而且因为每个都是全新上下文、任务清晰，成功率很高。反而是让一个 AI 写大功能，来回改的时间更长。
💡 关键技巧：两个审查不要省，而且顺序不能反——先查「有没有按需求写」（规格审查），再查「写得好不好」（质量审查）。很多问题不是代码写得差，而是根本没按你说的写。
4. 用对工具：Cursor CLI
我的主力编码工具是 Cursor CLI（命令行版），不是在 IDE 里聊天那种。
为什么用命令行版？因为可以和其他工具组合：
- Hermes Agent（我的 AI 助手框架）可以直接调用 Cursor CLI 执行编码任务
- Cron 定时任务可以自动跑：比如每天检查一下依赖有没有安全漏洞
- 多个 AI 协作：Hermes 负责规划和审查，Cursor 负责写代码，各司其职
Cursor CLI 的几个实用模式：
# 交互模式：有问题会问你
agent "给合集表单添加链接预览功能"
# 非交互模式：一口气干完，适合后台跑
agent -p "修复暗黑模式下分类页的颜色对比度问题" --output-format text
# Plan 模式：只看方案不改代码，适合复杂功能先审方案
agent --plan "重构认证系统，支持更多 OAuth Provider"
💡 关键技巧：交互模式适合需要反复确认的功能，非交互模式适合明确的 bugfix 和小功能。从 AI 助手调用时必须用非交互模式，因为没有终端交互。
5. 持久记忆：让 AI 跨会话记住你
普通的 AI 对话，关了就忘了。但有些信息每次都要重复说，很烦：
- 「我的项目用 pnpm 不是 npm」
- 「commit 信息用英文，格式是 type: description」
- 「Supabase 的 service role key 千万不能暴露到前端」
- 「我偏好快速失败，别跑太久」
这些都可以存到 AI 的持久记忆里。下次开新会话，AI 自动读取，不用你再重复。
💡 关键技巧：记忆要精简，只存「下次还需要」的信息。任务进度、临时状态不要存——那些可以靠搜索历史会话找回来。
小结
Vibe Coding 不是「让 AI 替你写代码」，而是「你当架构师，AI 当执行团队」。核心心法就四条：
- 先想清楚再动手——Brainstorming + Planning，磨刀不误砍柴工
- 踩坑就存技能——Skills 让 AI 越用越靠谱，不像 ChatGPT 每次从零开始
- 分任务派活+双重审查——Subagent 模式，小步快跑，质量可控
- 用持久记忆减少重复——偏好、约定、教训，存一次受益无数次
说实话，如果没有这套工作流，LinkHub 可能到现在还在写认证系统。
现在的状态
LinkHub 已经在线上跑着了，基本功能完整。还有一些想做的：
- Chrome 扩展（比 Bookmarklet 更优雅的保存方式）
- 合集协作（多人一起维护一个合集）
- 浏览器扩展自动推荐（访问某个网站时，提示有没有人收录过）
- 更智能的分类和标签推荐
不过不急，按照用户反馈来。做产品最怕的就是自己想象需求。
写在最后
做 LinkHub 的出发点特别简单：我想知道别人在用什么好东西，也想把自己觉得好的东西分享出去。
工具的价值不在工具本身，而在人和人之间的传递。一个好工具被藏在自己的书签栏里，和被分享给十个人，产生的价值完全不一样。
如果你也有类似的痛点，欢迎来试试。
🔗 linkhub.ai-explorer.cn
我是 Isaac，全栈开发者 × Web3 探索者。不追热点，只说人话。
