Claude Code 入门教程：15 分钟构建电影 App (2025)

本教程旨在为初学者提供使用 Claude Code 的详细指导。Claude Code 被认为是当前市场上最优秀的 AI 代理之一，其强大功能通过实际操作更能直观体现。我们将首先学习如何在终端和 Cursor IDE 中安装 Claude Code。随后，我们将克隆一个电影发现应用，并利用 Claude 来解释其代码库的工作原理。为了让应用程序在本地运行，我们会安装必要的依赖，并配置 TMDB API 密钥。接着，我们将进入计划模式，为应用添加收藏列表功能制定详细的规范。在编码之前，我们将创建一个 claude.md 文件以存储项目上下文和最佳实践。最后，我们将让 Claude Code 构建收藏列表功能，并验证其效果。

Claude Code 的安装过程非常简单，只需在终端中粘贴一行命令即可。打开您的终端应用程序，复制安装命令，然后粘贴并执行。安装完成后，键入 `claude` 即可启动 Claude Code，它将在终端中准备就绪，随时待命。

虽然可以在终端中使用 Claude Code，但许多开发者更倾向于在集成开发环境（IDE）中进行操作，例如 Cursor。在 Cursor 项目中打开内置终端，然后输入 `claude` 命令。确认信任文件后，Claude Code 便可在 Cursor 中使用。这种方式的优势在于，您可以方便地在 IDE 中查看和编辑项目文件，这比在独立的终端窗口中操作更为高效和直观。

为了演示 Claude Code 的功能，我们将克隆一个功能强大的电影应用。这个应用允许用户浏览最新电影，甚至观看电影预告片。在您的 Cursor 项目中，只需使用 `git clone` 命令并提供应用仓库的链接，即可将该应用快速导入到您的本地开发环境。

克隆应用后，我们将利用 Claude Code 强大的分析能力来解释代码库的工作原理。Claude 会自动探索文件结构，并提供详细的应用概述。这个电影和电视发现应用提供类似 Netflix 的浏览体验，用户可以发现、搜索内容，并访问带有预告片链接的详细内容页面。了解代码库是进一步开发和修改应用的基础。

在技术架构方面，该应用从 The Movie Database (TMDB) 获取电影和电视节目数据，而非 IMDb。需要注意的是，它要求配置一个 API 密钥才能正常运行。前端使用 TypeScript 和 Tailwind CSS 构建，这些都是行业标准的技术栈。即使您不完全理解所有技术细节，Claude 也能帮助您快速掌握现有代码库，这是加速学习和提高技术能力的重要方法。

作为非工程师，让 Claude 解释不同的代码库是学习编写代码和变得更技术化的最佳方式之一。

现在，我们将让 Claude 安装所有依赖并尝试在本地运行应用。Claude 有时会请求权限执行操作，通常选择允许。值得注意的是，通过提前让 Claude 理解代码库，它会智能地创建一个 `.env` 文件，其中包含 TMDB API 配置的占位符值，并提示您添加 API 密钥。这再次证明了前期提供充分上下文的重要性，可以帮助 Claude 做出更明智的选择。

完成 API 密钥的配置后，应用程序即可在 localhost 5173 上运行，并能正常加载电影和电视节目。在 TMDB 网站上注册免费账户并获取 API 密钥是至关重要的步骤。一旦您将 API 密钥添加到 `.env` 文件中，并让 Claude Code 进行更新，您将看到应用程序显示出完整的电影列表和功能。

在添加新功能（例如收藏列表）时，关键在于不直接要求 Claude Code 编写代码，而是先让它进入“计划模式”来制定规范。通过按 Shift+Tab，您可以激活计划模式，Claude 将进行研究和规划，而不会立即修改代码库。这允许在编码之前对功能进行充分的思考和定义，避免不必要的返工。

在计划模式中，向 Claude 提供一个基本的规范要求：“我想添加收藏列表功能，保存我喜欢的电影和电视剧。创建一个 `spec` 文件夹，并编写详细的规范，包括需求、设计方法和技术栈。保持简单，以便我能随时测试。”其中，“保持简单”这一指示非常重要，因为 AI 模型往往会过度复杂化功能集。明确要求其逐个构建功能，有助于在开发过程中进行测试，并确保代码的稳定性。

这些模型倾向于使功能集过于复杂，因此加入‘保持简单’这一行，并让它逐个构建功能，将有助于您测试事物，并确保没有任何东西中断。

当 Claude 生成规范后，务必进行审查。如果 Claude 在没有指示的情况下开始实施，应立即按 Esc 键取消其操作。好的产品经理或工程师会先审查规范，然后再进行下一步。生成的规范应详细说明收藏列表的功能，包括添加/移除电影、查看列表、使用本地存储进行数据持久化，以及技术设计和实施阶段（核心基础设施、UI 集成、增强功能等）。这些内容为 Claude Code 正确实施功能提供了极其重要的上下文。

规范中还会列出实施阶段，例如第一阶段为核心基础设施，第二阶段为 UI 集成，第三阶段为增强功能。在此阶段，您应仔细审查 Claude 提议的所有功能。例如，如果某些功能如“toast 通知”或“批量操作”并非您所需，应立即将其删除。切除范围并简化功能至关重要，这样才能分步构建功能，确保开发过程可控且高效。

在让 Claude Code 开始编写收藏列表功能之前，还有另一个重要步骤：初始化一个 `claude.md` 文件。`claude.md` 文件是为您的项目提供持久记忆的关键。在每次 Claude Code 会话中，这个文件都会被加载到提示中，这意味着它包含了项目的重要上下文，能够帮助 Claude 更好地理解代码库并做出更准确的决策。

最佳实践是输入 `/init` 命令，让 Claude 创建这个 `claude.md` 文件。该文件通常会包含关于环境设置、应用程序工作方式、组件模式、样式方法和项目结构等内容，这些都是 Claude 理解代码库所必需的重要上下文。拥有这些详细信息，Claude 可以更有效地协助开发。

您还可以更新 `claude.md` 文件，加入开发最佳实践，例如要求 Claude 在每一步编写测试、撰写描述性的提交信息，以及遵循现有的代码模式。这些提示有助于确保开发质量和一致性。这一灵感来源于对 Lee Robinson 的采访，他在其中分享了关于 Cursor 的见解。所有这些前期工作——规划、创建规范和提供上下文——对于有效使用 Claude Code 至关重要，而不是简单地要求它直接添加功能。

经过详尽的规划和上下文准备，现在终于可以要求 Claude Code 实施收藏列表功能了。由于我们在 `claude.md` 文件中指示了要编写测试，因此 Claude 应该在整个开发过程中自动编写测试来检查其工作。此时，开发者通常可以稍作休息，让 Claude 自主完成编码任务。

在 Claude 全面实施之前，可以随时键入 `/todos` 命令查看其当前的待办事项列表状态。这允许您在 Claude 开始实际编程之前快速审查计划。例如，待办事项可能包括“创建 Redux 存储”、“添加本地存储”或“创建收藏列表按钮”。审查这个列表有助于确保所有步骤都与之前定义的规范保持一致，并在必要时进行调整。

一旦 Claude 完成了所有待办事项，我们将在本地主机上验证收藏列表功能。您会注意到电影详情页上出现了一个心形按钮，用于将电影或电视节目添加到收藏列表。经过测试，添加和移除功能均正常工作，并且可以从详情页添加内容。这证明了 Claude 能够一次性成功构建完整的功能，但这不是凭空发生的，而是通过严格遵循规划、检查计划、创建 `claude.md` 文件和审查待办事项列表等步骤实现的。

如果本次教程您只学到一件事，那就是您前期做的规划越多，Claude 就越有可能在没有任何问题的情况下构建您的功能。

总之，本初学者教程展示了如何在短短 15 分钟内克隆电影应用并添加收藏列表功能。关键在于前期的大量规划工作，包括让 Claude 编写功能规范、创建包含最佳实践的 `claude.md` 文件，以及制定详细的待办事项列表并进行仔细检查。所有这些步骤都为 Claude Code 的成功实施奠定了基础，使其能够高效且无误地完成任务。