章节 1：环境搭建与安装 (Environment Setup and Installation)

📝 本节摘要：

本节主要介绍了如何在 Mac 和 Windows 系统上安装 Claude Code。讲者特别指出 PowerShell 脚本可能存在的问题，并推荐使用 NPM（Node Package Manager）作为更稳健的安装方式。此外，还涵盖了登录账户、集成 IDE（Visual Studio Code）以及初始化 Git 仓库的基础设置流程。

[原文] [Kevin Stratvert]: I don't write code by hand anymore. I just ask Claude.

[译文] [Kevin Stratvert]: 我不再手动写代码了。我直接问 Claude。

[原文] [Kevin Stratvert]: And in this video, I've partnered with Anthropic to break down three things that I wish I knew about Vibe Engineering before I started.

[译文] [Kevin Stratvert]: 在这个视频中，我与 Anthropic 合作，以此拆解我在开始之前希望自己了解的关于“氛围工程（Vibe Engineering）”的三件事。

[原文] [Kevin Stratvert]: Starting with number one, how to create apps from scratch.

[译文] [Kevin Stratvert]: 首先是第一点，如何从零开始创建应用程序。

[原文] [Kevin Stratvert]: Head to the link in the description below and let's install Claude Code together.

[译文] [Kevin Stratvert]: 前往下方简介中的链接，让我们一起安装 Claude Code。

[原文] [Kevin Stratvert]: First up, for Mac users, from the homepage, use this copy button to copy the bash script and run it in a terminal window.

[译文] [Kevin Stratvert]: 首先，对于 Mac 用户，在主页上，使用这个复制按钮复制 bash 脚本，并在终端窗口中运行它。

[原文] [Kevin Stratvert]: But for Windows users, that script looks like this, and it's actually PowerShell.

[译文] [Kevin Stratvert]: 但对于 Windows 用户，脚本看起来是这样的，它实际上是 PowerShell 脚本。

[原文] [Kevin Stratvert]: Now, I ran into problems with this script. So, I'm going to show you another approach using npm.,

[译文] [Kevin Stratvert]: 实际上，我在使用这个脚本时遇到了一些问题。所以，我要向你展示另一种使用 npm 的方法。

[原文] [Kevin Stratvert]: If you don't have npm installed or you're not sure, head over to nodejs.org.

[译文] [Kevin Stratvert]: 如果你没有安装 npm 或者不确定是否安装，请前往 nodejs.org。

[原文] [Kevin Stratvert]: Click this big green button that says get NodeJS. Scroll down and click the green button to download the installer.

[译文] [Kevin Stratvert]: 点击那个写着“Get NodeJS”的大绿色按钮。向下滑动并点击绿色按钮下载安装程序。

[原文] [Kevin Stratvert]: After you successfully install node, you should be able to open a command prompt, type in node-v and see the node version returned that you have installed.

[译文] [Kevin Stratvert]: 成功安装 Node 后，你应该可以打开命令提示符，输入 node -v，并看到返回的你所安装的 Node 版本号。

[原文] [Kevin Stratvert]: Then you use npm install to install cloud code.

[译文] [Kevin Stratvert]: 然后你使用 npm install 来安装 Claude Code。

[原文] [Kevin Stratvert]: You can copy this exact line from the description under the resources section.

[译文] [Kevin Stratvert]: 你可以从简介下方的资源部分复制这行确切的代码。

[原文] [Kevin Stratvert]: Then type claude and press enter to set it up.

[译文] [Kevin Stratvert]: 然后输入 claude 并按回车键进行设置。

[原文] [Kevin Stratvert]: First, choose your text style. I'm going to stick with dark mode.

[译文] [Kevin Stratvert]: 首先，选择你的文本风格。我会坚持使用深色模式。

[原文] [Kevin Stratvert]: Then choose how you want to set up your subscription. I'm going to stick with my cloud account.

[译文] [Kevin Stratvert]: 然后选择你想如何设置你的订阅。我会继续使用我的云账户。

[原文] [Kevin Stratvert]: Go ahead and sign in and I'll see you on the other side.

[译文] [Kevin Stratvert]: 请继续登录，我们在另一端见。

[原文] [Kevin Stratvert]: Once you've connected your account, success means you see something like this.

[译文] [Kevin Stratvert]: 一旦你连接了账户，看到像这样的界面就意味着成功了。

[原文] [Kevin Stratvert]: Now, Claude Code is great inside of a terminal window, but it's even better when it's integrated with your IDE.

[译文] [Kevin Stratvert]: Claude Code 在终端窗口中表现很棒，但当它与你的集成开发环境（IDE）集成时效果更好。

[原文] [Kevin Stratvert]: For that reason, I'm going to take you through using Cloud Code inside of Visual Studio Code.

[译文] [Kevin Stratvert]: 因此，我将带你在 Visual Studio Code 中使用 Claude Code。

[原文] [Kevin Stratvert]: Now, two more quick things for setup and then let's jump into our first app.

[译文] [Kevin Stratvert]: 现在，还有两件快速设置的事情，然后我们就开始构建第一个应用程序。

[原文] [Kevin Stratvert]: First, let's set up a Git repo. You can do that by opening a new terminal window by pressing control shiftbacktick.

[译文] [Kevin Stratvert]: 首先，让我们设置一个 Git 仓库。你可以通过按 Control + Shift + Backtick 打开一个新的终端窗口来完成此操作。

[原文] [Kevin Stratvert]: Then type get and then press enter.

[译文] [Kevin Stratvert]: 然后输入 git 并按回车。

[原文] [Kevin Stratvert]: Next, we need a command prompt to open claude code. So click on this drop-own arrow and then click on command prompt.

[译文] [Kevin Stratvert]: 接下来，我们需要一个命令提示符来打开 Claude Code。所以点击这个下拉箭头，然后点击命令提示符。

[原文] [Kevin Stratvert]: Then type in claude and press enter. Press one to trust this directory and off we go.

[译文] [Kevin Stratvert]: 然后输入 claude 并按回车。按 1 信任此目录，我们就开始了。

章节 2：从零构建应用：提示词工程与计划模式 (Building from Scratch: Prompt Engineering and Plan Mode)

📝 本节摘要：

本节主要讲解了构建办公杂务管理应用（Chore App）的需求。讲者对比了模糊的“氛围编码（Vibe Coding）”与包含明确技术要求的结构化提示词的区别。重点介绍了 Claude Code 的“计划模式（Plan Mode）”，展示了如何通过让 AI 反向提问来完善需求，从而生成更严谨的开发计划。

[原文] [Kevin Stratvert]: Let's create a chore app to manage chores at the office. Here are the requirements.

[译文] [Kevin Stratvert]: 让我们创建一个杂务应用来管理办公室的杂务。以下是需求。

[原文] [Kevin Stratvert]: Show a calendar view like Outlook to see all our current chores. allow adding and removing chores, make chores recurring on a schedule, assigning chores to team members, and adding and removing team members.,

[译文] [Kevin Stratvert]: 显示一个类似 Outlook 的日历视图以查看我们当前所有的杂务。允许添加和移除杂务，使杂务按计划循环，将杂务分配给团队成员，以及添加和移除团队成员。

[原文] [Kevin Stratvert]: So, what do you write inside this little box to get started? If you were vibe coding, you might put in something like this.

[译文] [Kevin Stratvert]: 那么，你在那个小框里写些什么来开始呢？如果你是在进行“氛围编码”，你可能会输入像这样的内容。

[原文] [Kevin Stratvert]: Make a chore app to manage chores at the office. It should show a calendar view like Outlook to see all our current chores.

[译文] [Kevin Stratvert]: 制作一个杂务应用来管理办公室的杂务。它应该显示一个类似 Outlook 的日历视图以查看我们当前所有的杂务。

[原文] [Kevin Stratvert]: But these product requirements are really vague and it misses out on technical requirements like the tech stack or the storage solution or even the architecture as well as engineering principles like how you want the code written.

[译文] [Kevin Stratvert]: 但这些产品需求非常模糊，而且它遗漏了技术需求，比如技术栈（tech stack）或存储解决方案，甚至架构，以及工程原则，比如你希望代码如何编写。

[原文] [Kevin Stratvert]: So here's what I recommend instead. I'll press escape twice to clear the prompt area.,

[译文] [Kevin Stratvert]: 所以这是我推荐的替代方案。我会按两次 ESC 键来清空提示区域。

[原文] [Kevin Stratvert]: I'll write a new prompt which lists the high priority requirements as bullets and then at the end tells Claude to ask me questions to clarify requirements, engineering principles, hard constraints, etc.

[译文] [Kevin Stratvert]: 我会写一个新的提示词，以要点形式列出高优先级需求，然后在末尾告诉 Claude 向我提问，以澄清需求、工程原则、硬性约束等。

[原文] [Kevin Stratvert]: By the way, you can type new lines in the prompt by holding Alt or Option and pressing enter.

[译文] [Kevin Stratvert]: 顺便说一下，你可以通过按住 Alt 或 Option 键并按回车键在提示框中换行。

[原文] [Kevin Stratvert]: Finally, you need to go into plan mode. So, hold the shift key and press tab until you see plan mode in the bottom left.

[译文] [Kevin Stratvert]: 最后，你需要进入计划模式。所以，按住 Shift 键并按 Tab 键，直到你在左下角看到“Plan Mode（计划模式）”。

[原文] [Kevin Stratvert]: Now, when you press enter, Claude gets to work.

[译文] [Kevin Stratvert]: 现在，当你按回车时，Claude 就开始工作了。

[原文] [Kevin Stratvert]: It starts reasoning about the code to write and then figuring out what are the right questions to ask you to get to the next step of its plan.,

[译文] [Kevin Stratvert]: 它开始推理要编写的代码，然后弄清楚应该问你什么正确的问题，以便进入其计划的下一步。

[原文] [Kevin Stratvert]: When it's in plan mode, it will never write code automatically. It will always confer with you first.

[译文] [Kevin Stratvert]: 当处于计划模式时，它永远不会自动编写代码。它总是会先与你商议。

[原文] [Kevin Stratvert]: By the way, I've included this prompt and all the prompts from the video under the resources section in the description.

[译文] [Kevin Stratvert]: 顺便提一下，我已经把这个提示词和视频中的所有提示词都放在了简介的资源部分。

[原文] [Kevin Stratvert]: Here's the first set of questions. Your questions may differ. Let's make this a React app by pressing one.

[译文] [Kevin Stratvert]: 这是第一组问题。你的问题可能会有所不同。让我们按 1 来把它做成一个 React 应用。

[原文] [Kevin Stratvert]: We'll keep things simple by choosing local storage. This will run on a big TV screen in the office, so no off is needed.

[译文] [Kevin Stratvert]: 我们通过选择本地存储（Local Storage）来保持简单。这将运行在办公室的大电视屏幕上，所以不需要验证（auth）。

[原文] [Kevin Stratvert]: Claude's also asking us about extra features, so let's turn on two and three.,

[译文] [Kevin Stratvert]: Claude 也在询问关于额外功能的问题，所以让我们开启选项 2 和 3。

[原文] [Kevin Stratvert]: If you ever need to change your answers in this model, you can use the left and right arrow keys to switch between questions. Then press one to submit your answers.

[译文] [Kevin Stratvert]: 如果你需要在这个模式下更改答案，你可以使用左右箭头键在问题之间切换。然后按 1 提交你的答案。

[原文] [Kevin Stratvert]: Claude will now keep going until it reaches the next set of questions or it completes your plan.

[译文] [Kevin Stratvert]: Claude 现在会继续运行，直到它到达下一组问题或完成你的计划。

[原文] [Kevin Stratvert]: Now it's asking us some more questions about product requirements.

[译文] [Kevin Stratvert]: 现在它问了我们更多关于产品需求的问题。

[原文] [Kevin Stratvert]: I found that when you include this ask me questions to clarify the requirements part of your prompt, you'll get a richer discussion in plan mode.,

[译文] [Kevin Stratvert]: 我发现当你在提示词中包含“问我问题以澄清需求”这一部分时，你会在计划模式中获得更丰富的讨论。

章节 3：审查实施计划与代码生成 (Reviewing Implementation Plan and Code Generation)

📝 本节摘要：

Claude 根据需求生成了详细的实施计划。讲者展示了如何像审查资深工程师的代码一样审查该计划，并演示了如何介入修改技术决策（例如将 JavaScript 改为 TypeScript）。随后，讲者展示了自动接受所有代码更改的过程，Claude 随即生成了整个应用程序。讲者最后选择手动启动服务器以保持控制权。

[原文] [Kevin Stratvert]: So now it's got all the information that it needs. It's going to create the implementation plan for our review.

[译文] [Kevin Stratvert]: 现在它已经获得了所需的所有信息。它将创建实施计划供我们审查。

[原文] [Kevin Stratvert]: I find this process is like working with a teammate or fellow senior engineer to help plan exactly what you're going to do before you execute.

[译文] [Kevin Stratvert]: 我发现这个过程就像是与队友或资深工程师同事合作，在执行之前帮助规划你要做的具体事情。

[原文] [Kevin Stratvert]: And a few seconds later, we get the plan. This is your opportunity to review before Claude starts writing code.

[译文] [Kevin Stratvert]: 几秒钟后，我们得到了计划。这是你在 Claude 开始编写代码之前进行审查的机会。

[原文] [Kevin Stratvert]: Be on the lookout for design decisions Claude has made that you might disagree with. Here, for example, we never said anything about Vit or Tailwind.

[译文] [Kevin Stratvert]: 要留意 Claude 做出的那些你可能不同意的设计决策。例如这里，我们从未提到过 Vite 或 Tailwind。

[原文] [Kevin Stratvert]: Scrolling down, you'll see a good summary of the data models, the project structure, implementation steps, etc.-

[译文] [Kevin Stratvert]: 向下滚动，你会看到数据模型、项目结构、实施步骤等的良好总结。

[原文] [Kevin Stratvert]: One thing that stands out to me is that this is in JavaScript, not TypeScript. So, here's how we tell Claude to make changes.

[译文] [Kevin Stratvert]: 引起我注意的一点是，这是用 JavaScript 写的，而不是 TypeScript。所以，这里展示了我们如何告诉 Claude 进行更改。

[原文] [Kevin Stratvert]: When asked, would you like to proceed, select option three, and I'll type use TypeScript instead of JavaScript.

[译文] [Kevin Stratvert]: 当被问及“你想继续吗”时，选择选项 3，然后我会输入“使用 TypeScript 代替 JavaScript”。

[原文] [Kevin Stratvert]: I'll press enter, and Claude will reconfigure its plans.

[译文] [Kevin Stratvert]: 我按回车，Claude 就会重新配置它的计划。

[原文] [Kevin Stratvert]: By the way, notice how I'm talking to Claude. It's like a senior engineer that I respect. Clear, firm, and specific.

[译文] [Kevin Stratvert]: 顺便注意一下我是如何与 Claude 交谈的。这就像对待一位我尊重的资深工程师。清晰、坚定且具体。

[原文] [Kevin Stratvert]: You don't need to be overly polite, and you don't need to be overly aggressive. Just the facts.-

[译文] [Kevin Stratvert]: 你不需要过度礼貌，也不需要过度激进。只需要陈述事实。

[原文] [Kevin Stratvert]: Okay, the new plan's generated, and we see file extensions with TS and TSX. That means we're on the right path.

[译文] [Kevin Stratvert]: 好的，新计划生成了，我们看到文件扩展名有 TS 和 TSX。这意味着我们走对了路。

[原文] [Kevin Stratvert]: And let's assume we're good with the rest of the plan. So, it's time to move forward.

[译文] [Kevin Stratvert]: 让我们假设我们对计划的其余部分都很满意。所以，是时候继续了。

[原文] [Kevin Stratvert]: You have two options. You can auto accept all of Claude's changes or manually approve them one by one.

[译文] [Kevin Stratvert]: 你有两个选项。你可以自动接受 Claude 的所有更改，或者逐一手动批准它们。

[原文] [Kevin Stratvert]: If you're just getting started, you might want to choose option two just to be sure, but I'll tell you, you're going to get tired of it pretty quickly.

[译文] [Kevin Stratvert]: 如果你刚开始，你可能想选择选项 2 以求稳妥，但我告诉你，你很快就会厌倦的。

[原文] [Kevin Stratvert]: So, I've suggested to auto accept edits here. Let's see what happens in just a minute.-

[译文] [Kevin Stratvert]: 所以，我建议在这里选择自动接受编辑。让我们看看接下来一分钟会发生什么。

[原文] [Kevin Stratvert]: Claude's just written the entire app, which we can see here.

[译文] [Kevin Stratvert]: Claude 刚刚编写了整个应用程序，我们可以在这里看到。

[原文] [Kevin Stratvert]: Now, it's asking approval to run npm install. Claude's default user experience is that it always asks for approval for these sorts of tools.

[译文] [Kevin Stratvert]: 现在，它请求批准运行 npm install。Claude 的默认用户体验是，它总是会请求批准使用这类工具。

[原文] [Kevin Stratvert]: But if you believe a tool is safe to use, I recommend choosing option two here.

[译文] [Kevin Stratvert]: 但如果你认为某个工具使用安全，我建议在这里选择选项 2。

[原文] [Kevin Stratvert]: After a few more approvals, Claude asked to run the dev server.

[译文] [Kevin Stratvert]: 在几次批准之后，Claude 请求运行开发服务器。

[原文] [Kevin Stratvert]: I'm actually not keen on having Claude do this, so I'm going to start up a new terminal window, go to the app directory, and then start it myself.

[译文] [Kevin Stratvert]: 我其实不太想让 Claude 做这件事，所以我要启动一个新的终端窗口，进入应用目录，然后自己启动它。

章节 4：应用测试与初期 Bug 发现 (App Testing and Initial Bug Discovery)

📝 本节摘要：

讲者手动启动服务器后，对生成的应用进行功能测试。添加团队成员和杂务的基本功能正常，但在通过日历视图添加杂务时发现了一个时间设置错误的 Bug。讲者强调了“频繁提交（Commit Early and Often）”的原则，以便在修复 Bug 引入新问题时能轻松回滚。

[原文] [Kevin Stratvert]: With the server up and running, let's check out the app.

[译文] [Kevin Stratvert]: 随着服务器启动并运行，让我们来看看这个应用。

[原文] [Kevin Stratvert]: Okay, we've got a decent looking page here. Let's add a few team members.

[译文] [Kevin Stratvert]: 好的，我们这里有一个看起来还不错的页面。让我们添加几个团队成员。

[原文] [Kevin Stratvert]: So, I'll start by adding myself. I'll give myself a green color. And then let's add Kevin. Give him a blue color.

[译文] [Kevin Stratvert]: 所以，我先添加我自己。我会给自己设为绿色。然后添加 Kevin。给他设为蓝色。

[原文] [Kevin Stratvert]: Now, that looks okay. So, let's try testing the add chore functionality.

[译文] [Kevin Stratvert]: 目前看起来还行。所以，让我们尝试测试添加杂务的功能。

[原文] [Kevin Stratvert]: Let's get Kevin to bake us cookies every week. So, we'll assign that to kitchen and then assign that to Kevin.

[译文] [Kevin Stratvert]: 让 Kevin 每周给我们烤饼干。所以，我们会把它分配到厨房（kitchen），然后分配给 Kevin。

[原文] [Kevin Stratvert]: We'll make this a recurring chore. Repeat it once a week and click add. That looks good.

[译文] [Kevin Stratvert]: 我们把这设为一个循环杂务。每周重复一次并点击添加。看起来不错。

[原文] [Kevin Stratvert]: So, let's check out the week mode. And we should be able to see bake cookies down below.

[译文] [Kevin Stratvert]: 那么，让我们查看周视图模式。我们应该能在下面看到烤饼干的任务。

[原文] [Kevin Stratvert]: Looks like we've got a little highlighting bug up here.

[译文] [Kevin Stratvert]: 看起来我们在上面有一个小的高亮 Bug。

[原文] [Kevin Stratvert]: Finally, let's try adding a chore for me just by clicking on the calendar.

[译文] [Kevin Stratvert]: 最后，让我们试着直接点击日历来给我添加一个杂务。

[原文] [Kevin Stratvert]: So, we'll say maintenance and we'll assign this to David. And oh, interesting. The time is also wrong here.

[译文] [Kevin Stratvert]: 所以，我们输入维护（maintenance），并将其分配给 David。哦，真有趣。这里的时间也是错的。

[原文] [Kevin Stratvert]: Let's click add and see where it puts it, though. Yeah, it looks like it went down to 8:00 p.m. when it shouldn't have.

[译文] [Kevin Stratvert]: 不过让我们点击添加，看看它把它放到了哪里。是的，看起来它跑到了晚上 8 点，但这不应该发生。

[原文] [Kevin Stratvert]: Now, we're all tempted to go back into Claude and start prompting it to fix these bugs.

[译文] [Kevin Stratvert]: 现在，我们都很想回到 Claude 那里，开始提示它修复这些 Bug。

[原文] [Kevin Stratvert]: But you need to follow a principle of committing early and committing often.

[译文] [Kevin Stratvert]: 但你需要遵循“尽早提交，频繁提交”的原则。

[原文] [Kevin Stratvert]: That's because when you add more prompts, there's always a chance of introducing more regressions. So always make it easy to revert to the last known good state.

[译文] [Kevin Stratvert]: 这是因为当你添加更多提示词时，总是有可能引入更多的回归问题。所以一定要确保能轻松回滚到上一个已知的良好状态。

章节 5：场景二：处理现有代码库与 CLAUDE.md (Scenario 2: Existing Codebases and CLAUDE.md)

📝 本节摘要：

这一节讨论如何将 Claude Code 引入现有的代码库（场景二）。为了模拟这一场景，讲者清除了对话历史。核心内容是介绍 CLAUDE.md 文件：这是一个帮助 AI 理解项目技术栈、组件用途及编码规范的关键文件。讲者提供了创建该文件的高效 Prompt，并解释了“渐进式披露”原则。

[原文] [Kevin Stratvert]: By the way, I'm assuming that you're working inside of a branch when you commit.

[译文] [Kevin Stratvert]: 顺便说一下，我假设你在提交时是在一个分支（branch）中工作的。

[原文] [Kevin Stratvert]: This is a great time to review the code and iterate with Claude. You can try making architecture changes or even making test cases.

[译文] [Kevin Stratvert]: 这是审查代码并与 Claude 进行迭代的好时机。你可以尝试进行架构更改甚至编写测试用例。

[原文] [Kevin Stratvert]: Great job. You just built your first app with Claude code, but that's not enough to be successful with it.

[译文] [Kevin Stratvert]: 干得好。你刚刚用 Claude Code 构建了你的第一个应用，但这还不足以让你成功使用它。

[原文] [Kevin Stratvert]: That leads us to scenario number two. Using cla code with an existing app.-

[译文] [Kevin Stratvert]: 这将我们引向场景二。在现有的应用程序中使用 Claude Code。

[原文] [Kevin Stratvert]: We want to pretend that this is existing code that you're bringing Claude code to.

[译文] [Kevin Stratvert]: 我们想假装这是现有的代码，你要把 Claude Code 引入其中。

[原文] [Kevin Stratvert]: To do that, I'll press escape here and then type slashcle.

[译文] [Kevin Stratvert]: 为了做到这一点，我会在那里按 Esc 键，然后输入 /clear。

[原文] [Kevin Stratvert]: As you can see, that clears all of our conversation history and frees up context. So, it's like Claude is looking at this codebase for the first time.

[译文] [Kevin Stratvert]: 如你所见，那清除了一切对话历史并释放了上下文。所以，这就像 Claude 第一次看到这个代码库一样。

[原文] [Kevin Stratvert]: One mental block I had when I got started was not knowing how AI would possibly understand all of my coding standards so it could keep building on them.

[译文] [Kevin Stratvert]: 我刚开始时的一个心理障碍是，不知道 AI 怎么可能理解我所有的编码规范，以便能在此基础上继续构建。

[原文] [Kevin Stratvert]: The answer is a file called claude md. According to this blog post on humanaylayer.dev, dev, which I'll also link in the description.-

[译文] [Kevin Stratvert]: 答案是一个叫做 CLAUDE.md 的文件。根据 humanaylayer.dev 上的一篇博文（我也会在简介中放上链接）。

[原文] [Kevin Stratvert]: Claude MD onboards Claude onto your codebase. The contents of this file get injected into every Claude session.

[译文] [Kevin Stratvert]: CLAUDE.md 将 Claude 引入你的代码库。这个文件的内容会被注入到每一个 Claude 会话中。

[原文] [Kevin Stratvert]: So, it's super important that the instructions in this file are almost universally applicable to the prompts that you write. Otherwise, Claude might ignore them.

[译文] [Kevin Stratvert]: 所以，非常重要的一点是，这个文件中的指令几乎要通用于你编写的所有提示词。否则，Claude 可能会忽略它们。

[原文] [Kevin Stratvert]: So, we can break down what you put in this file into three layers.

[译文] [Kevin Stratvert]: 我们可以把你放入这个文件的内容分解为三层。

[原文] [Kevin Stratvert]: First, you tell Claude about the tech stack, the project structure, what the packages are, components, etc.

[译文] [Kevin Stratvert]: 首先，你告诉 Claude 关于技术栈、项目结构、有哪些包、组件等。

[原文] [Kevin Stratvert]: Then explain the function and purpose of each component in the project. Finally, describe how you want Claude to work with the project.-

[译文] [Kevin Stratvert]: 然后解释项目中每个组件的功能和用途。最后，描述你希望 Claude 如何在这个项目中工作。

[原文] [Kevin Stratvert]: For example, you can instruct Claude to run test cases and verify success after every change it makes.

[译文] [Kevin Stratvert]: 例如，你可以指示 Claude 在每次更改后运行测试用例并验证成功。

[原文] [Kevin Stratvert]: You have two options to create that cloud MD file.

[译文] [Kevin Stratvert]: 你有两个选项来创建那个 CLAUDE.md 文件。

[原文] [Kevin Stratvert]: You can start with the /init command, but in my experience, that doesn't create the three types of information we just reviewed.

[译文] [Kevin Stratvert]: 你可以从 /init 命令开始，但在我的经验中，那不会创建我们刚刚回顾的三种类型的信息。

[原文] [Kevin Stratvert]: So, I prefer to use a prompt. Grab this prompt from the resources section and paste it in.

[译文] [Kevin Stratvert]: 所以，我更喜欢使用提示词。从资源部分获取这个提示词并粘贴进去。

[原文] [Kevin Stratvert]: As you can see, it covers some of the essentials from that blog post I just shared, the what, the why, the how, and it pulls in a couple of other principles as well.-

[译文] [Kevin Stratvert]: 如你所见，它涵盖了我刚刚分享的那篇博文中的一些要点——是什么、为什么、怎么做，并且它还引入了其他几个原则。

[原文] [Kevin Stratvert]: One of those principles is to use progressive disclosure. So instead of including all the instructions for everything at once, create an index that points to other markdown files.

[译文] [Kevin Stratvert]: 其中一个原则是使用“渐进式披露（progressive disclosure）”。与其一次性包含所有指令，不如创建一个指向其他 Markdown 文件的索引。

[原文] [Kevin Stratvert]: So like I have an architectural patterns file which documents architectural patterns, design decisions, etc.

[译文] [Kevin Stratvert]: 就像我有一个架构模式文件，里面记录了架构模式、设计决策等。

[原文] [Kevin Stratvert]: After a few minutes, you get a claud file. You can view a formatted version of this by pressing commandshiftv or control shiftv on windows.

[译文] [Kevin Stratvert]: 几分钟后，你得到了一个 Claude 文件。你可以通过按 Command + Shift + V（或 Windows 上的 Control + Shift + V）来查看格式化后的版本。

[原文] [Kevin Stratvert]: So now every time you start cla it's acquainted with the text stack, the project structure, what are your key files, commands to run everything, domain model, and there's a few more things here as well.-

[译文] [Kevin Stratvert]: 现在每次你启动 Claude，它都熟悉技术栈、项目结构、你的关键文件是什么、运行一切的命令、领域模型，这里还有其他一些东西。

章节 6：利用上下文修复 Bug (Fixing Bugs Using Context)

📝 本节摘要：

在建立了 CLAUDE.md 后，讲者展示了如何修改该文件以添加新的工作流规则（如修复 Bug 前必须创建 Git 分支）。接着，利用已经注入上下文的 Claude，讲者仅用简单的描述性语言就成功让 AI 定位并修复了之前发现的日历时间 Bug，验证了上下文文件的有效性。

[原文] [Kevin Stratvert]: Just to show this in action, we're going to make a small change to the adding new feature section.

[译文] [Kevin Stratvert]: 为了展示实际效果，我们要对“添加新功能”部分做一个小改动。

[原文] [Kevin Stratvert]: I'll change this to adding new features or fixing bugs.

[译文] [Kevin Stratvert]: 我会把它改成“添加新功能或修复 Bug”。

[原文] [Kevin Stratvert]: And then I'll add a disclaimer that it's important when you work on a new feature or bug to create a git branch first. Let's commit this change.

[译文] [Kevin Stratvert]: 然后我会添加一个声明：当你处理新功能或 Bug 时，先创建一个 Git 分支很重要。让我们提交这个更改。

[原文] [Kevin Stratvert]: And while I do that, you remember that bug that we looked at earlier, the one where clicking on the calendar didn't add the right time to the chore.

[译文] [Kevin Stratvert]: 当我做这些的时候，你还记得我们之前看的那个 Bug 吗，那个点击日历没有把正确的时间添加到杂务中的问题。

[原文] [Kevin Stratvert]: Let's go fix this using Claude. Now, just to prove that Claude MD is working, I'm going to get out of Claude first and then restart it and ask the following prompt.

[译文] [Kevin Stratvert]: 让我们用 Claude 修复它。现在，为了证明 CLAUDE.md 在起作用，我会先退出 Claude，然后重启它并询问以下提示词。

[原文] [Kevin Stratvert]: Notice the prompt is nothing fancy. We say it's a bug fix. We describe the failure condition and then we let it go. Let's see what Claude does.

[译文] [Kevin Stratvert]: 注意这个提示词并没有什么花哨的。我们说这是一个 Bug 修复。我们描述了失败条件，然后让它执行。看看 Claude 会做什么。

[原文] [Kevin Stratvert]: After a few minutes, it finds the bug inside of a TSX file, but before it implements the fix, it asks to create a new branch.

[译文] [Kevin Stratvert]: 几分钟后，它在一个 TSX 文件中找到了 Bug，但在实施修复之前，它请求创建一个新分支。

[原文] [Kevin Stratvert]: Let's let it proceed. After a few more permission confirmations, it creates the new branch and makes the fix.

[译文] [Kevin Stratvert]: 让我们允许它继续。在几次权限确认后，它创建了新分支并进行了修复。

[原文] [Kevin Stratvert]: Obviously, you'll verify that fix on the app itself. We'll head back into the week mode. ->

[译文] [Kevin Stratvert]: 显然，你要在应用本身验证那个修复。我们会回到周视图模式。

[原文] [Kevin Stratvert]: Then, we'll make a chore at 8 a.m. We'll call it bring donuts for the office. Put it in the kitchen category and assign it to me.

[译文] [Kevin Stratvert]: 然后，我们在早上 8 点创建一个杂务。我们叫它“给办公室带甜甜圈”。把它放在厨房类别并分配给我。

[原文] [Kevin Stratvert]: Then, click add. So, this is good. The bug is fixed here.

[译文] [Kevin Stratvert]: 然后，点击添加。很好。Bug 已经修复了。

[原文] [Kevin Stratvert]: Now, it's time to check the code itself. Again, it's useful to think of Claude as another engineer on your team.

[译文] [Kevin Stratvert]: 现在，是时候检查代码本身了。再次强调，把 Claude 看作团队中的另一位工程师很有用。

[原文] [Kevin Stratvert]: You're going to review its code like everyone else's. If you don't like something, instead of making a comment, use a prompt to get Claude to fix it. ->

[译文] [Kevin Stratvert]: 你要像审查其他人一样审查它的代码。如果你不喜欢某样东西，不用写评论，而是用提示词让 Claude 修复它。

章节 7：场景三：架构变更与 YOLO 模式 (Scenario 3: Architecture Changes and YOLO Mode)

📝 本节摘要：

本节进入最具挑战性的场景：对现有应用进行重大架构变更（实时同步功能）。讲者介绍了“YOLO 模式”（Shift+Tab 切换），即允许 Claude 跳过权限确认直接执行命令，以提高速度但伴随风险。流程上采用了“探索-计划-编码”的方法，先让 Claude 探索文件并提供多种架构方案（如 Websockets），最后选择最佳方案进行实施。

[原文] [Kevin Stratvert]: That was a small bug, but how does it perform with scenario number three, a big architecture change?

[译文] [Kevin Stratvert]: 那是个小 Bug，但在场景三——重大架构变更中，它的表现如何呢？

[原文] [Kevin Stratvert]: I've just made a few more fixes, so our grid is looking good, but now it's time to make a bigger change.

[译文] [Kevin Stratvert]: 我刚刚又做了一些修复，所以我们的网格看起来不错，但现在是时候做一个更大的变更了。

[原文] [Kevin Stratvert]: Changes to chores should automatically show up on other tabs without refreshing.

[译文] [Kevin Stratvert]: 对杂务的更改应该自动显示在其他标签页上，无需刷新。

[原文] [Kevin Stratvert]: So, how do we get that test chore to show up on other tabs? Let's head to Claude and find out.

[译文] [Kevin Stratvert]: 那么，我们如何让那个测试杂务显示在其他标签页上呢？让我们去 Claude 那里找找答案。

[原文] [Kevin Stratvert]: For this change, we'll use a special mode of Claude code called YOLO. And no, I'm not kidding.

[译文] [Kevin Stratvert]: 对于这个变更，我们将使用 Claude Code 的一种特殊模式，叫做“YOLO”。不，我没开玩笑。

[原文] [Kevin Stratvert]: It's when you run Claude with the dangerously skip permissions switch. In this mode, Claude doesn't ask for your approval to run commands. It just does them.

[译文] [Kevin Stratvert]: 这是指你带着“危险地跳过权限（dangerously skip permissions）”开关运行 Claude。在这种模式下，Claude 运行命令时不会征求你的批准。它直接执行。

[原文] [Kevin Stratvert]: Of course, there's risk with this, but I'm showing you because one day the speed might be worth it.

[译文] [Kevin Stratvert]: 当然，这有风险，但我展示给你看是因为有一天速度可能值得你去冒险。

[原文] [Kevin Stratvert]: You can now toggle this mode on and off by using shift and tab.

[译文] [Kevin Stratvert]: 你现在可以使用 Shift 和 Tab 键来开启或关闭此模式。

[原文] [Kevin Stratvert]: Onto the architecture change. Now, Cloud Code best practices advises an explore, plan, code, and commit approach.

[译文] [Kevin Stratvert]: 回到架构变更。Claude Code 的最佳实践建议采用“探索、计划、编码、提交”的方法。

[原文] [Kevin Stratvert]: You've already got the building blocks for this. So, first use shift and tab to switch into plan mode.

[译文] [Kevin Stratvert]: 你已经掌握了这方面的基石。所以，首先使用 Shift 和 Tab 切换到计划模式。

[原文] [Kevin Stratvert]: Then, our prompt explains the architecture change and also tells Claude to explore these files and give us three options to move forward.

[译文] [Kevin Stratvert]: 然后，我们的提示词解释了架构变更，并告诉 Claude 探索这些文件并给我们提供三个推进选项。

[原文] [Kevin Stratvert]: This request for three options is a bit of prompt engineering because remember any prompt engineering technique you've learned with LLMs like chatgpt or claude also applies here.

[译文] [Kevin Stratvert]: 这个请求三个选项的做法算是一点提示词工程，因为记住，你在 ChatGPT 或 Claude 等大语言模型中学到的任何提示词工程技术在这里也都适用。

[原文] [Kevin Stratvert]: After a few minutes given us our options. Now there's no web server on this app right now.

[译文] [Kevin Stratvert]: 几分钟后，它给了我们要的选项。现在这个应用还没有 Web 服务器。

[原文] [Kevin Stratvert]: So I tried to trick Claude into only giving us browser sync solutions.

[译文] [Kevin Stratvert]: 所以我试着欺骗 Claude 只给我们提供浏览器同步解决方案。

[原文] [Kevin Stratvert]: But it saw through that and also suggested option three which would create a server and do real-time syncing across clients.,

[译文] [Kevin Stratvert]: 但它识破了这一点，并且建议了选项 3，即创建一个服务器并在客户端之间进行实时同步。

[原文] [Kevin Stratvert]: I'm making this video to show you the real power of AI assisted coding. So, let's go all the way with option three.

[译文] [Kevin Stratvert]: 我制作这个视频是为了向你展示 AI 辅助编码的真正力量。所以，让我们全面采用选项 3。

[原文] [Kevin Stratvert]: I'll give it a minute and we'll see the plan together. Here we've got Claude's plan.

[译文] [Kevin Stratvert]: 我会给它一分钟，然后我们一起看计划。这里我们得到了 Claude 的计划。

[原文] [Kevin Stratvert]: Just like our first plan, it gives you an overview of the changes, the project structure, files, it's changing, a phased approach to implementation, as well as key design decisions.

[译文] [Kevin Stratvert]: 就像我们的第一个计划一样，它给了你关于变更、项目结构、文件、正在变更的内容、分阶段实施方法以及关键设计决策的概览。

[原文] [Kevin Stratvert]: You could continue to modify this plan by using option three, but we'll continue with option one.

[译文] [Kevin Stratvert]: 你可以使用选项 3 继续修改此计划，但我们将使用选项 1 继续。

[原文] [Kevin Stratvert]: And because we have YOLO mode enabled, we can let this run as long as it needs to get the job done.,

[译文] [Kevin Stratvert]: 并且因为我们启用了 YOLO 模式，我们可以让它运行直到完成工作为止。

章节 8：最终实现与总结 (Final Implementation and Conclusion)

📝 本节摘要：

在 YOLO 模式的加持下，Claude 快速搭建了 Websocket 服务器。讲者展示了最终效果：在两个浏览器窗口中，添加成员和杂务的操作实现了实时同步。视频最后总结了使用 Claude Code 的体验，并鼓励观众亲自尝试及查看相关资源。

[原文] [Kevin Stratvert]: In about 5 minutes, it created a websocket server and explained to us how it works.

[译文] [Kevin Stratvert]: 在大约 5 分钟内，它创建了一个 Websocket 服务器并向我们解释了它是如何工作的。

[原文] [Kevin Stratvert]: So the question remains, does it actually work? Here I've got two instances of the app side by side.

[译文] [Kevin Stratvert]: 所以问题依然存在，它真的能用吗？这里我并排打开了两个应用实例。

[原文] [Kevin Stratvert]: Let's start by adding a new team member. Let's add Elizabeth and give her red.

[译文] [Kevin Stratvert]: 让我们从添加一个新团队成员开始。添加 Elizabeth 并给她红色。

[原文] [Kevin Stratvert]: And we see that change in the other browser.

[译文] [Kevin Stratvert]: 我们在另一个浏览器中看到了那个变化。

[原文] [Kevin Stratvert]: Now in this browser, let's give her a chore called feed the fish. We'll assign it to her and then click add.

[译文] [Kevin Stratvert]: 现在在这个浏览器中，让我们给她一个叫“喂鱼”的杂务。分配给她然后点击添加。

[原文] [Kevin Stratvert]: That chore successfully shows up in the first browser. Now all that's left is for you to review the code.

[译文] [Kevin Stratvert]: 那个杂务成功地显示在第一个浏览器中了。现在剩下的就是你去审查代码了。

[原文] [Kevin Stratvert]: But don't take my word for it that it works. Try it yourself.

[译文] [Kevin Stratvert]: 但不要只听我说它能用。你自己试试。

[原文] [Kevin Stratvert]: If you enjoyed this video and want to get started with Claude Code, check out the link in the description below.

[译文] [Kevin Stratvert]: 如果你喜欢这个视频并且想开始使用 Claude Code，请查看下方简介中的链接。

[原文] [Kevin Stratvert]: Let me know what else you want to learn about Claude Code in the comments and I'll see you in the next video.

[译文] [Kevin Stratvert]: 在评论中告诉我你还想学习关于 Claude Code 的什么内容，我们在下一个视频见。