用 Claude Code 写博客是一种什么体验？人机协作效率实录

最近用 Claude Code 重构了博客首页，从视觉设计到视频处理再到搜索调试，全程人机协作完成。这篇不聊概念，直接复盘我们具体做了什么、怎么配合的。

为什么是 Claude Code

之前写博客的流程是：本地写代码 → 提交 → 等 Cloudflare Pages 构建完才能看效果。一个样式调整至少循环 5 分钟。

Claude Code 直接在终端里运行 npm run dev，我改需求、它改代码、dev server 热更新，反馈周期从几分钟压缩到几秒。而且，它能直接读写我的项目文件，不用我在 GitHub 上贴代码片段等回复。

几个让我印象深刻的协作场景

1. 视频处理：一句话解决

首页想放一段狼特写的视频背景，原始素材 24MB。我只需要说：

“视频 24MB，帮我压缩处理并做短循环”

它自动用 FFmpeg 完成了：裁剪 8 秒循环片段、用 VP9 编码压缩到 560KB（WebM）+ 1.85MB（MP4 降级）、生成 poster 封面图、用 requestIdleCallback 实现懒加载不阻塞首屏渲染。

如果自己搞，得查 FFmpeg 参数、研究视频格式兼容性、写懒加载逻辑——一套下来半小时起步。

2. 给一个参考，还一套实现

首页的透明玻璃卡片，我说想要 visionOS 那种 Liquid Glass 质感。然后扔了一篇参考文章链接。

它读懂了参考文章的核心 CSS 技术（双层 Shimmer 反射、琥珀色折射光、窗棂式高光线），适配到我现有的组件上，直接 npm run dev 就能看效果。虽然最终因为风格偏好回退到了最初的方案，但敢于试错、不好就回退的能力，在这个场景里很有价值——换以前，让我花半小时实现再推翻，我大概率不会做这个尝试。

3. 你发现症状，它定位根因

搜索功能上线后报 404。我说搜索出问题了，它先看构建日志、查 Pagefind 文档、对比我的 Astro 配置，几分钟锁定根因：Pagefind 构建产物生成在 dist/pagefind/，但 astro dev 只服务 public/。

修复方案也很干脆：在 package.json 的 build 脚本里加一行 cpSync，构建完自动把 dist/pagefind/ 拷贝到 public/pagefind/。再 .gitignore 掉避免误提交。

这种**“人发现异常 → AI 追根因 → 双方确认方案 → AI 执行修复”**的模式，比一个人看 Stack Overflow 高效得多。

4. 暗色模式体系构建

从零搭建 Tailwind CSS 4 的暗色模式，涉及：自定义森林色板（9 个 CSS 变量）、@custom-variant 类名切换、localStorage 持久化。我只需要说”默认用暗色模式”，它会自动把相关代码串联起来——全局 CSS、布局组件、Header 适配、日间/夜间两套样式覆盖。

中间还修复了好几个边缘情况：日间模式 header 文字白色不可见、底部白色背景框与暗色氛围冲突、文章页面 header 颜色突兀。每个问题我说一句现象，它定位修改，平均两三分钟一个。

七个协作技巧总结

复盘这次协作，我总结了七个让效率更高的做法：

1. 给参考链接比说形容词有用：说”我要 Liquid Glass”不如扔一个 Apple 官方设计链接
2. 描述约束而非方案：说”SEO 要保留、不能阻塞加载”，AI 会自己选 requestIdleCallback；说你具体要用什么 API，反而限制了发挥
3. 快速迭代，不好就回退：看好不好看在 dev server 几秒见分晓，每轮用 git commit 兜底，不满意就 revert
4. 让 AI 执行而不是建议：说”帮我压缩视频”而不是”FFmpeg 压缩命令是什么”，省掉人工复制粘贴
5. 接受完整的项目上下文：Claude Code 能读所有文件，不需要你花 10 分钟解释项目结构
6. Git 就是安全网：大胆实验、随时回退，这个心态让探索阶段的产出质量高很多
7. 人发现现象，AI 追根因：你最擅长说”这里不对劲”，它最擅长沿着代码路径找到原因

不是替代，是加速

Claude Code 没有替我做决定——视觉风格的选择、方案的取舍、发布的节奏，都是我定的。它解决的问题是：把想法变成可看、可测、可改的产物，速度翻了几倍。

原来改个首页样式，从到库查文档到改完验证，15 分钟起步。现在一句话加几秒钟热更新，就解决了。省下来的时间，可以用来想清楚真正重要的问题：内容写什么、体验好不好。

博客已经用这套工作流在维护了，后续会继续分享更多实践。