用 Claude Code 从零到上线构建完整应用的实战方法

一位有十余年经验的软件工程师用 Claude Code 完整走了一遍从规划到部署的开发流程，构建了一个功能齐全的 YouTube 克隆应用。这个过程最有价值的地方不在于最终做出了什么，而在于它展示了专业工程师如何使用 AI 编程工具——与那些纯靠「vibe coding」（凭感觉堆代码）的做法形成鲜明对比。

核心观点只有一个：在动手让 AI 写代码之前，你花在规划、选型和配置上的时间，直接决定了最终产出的质量。本文梳理这套可复用的工作流，无论你是不是工程师都能照搬到自己的项目里。

先做计划，不要让 AI 当船长

作者反复强调，使用 AI 时最容易踩的坑是让模型「自作主张」。Claude 这类模型在没有明确约束时会主动添加你从未要求的功能，带来不必要的复杂度，最终让你失去对项目的掌控。真正的做法是——你当船长，AI 是执行者。

动手前必须想清楚几个问题：目标是什么？为什么要做？什么时候算完成？以及最关键的——最小可行产品（MVP）的边界在哪里。

一个实用技巧是善用 Claude 的「计划模式」（通过 Shift+Tab 切换）。作者推荐用语音口述自己想要什么，然后在提示词末尾加上一句固定话术：「请提出任何你需要澄清需求的问题，并给出详细计划」。这会促使 Claude 反过来追问你，而不是直接开写。在这个阶段，你需要确定技术栈——是 Web 应用、桌面端还是移动端？用什么后端和前端框架？如果不熟悉，可以直接让 Claude 解释不同选型的权衡。

本次项目的技术栈是明确指定的「非谈判项」：Next.js + Tailwind 做前端，Supabase 处理认证、存储、边缘函数等全部后端能力，image kit 作为 CDN 和视频播放器，负责流媒体、自适应码率、缩略图和字幕等所有媒体层工作。

配置 Skills 与 MCP 服务器

计划定好后，第二步是给 Claude 装备工具，让它能尽可能自动化地完成任务，减少人工干预。作者强调这一步应该在项目开始时就做好。

首先是 Skills（技能）。通过 /skills 命令可查看已有技能。作者特意安装了两个关键技能：front-end design skill 和 UI/UX Pro Max skill。安装方式很简单——把对应的 GitHub 仓库 URL 粘贴给 Claude，让它自己识别并安装正确的技能文件。这两个技能的作用是让界面摆脱「一眼 AI」的粗糙感（即所谓的 AI slop），生成更专业、更一致的设计系统。

接下来是 MCP 服务器。作者接入了 Supabase 的 MCP server——在另一个终端窗口运行官方命令即可自动添加，之后通过 /mcp 命令完成账户授权。授权后 Claude 就能自动修改后端配置，无需手动操作。Supabase 作为 MVP 级后端尤其合适，用户量不大的 AI 项目用它足够了。

针对 image kit，作者通过 /plugin 命令安装了两个插件。他特别指出一个值得养成的习惯：现在很多现代框架都提供了 AI Skills、MCP server 或某种 agent 连接，开始构建前先检查你要用的工具有没有这类集成并装上。

MCP（Model Context Protocol）是 Anthropic 推出的开放协议，允许 AI 模型通过标准化接口与外部工具、数据库和服务进行双向通信。与传统 API 调用不同，MCP 服务器让 Claude 能够主动读写外部系统的状态——例如直接在 Supabase 中创建数据表、修改 RLS 策略，而不仅仅是生成代码让人类手动执行。这种「AI 直接操作基础设施」的能力大幅缩短了开发循环，但也意味着授权时需要谨慎评估权限范围。目前 Supabase、GitHub、Linear、Stripe 等主流开发工具均已推出官方 MCP 服务器，构成了所谓「AI-native 开发工具链」的基础层。Skills 则是另一层抽象——它本质上是注入到 Claude 上下文中的专用提示词或指令集，用于在特定领域（如前端设计规范）持续约束模型的输出风格和决策偏好。

搭建骨架与填入密钥

切换到自动模式（Auto mode）后，Claude 开始搭建应用骨架。这里出现了第一个需要人工介入的点：image kit 的四个配置值是占位符——需要填入 image kit ID、URL endpoint、公钥和私钥。

这些值可以在 image kit 账户的开发者选项中找到。作者直接把它们粘贴进对话（他也坦言这并非最佳安全实践，但 Claude 本来就能读取项目文件）。填好后运行 npm run dev 启动开发服务器。

首次测试注册登录时就遇到了 bug：注册显示成功并提示发送邮件，但邮件从未到达，用同样的凭据登录却提示「无效凭证」。作者的处理方式很有参考价值——遇到问题不要慌，用尽可能详细的语言把现象描述给 Claude，包括完整的复现步骤。描述清楚后问题很快被修复。

用设计系统避免「AI 味」界面

在功能继续堆叠之前，作者先做了一件专业开发者常做、但 vibe coder 往往跳过的事——建立设计系统。

设计系统是一套可复用的组件集合：图标、卡片、排版、输入框、页头等。真正的工程做法是先设计好这些独立组件，再把它们拼装到各个页面上，而不是让 AI 每次临场发挥。

作者给出的提示词要求 Claude 使用 front-end design skill 建立一套设计系统：深色主题、近黑背景、单一克制的强调色、高对比度、紧凑排版，并定义设计 token 和缩略图卡片，最后把所有组件渲染到 /design 这个样式展示页上，方便在应用到真实页面之前先行审核和逐个微调。确认满意后再一次性应用到整个项目。应用后界面质量明显提升。

「AI slop」（AI 生成的粗糙内容）在 UI 层面有几个典型特征：过度饱和的渐变色、大量无衬线字体混用、组件间距不一致、卡片圆角半径随机变化，以及每个页面风格自成一体却彼此割裂。这种现象的根本原因是：没有约束的 AI 每次生成组件时都会「重新发明轮子」，缺乏统一的设计 token 作为锚点。设计系统（Design System）通过预先定义颜色变量、间距比例、字号层级、阴影规格等 token，将所有视觉决策收敛到单一来源。在工程实践中，这些 token 通常以 CSS 自定义属性或 Tailwind 配置的形式存在，确保任何组件在任何页面上渲染结果的一致性。作者将设计系统渲染到独立的 /design 路由，是一种常见的「组件画廊（Component Gallery）」实践，类似于 Storybook 的轻量替代方案，便于在集成到真实页面前对每个原子组件单独审查和调整。

补齐视频、缩略图与分析功能

基础跑通后，作者逐步补齐 YouTube 的核心体验。image kit 新发布的视频播放器承担了大量工作：自适应码率流媒体、自定义品牌、播放列表、字幕章节，甚至还内置了视频分析能力，并提供「Copy for LLM」按钮方便喂给 AI。

缩略图功能支持两种方式：在上传流程中拖动进度条「捕获当前帧」作为封面，或直接上传自定义缩略图，上传后封面会一并存入 image kit。

字幕方面，播放器支持 AI 自动生成，但作者测试时发现首次生成需要几分钟，当场没能立即显示。随后他让 Claude 做了两件事：实现创作者的「YouTube Studio」分析页面（展示观看量、观看时长、订阅数、点赞评论等），以及生成一批 stub 假数据账户，这样就能模拟订阅其他频道、查看非本人账户的行为，从而完整验证分析和订阅逻辑。视频分析数据可直接从 image kit 播放器内置能力获取，或通过 API 拉取到自己的面板展示。

自适应码率流媒体（Adaptive Bitrate Streaming，ABR）是现代视频平台的核心技术，其原理是将同一视频预先编码为多种分辨率和码率的版本，播放器根据当前网络带宽实时切换最优版本，从而在保证流畅播放的同时尽量提供最高画质。HLS（HTTP Live Streaming）和 DASH（Dynamic Adaptive Streaming over HTTP）是目前最主流的两种 ABR 协议。image kit 作为媒体 CDN，承担了视频转码、切片分发和播放器 SDK 的全部工作，开发者无需自行搭建转码管道——这正是作者将其选为「媒体层」的核心原因。对于 MVP 阶段的项目而言，把这类基础设施外包给专业服务商，可以避免在与核心业务逻辑无关的底层工程上耗费大量时间，与项目整体「尽快验证、减少自建」的策略保持一致。

这套方法的真正价值

作者最后坦言还有大量功能可以继续扩展，但他想展示的核心是流程本身：如何搭建项目、接入关键集成、选对工具、配置技能和设计系统，以及用 AI 做大规模代码生成时的最佳实践。

他能在很短的提示轮次内做出一个功能完整的应用、几乎没遇到大的障碍，原因归结为三点：前期做了正确的决策、花时间认真规划、用对了工具。这与「打开 Claude 直接让它随便写」的方式形成本质区别——后者短期看似更快，长期却会陷入返工和失控。

对想上手 AI 编程的人来说，可借鉴的要点很清晰：别省掉规划阶段，把技术栈当作明确约束传达给 AI，提前装好相关 Skills 和 MCP 服务器，先做设计系统再做页面，遇到 bug 用详细描述而非模糊抱怨去沟通。工具再强，掌舵的始终应该是你。