阔别编码多年后，我如何用 Claude Code 和 Mux 打造一个视频分享网站
内容提要
作者用 Claude Code 开发了潜水视频分享站 ScubaTube，强调用户自主掌控视频、可导出 MP4、结构化潜水数据（深度、水温、潜点）及高质量编码。技术栈包括 Mux、Vercel、Next.js、Video.js v10 等，借助 Mux Robots 实现自动标签、缩略图与章节，并做出潜水数据叠加和 TV 模式无缝播放。作者反对“氛围编程”说法，认为产品品味与编辑判断才是关键，生成代码需经现实检验。
延伸解读
从“氛围编程”到编辑判断：产品品味才是关键
作者反对“氛围编程”的说法，认为它贬低了项目中的意图和创造力。他扮演的是编辑而非工程师的角色：设定愿景、提供方向、在多个选项中挑选最佳方案。例如缩略图选择器，他让 Claude 生成几个版本，试用后保留最好的。代码修复大多不 glamorous，如上传流程迭代三轮、修剪器推倒重来。这提示读者：AI 生成代码只是起点，真正的价值在于人的品味和编辑判断，以及知道何时该丢弃重来。
生成代码需经现实检验：SEO 审计的教训
作者三月份设置了看似完整的 SEO 基础（干净的 slug、robots.txt、站点地图、VideoObject JSON-LD 等），但六个月未检查。审计时发现并修复了约十几个问题：重复页面索引、死链 404、首页 TTFB 慢、缺少自规范链接、OG 图像回归、描述优先级错误等。他总结这是“这种构建方式的典型失败模式”：生成的代码看起来正确，却从未经过现实检验。最终靠更新的模型审查旧实现才发现问题。这提醒读者，AI 生成的代码必须定期验证，不能假设其正确。
技术栈选择：代理体验与免费层降低门槛
作者选择 Mux 和 Vercel，并采用 Next.js、Tailwind、Cloudflare、Resend、Mapbox、Clerk、Claude API、Upstash Redis 和 Vercel Blob 等服务。他发现这些服务的共同点是文档好、多功能、开发者体验强（且日益成为代理体验）。Claude、ChatGPT 和 Replit 通常推荐 Mux 用于流媒体集成。大多数服务对爱好者有慷慨的免费层，让他以极低支出早期构建。目前流量很低，主要用免费层；若增长，每月可能花费几百美元。这展示了现代工具如何
潜水数据叠加与 TV 模式：用 Video.js v10 实现差异化功能
作者将 Shearwater 潜水电脑的数据通过 UDDF 格式同步到潜水日志应用，再以交互式叠加层显示在视频上，展示深度、耗气量和温度，且不烧录进视频资产。Video.js v10 让这变得容易。TV 模式则解决无缝播放问题：同时保持两个播放器堆叠，下一个视频在后台缓冲，结束时交叉淡入淡出，避免加载间隙。这些功能体现了如何利用视频播放器能力打造针对特定场景的体验，而非通用平台所能提供。
Q&A
ScubaTube 是什么？它主要用来做什么？
ScubaTube 是一个小型、默认私密的潜水视频分享网站。用户可以上传潜水片段，在地球仪上标记潜点，添加深度和水温等数据，并与同船的人分享。每个视频都有可下载的 MP4 文件，确保用户掌控视频。
作者为什么选择自己搭建视频网站，而不是用 YouTube 或 Facebook？
作者希望真正拥有视频文件，能便携导出，以便未来灵活使用；只想与实际的潜水员和潜水社区直接分享，不关心点赞和订阅；需要高质量编码来应对潜水视频的蓝绿色偏、低光、颗粒和持续运动；还希望视频能独立于网站存在，并且能控制嵌入和分享方式。
ScubaTube 的技术栈包括哪些主要服务？
主要技术栈包括：Next.js（App Router）和 Vercel 托管，Mux 处理视频，Tailwind CSS 样式，Cloudflare Turnstile 验证，Resend 邮件，Mapbox 地球仪和地理查询，Clerk 认证，Anthropic Claude API 生成 SEO 描述，Upstash Redis 和 Vercel Blob 存储。
Mux Robots 为 ScubaTube 提供了哪些自动化功能？
Mux Robots 提供自动标签、标题和描述建议，自动选择最佳缩略图（所有者可覆盖），为有对话的视频提供字幕和翻译，并通过 analyze_structure 工作流视觉化生成章节，将场景转为 WebVTT 章节轨道供 Video.js 播放器使用。
TV 模式如何实现无缝播放？
TV 模式使用两个同时活跃的 Video.js v10 播放器堆叠在一起。当一个视频播放时，队列中的下一个视频在后台静默缓冲。当前视频结束时，应用在两个图层之间交叉淡入淡出，并开始播放预加载的视频，从而消除加载旋钮、黑屏和卡顿，实现无缝过渡。
作者对“氛围编程”（vibe coding）持什么态度？为什么？
作者讨厌“氛围编程”这个说法，因为它贬低了项目中的意图性和创造力，让有用的创造看起来像是偶然的意外。作者认为产品品味和编辑判断才是关键，生成代码需要经过现实检验，不能只看起来正确。
作者在 SEO 方面遇到了什么问题？这反映了什么？
作者最初设置了干净的 slug、robots.txt、站点地图、VideoObject JSON-LD 和默认 OG 图像，但六个月后审计发现约十几个问题，包括重复页面索引、死链 404、主页 TTFB 慢、缺少自规范链接、OG 图像回归和描述优先级错误等。这反映了生成代码可能看起来正确却从未经过现实检验，是这种构建方式的典型失败模式。
