我之前的博客很简单，就是一个显示和发布内容的地方。没有用 WordPress 那种框架，所以但凡想加点什么功能，都得自己一个一个叠上去。
最近想把博客做得好一点。
加了三个功能：评论、点赞、订阅。这三个也是博客里比较核心且必要的功能。整个过程很快，一个下午就做完了。
下面分享一下我是怎么做的。
Table of contents
整体方法
我用的是 Claude Code，方法很简单。
第一步：告诉 Claude Code 我要什么功能，让它先做一下规划。
第二步：把数据库的 API 提供给它（我用的是 NeonDB 一个 Postgres）。
第三步：让它按规划执行，做完后我检查一下功能是不是符合预期，再让它修一些细节。
总的来说，三个功能都是按这个模式做出来的。
我的建议是一个一个做，不要一次性把三个功能都交给 AI。一次三个，AI 容易做混，你也不好验收。一个一个走，做完一个验收一个，效率反而更高。
下面是细节。
功能一：评论
最先做的是评论。
我跟 Claude Code 说：「给我的博客加评论功能，支持划词评论和文章底部评论」。
它先给我做了一个规划，大概意思是：
- 数据库要建一张
blog_comments表，存评论内容 - API 用 Vercel Serverless Functions 写两个端点（GET 拉取 / POST 提交）
- 前端写一个 Astro 组件，挂到文章页底部
- 划词评论的实现思路：监听文字选中事件，弹一个浮动按钮
我看完规划没问题，就让它执行。
10 分钟左右，第一版就跑起来了。我打开博客看了一眼，发现几个问题：
- 评论排版没样式，看起来很糙
- 划词评论按钮在长文章里位置不对（往下滚就弹错位置）
- 邮箱是可选的，但我希望必填，并且能自动获取头像
我把这些问题一条条告诉 Claude Code，它逐个修。
修完之后又冒出了新需求：
- 划词评论应该显示在文章右侧（像 Medium 那样的批注），而不是混在底部
- 评论要支持回复，形成 thread，但不要嵌套太深
- 用户输入过名字邮箱后，应该记住，不要让我每次重复输入
每提一个需求，它就改一次。来回大概 5-6 轮，评论功能就完整了。
最后这个评论区有这些能力：
- 文章底部留言
- 划词评论显示在文章右侧（窄屏自动降级成小图标）
- 黄色高亮被批注的原文
- 单层回复 thread
- Gravatar 头像（输入邮箱自动获取）
- localStorage 记住身份，不用重复输入
整个过程大概一个半小时。
功能二：点赞
评论做完之后，紧接着做点赞。
点赞比评论简单多了。我跟 Claude Code 说：「给博客加点赞功能，点赞按钮放在 back to top 的左侧。不限制点赞次数。划到底部的时候，显示一个大的点赞按钮」。
它的规划是：
- 数据库一张
blog_likes表，记每篇文章的总数 - 一个浮动小按钮跟在 back to top 旁边
- 一个文末大按钮，给读完的人用
- 不限次数，前端连点累计 + 后端节流批量提交
第一版做出来之后，我又提了几个细节：
- 浮动按钮位置不对，没出现在 back to top 的左边
- 颜色用红心，计数器放在右上角
- 滚到 10% 就出现，滚到底部时让位给大按钮
最后一个细节我特别喜欢：当文末大按钮进入视口时，浮动小按钮要消失。两个并排出现是冗余的。Claude Code 用 IntersectionObserver 监听了大按钮，自动判断要不要隐藏小按钮。
读者从头到尾任何时候都能点赞，但同一时间只看到一个按钮。
这种细节如果让我自己写，可能会偷懒不做。但跟 AI 说一句话的事，它就帮你做了。
整个点赞功能大概 30 分钟。
功能三：订阅
订阅是这三个功能里最复杂的一个。
我跟 Claude Code 说：「帮我做订阅吧，用 Resend」。
它反问了我几个问题：
- 订阅表单出现在哪些地方？
- 收到订阅后怎么发邮件？
- 订阅者数据存哪里？
我选了：博客每篇文章底部 + 博客 footer + 主站 footer 都放；自动发欢迎邮件；NeonDB + Resend Audiences 双写。
它做了一个规划：
- 接 Resend 的 SDK
- 写一个
/api/subscribe端点，订阅时 NeonDB 和 Resend 双写 - 写一个 Subscribe 组件，挂到上面三个位置
- 订阅成功后立刻发欢迎邮件
第一版做完之后，我做了几次优化：
第一次：欢迎邮件写得太简略。我把我的个人介绍发给 Claude Code，让它重写。包括我是谁、在哪里、做什么、订阅后能读到什么、怎么互动。一封诚意满满的自我介绍信。
第二次：我突然想起来，退订按钮在哪里？没有。Claude Code 直接承认它在邮件文案里写了「随时退订」但没实现。我让它补上。
它做的退订功能挺完整：
- 数据库给每个订阅者生成一个唯一 token
- 邮件里带退订链接
- 加
List-Unsubscribeheader，Gmail 顶部会自动出现「Unsubscribe」按钮 - 用户点链接或一键退订都行，自动同步 NeonDB 和 Resend
整个订阅功能大概一小时。
几个心得
做完这三个功能，我整理了几个心得。
第一，AI 编程的质量取决于你怎么沟通。
「给我的博客加评论功能」是一个差需求。「给我的博客加评论功能，支持划词评论和文章底部评论」是一个好需求。多一句话，就少了好几轮来回。
第二，规划比代码重要。
每个功能我都让 Claude Code 先规划再执行。规划阶段花 1 分钟，能省掉后面 10 分钟的返工。
第三，验收要细。
我每做完一个功能就打开浏览器从头到尾走一遍。划词评论按钮在长文章里位置不对，浮动按钮要让位给大按钮，欢迎邮件写得太简略，这些都是真的用了之后才发现的。
第四，不要一次性提太多需求。
我一开始的冲动是把三个功能都交给 Claude Code，让它一次性做完。后来还是忍住了，一个一个来。事实证明这个决定是对的。每个功能单独做完、单独验收，bug 不会互相牵连。
第五，AI 不是万能的，但可以很专。
像 IntersectionObserver 控制按钮可见性、navigator.sendBeacon 兜底防丢点赞、List-Unsubscribe header 一键退订，这些细节我自己写不一定记得起来。但跟 AI 说「滚到底部时大按钮出现，小按钮消失」，它就会用最合适的 API 帮你实现。
整个下午做下来，博客明显不一样了。
不再只是一个静态的展示页。读者读完文章可以留言、点赞、订阅。我也能看到谁来过、谁喜欢、谁愿意继续看下一篇。
很多以前觉得「太麻烦」的事，现在做起来其实很快。一个下午，三个功能。如果让我一个人写，可能两三天都不够。
做软件这件事的门槛在降低。你只需要把想做的事描述清楚，剩下的交给 AI。能不能把事情说清楚，比能不能写代码重要得多。
用到的工具
如果你想看实际效果，可以去我的博客转转，欢迎订阅：benx.ai/blog。