用Claude Code开发视频应用：规划与功能测试

Claude Code帮助把一个类YouTube应用的计划变成了可运行的原型，具备视频上传、播放、观众互动和创作者工具。值得借鉴的不是“一个提示词就做出了成品”，而是整个构建过程经历了需求、服务连接、设计决策、实现和检查，而检查暴露出的问题仍需开发者自己判断。

生成代码前先划定边界

项目从确定技术栈开始：网页应用使用Next.js App Router，样式使用Tailwind CSS，账户和应用数据使用Supabase，媒体处理使用ImageKit。在Claude Code的Plan Mode中，最初的需求涵盖公开的观看页面、需要登录的创作者区域、上传流程和数据分析。要求智能体先提出澄清问题，使其能在修改文件之前消除歧义。

第一版最小可行产品（MVP）的计划还列出了不做的功能：评论、点赞、搜索和订阅相关逻辑。Claude Code在PLAN.md中生成了包含8个里程碑的计划，涵盖数据库结构、路由、API端点、Supabase的Row-Level Security策略以及ImageKit播放器集成。Row-Level Security（RLS）是一套规定用户可以访问哪些记录的数据库规则。

这份计划是需要审阅的起点，而不是默认每个决定都正确的许可。后来的构建加入了点赞、评论、搜索以及与订阅者相关的仪表盘数据。这些新增内容说明，随着需求变化，开发者需要重新审视约定的范围：已经实现的功能，不一定属于最初的MVP。

▲ 规划应用结构

为智能体提供所需工具和设计规则

Claude Code借助专门的前端技能来指导界面开发。它还通过Model Context Protocol（MCP）连接了Supabase，MCP是让AI智能体使用外部服务所提供工具的一种方式。借助这一连接，智能体可以查看数据库结构并处理迁移。ImageKit插件为媒体功能提供了指导，同时ImageKit播放器的详细文档被加入项目上下文，计划也随之更新。

计划确定后，Claude Code使用TypeScript和Tailwind CSS搭建了Next.js应用的基础框架。上传视频的存储和播放基础设施交给ImageKit处理，无需自建媒体处理流程。不过，在检查连接之前，仍需要服务凭据和一次本地测试。这次构建中凭据被直接粘贴进了Claude Code，但这种图方便的做法并不适合作为生产代码库的默认方式；敏感值应放入环境配置文件，而不是留在AI聊天记录中。

界面也有单独的审查环节。在将主题应用到整个应用之前，Claude Code在/design创建了一个样式指南页面，包含字体、颜色、卡片、按钮和控件。审查后的设计采用深色背景和克制的琥珀色强调色。只有在预览之后，这些设计规则才被应用到主要页面。这样就把“视觉体系是否可行”与“连通所有路由”这一更大的任务分开了。

先连接功能，再测试行为

最终的应用把面向观众的观看页面和创作者区域整合在一起。上传的媒体出现在ImageKit的媒体库中，视频通过嵌入式播放器播放。观看页面上的点赞、点踩和评论提交都能正常工作。搜索能返回匹配的视频，观看历史也记录了已看过的内容。

上传流程新增了两种缩略图方式：拖动视频进度选择某一帧，或上传一张单独的图片。帧选择测试使用了一段78.6MB的道路视频。字幕控件和由ImageKit支持的自动字幕也经过了检查，首次上传后转写需要几分钟，而不是立即出现。

▲ 媒体功能与验证

这些检查并没有让每个页面或每个数字都同样可靠。评估这次构建究竟证明了什么时，以下区分很重要：

观看次数不能立即更新是另一个明显问题。创作者仪表盘可用于测试布局和导航，但其中的合成频道和指标不应被视为真实使用的证据。计划中的部分功能，包括仅限会员访问，并未通过已进行的检查得到确认。

在工作流程中保留人工审查环节

构建类似应用时，先明确目标用户、必需功能、排除功能、技术栈和完成标准。在允许大范围实现之前，先审查生成的计划。然后分阶段检查应用：服务访问、认证、设计、上传、播放，以及每个仪表盘背后的数据。出现问题时，像这次登录失败那样，把预期行为和实际结果告诉Claude Code。

智能体可以快速连接和修改组件；但范围、访问规则、修复方式和报告的指标是否适合应用，仍要由开发者决定。