Claude Code 实战：从零构建 YouTube 克隆全流程解析

作为一名有十年经验的软件工程师，用 AI 工具构建真实可上线的应用，和「凭感觉写代码」是两码事。本文基于一位 B 站 UP 主的完整实战演示，拆解如何用 Claude Code（视频中称为 Cloud）从零搭建一个功能完整的 YouTube 克隆——包含创作者工作室、视频上传、播放器、数据分析等模块。整个流程强调的不是让 AI 天马行空，而是让工程师始终掌控全局。

先规划，再动手：AI 项目最容易被忽视的一步

使用 Claude 系列模型时有个常见陷阱：它容易「绕来绕去」，构建出你从未要求过的功能，增加不必要的复杂性。作者反复强调，开始新项目前必须想清楚三件事——目标是什么、为什么要构建、什么时候算真正完成。

具体做法是打开 Claude Code 的终端版本（而非桌面应用，作者认为终端版功能更强），按 Shift + Tab 切换到计划模式（Plan Mode）。在这个模式下，Claude 不会急着写代码，而是先思考规划问题。

一个实用技巧是：用语音把需求「乱七八糟」地说一通，然后在提示词末尾补上一句「问我任何你需要澄清构建需求的问题」。这句话会促使 Claude 主动追问更深入的细节，而不是自作主张。

作者给出的完整需求提示词很值得参考：明确要求「双端视频平台」（观众端网站 + 创作者工作室）、首页信息流、观看页、播放列表、深色主题、拖拽式上传、会员专属标记。更关键的是划定了「不可协商」的技术栈，并明确要求 Claude「范围严格限制在我列出的内容，不要加搜索或订阅之类的功能」——用边界约束防止 AI 过度发挥。

技术栈选型：让 AI 做执行者，你做决策者

技术选型直接决定项目后续质量，而这必须由人来引导。视频中的组合是：

• Next.js + Tailwind：前端框架与样式
• Supabase：处理认证、数据库、边缘函数、存储等全部后端
• ImageKit：作为 CDN 与视频播放器，负责流媒体、自适应码率、缩略图、字幕

作者的观点很明确：如果你对技术栈不熟悉，可以直接让 Claude 解释不同前后端框架、语言之间的取舍，但最终「你要做那个引导方向的人」。选择 ImageKit 的一个重要理由，是它新发布的视频播放器功能——支持自定义品牌、播放列表、自适应码率、字幕章节，甚至内置了分析数据能力。

ImageKit 是一个专注于媒体优化的云服务平台，其核心能力包括图片与视频的实时转码、CDN 分发、自适应码率流媒体（ABR）以及 AI 驱动的自动字幕生成。自适应码率技术（Adaptive Bitrate Streaming，ABR）会根据观看者当前的网络带宽动态切换视频质量档位——网速好时自动升至 1080p，网络拥堵时降至 480p——这正是 YouTube、Netflix 等平台流畅播放体验的底层机制。对于独立开发者而言，ImageKit 的价值在于把原本需要 FFmpeg 转码服务器、HLS 分片逻辑、多 CDN 节点这一套复杂基础设施，压缩成一个 API 调用和一段播放器嵌入代码，极大降低了视频类应用的技术门槛。

用 Skills 和 MCP 武装 Claude Code

这是整个流程中最具参考价值的部分：在真正构建前，先给 Claude Code 装备好工具链，让它能自动完成一切、无需人工频繁介入。

安装 Skills 技能

通过 /skills 命令可查看可用技能。作者重点安装了两个：

• 前端设计技能（Frontend Design）
• UI/UX Pro Max 技能

安装方式很简单——复制对应的 GitHub 仓库 URL，直接粘贴给 Claude 并让它安装到当前项目。这两个技能的核心作用是避免生成「千篇一律的 AI 垃圾网站」，产出更接近真实产品的界面与设计系统。

连接 MCP 服务器

输入 /mcp 可查看已连接的 MCP 服务器。作者演示了如何在另一个终端窗口运行命令添加 Supabase MCP 服务器，完成后 Claude 会询问是否使用该服务器，选「是」后通过浏览器登录 Supabase 账户完成授权。授权后，Claude 就能自动对指定项目做数据库和后端更改，无需手动操作。

对于 ImageKit，作者同样通过 plugin 命令添加了两个项目范围的插件，让 Claude 能自动调用 ImageKit 处理所有图片和视频资源。他还特意把 ImageKit 新视频播放器的文档参考粘贴给 Claude，明确要求「构建时一定要用这个功能」并更新计划文件。

作者提醒：现在很多现代框架都在加入 AI 技能、MCP 服务器或某种链接，无论你用什么工具，动手前都应该先看看它们有没有 Agent 技能可以预装。

MCP（Model Context Protocol）是 Anthropic 于 2024 年底推出的开放协议，旨在标准化 AI 模型与外部工具、数据源之间的连接方式。可以把它理解为「AI 的 USB 接口」——只要服务商实现了 MCP 服务器，Claude 就能通过统一协议直接操作该服务，而无需为每个工具单独编写集成代码。目前已有 Supabase、GitHub、Figma、Postgres 等大量平台提供官方 MCP 服务器。Skills（技能）则是另一层抽象，本质上是预先写好的提示词模板与上下文规则集，告诉 Claude 在特定领域（如前端设计）应遵循什么标准和风格。两者结合使用，相当于在启动项目前就给 AI 装好了「领域专家记忆」和「自动化操作手臂」，大幅减少后续需要手动介入的环节。

从脚手架到上线：构建阶段的实践细节

准备就绪后，按 Shift + Tab 切换到自动模式，让 Claude 先完成应用脚手架。生成后会遇到一个典型环节：ImageKit 的四个配置值（ID、URL 端点、公钥、私钥）都是占位符。作者的做法是从 ImageKit 开发者选项里复制真实值，直接粘贴到聊天中让 Claude 填入项目（他坦承这不是最佳实践，但胜在方便）。

运行 npm run dev 启动后开始测试，问题也随之出现——注册显示成功但收不到邮件，用相同凭据登录却提示「凭据无效」。作者的处理原则值得记住：遇到问题别慌，尽量详细地把现象描述给 Claude。他把完整的复现步骤描述后，问题很快被修复。

建立设计系统而非临时拼凑

很多 AI 应用只是「临时想出」设计，但要做成真正能分享的软件，需要一套可复用的设计系统——按钮、卡片、排版、输入框等组件在全站保持一致。作者用前端设计技能建立了深色主题设计系统（接近黑色背景、克制的强调色、高对比度、紧凑排版），并要求在 /design 路径生成一个样式指南页面，先评判组件效果，再应用到真实页面。

应用设计系统后，界面明显专业了许多。随后作者继续迭代：添加自定义缩略图功能（可从视频帧「捕获当前帧」或上传自定义图）、验证视频播放器的加载速度与倍速播放、测试 ImageKit 自动生成字幕的能力。

设计系统（Design System）是一套包含组件库、设计规范和使用准则的可复用资产集合，目标是确保产品各页面在视觉与交互上保持一致性。对于 AI 辅助开发的项目而言，建立设计系统尤为关键——因为 AI 在每次生成界面时若没有明确约束，很容易出现按钮颜色、字体大小、间距规则在不同页面自相矛盾的情况，导致产品看起来像「拼凑出来的」。通过先生成一个 /design 样式指南页面，工程师可以在将组件应用到真实业务页面前集中审查并调整，相当于给 AI 的后续生成行为设置了一个可视化的「对齐锚点」。这一做法借鉴了成熟前端团队中「先建 Storybook 组件库、再搭页面」的工程惯例。

数据分析与创作者工作室：最后的功能拼图

最后一块是数据分析和类 YouTube 工作室功能。由于 ImageKit 播放器内置了视频分析能力，追踪数据可以直接在其仪表盘查看，也能通过 API 拉取到自建界面。

作者让 Claude 构建了一个精简版创作者工作室，展示观看次数、观看时长、订阅者、点赞、评论等指标，并可下钻到单个视频。同时让 Claude 伪造了一批假账号和数据，用于测试订阅其他频道、搜索、观看历史等功能——解决了「自己无法订阅自己频道」的测试盲区。

结论：好结果来自开头的正确决策

作者坦言项目仍有大量可完善之处，但他想传递的核心并非「做完一个 YouTube」，而是一套用 AI 工具构建真实应用的方法论：提前做详细规划、选对技术栈、装好正确的 Skills 与 MCP 工具、建立设计系统。

正是因为在开头做对了这些决策，后续用极少的提示词就几乎没遇到障碍地完成了功能完整的应用。这也是「工程师用 AI」和「凭感觉写代码」之间的本质区别——AI 是强大的执行者，但方向盘始终握在人手里。