来源信息

  • 文档类型:译文 · 整理日期 2026-10-07
  • 原文:《Mastering Claude Code》 · 作者 Damien Gallagher · 发布于 dev.to · 发布日期 2025-07-04
  • 原文地址:https://dev.to/damogallagher/mastering-claude-code-4b81
  • 本文为原文的中文翻译整理,命令名、参数与专有名词保留原文写法。
  • 本文是上述原文的完整中文翻译,版权归原作者及原发布平台所有;如需转载请先取得原作者授权。文中斜杠命令、子代理与钩子的机制命名在原文发布后已有变动,具体行为请以官方文档为准。

来源与时效

  • 原文:Mastering Claude Code(dev.to,2025-07-04 发布,2025-07-28 更新),正文按原文 12 个步骤顺序翻译,图片取自原文本地附件。
  • 时效提示:原文发布于 2025 年,文中斜杠命令、子代理与钩子的机制和命名此后已变动,具体行为请以官方文档为准。

第 1 步:在你的项目中拥有一个有效的 CLAUDE.md 文件

每次你发出提示时,CLAUDE.md 文件中列出的所有内容都会被 Claude Code 读取。通过添加这些规则,它指示 Claude Code 将思考分解为任务,并在实施之前将事项提交给你审核。

  • 1. 初步分析与规划: 首先分析问题,检查相关的代码文件,并在 tasks/todo.md 中记录你的方法。
  • 2. 清单结构: 将你的计划构造成可执行的清单项,完成后可标记为已完成。
  • 3. 批准阶段: 在实施之前,提交你的策略以供我批准和确认。
  • 4. 执行过程: 开始执行清单项目,并在完成每一项时更新其状态。
  • 5. 进度沟通: 在过程的每个阶段提供对你所做修改的简要概述。
  • 6. 简单性原则: 优先考虑最小且直接的修改。避免大量或复杂的改动。将每次更改的范围限制在尽可能少的代码上。所有决策都要强调简洁性。
  • 7. 文档与总结: 在 todo.md 文件中以回顾部分结尾,总结你的实现内容及任何值得注意的细节。

第 2 步:正确使用 Plan 模式

如果正确使用 Plan 模式,它将有助于在 Claude 中获得所需结果。要访问 Plan 模式,打开 Claude Code,按 shift 然后连续按两次 tab 进入该模式。在 Plan 模式中,你需要向 Claude 精确描述你希望它执行的内容,然后让 Claude 为你制定该计划。

原文配图 1

在深入实施之前,应广泛使用 Plan 模式。这将从长远来看节省时间,因为 Claude 会有一个清晰的执行计划,你也会确切知道将交付什么。

此外,使用正确的模型也很重要。对于“计划模式”,Opus 是一个很好的模型,用来制定稳固的计划。有了计划后,就可以使用 Sonnet 来执行该计划。通过使用 Sonnet 来执行,它会按照 Opus 制定的详细计划来完成任务。同时,使用更便宜的模型来实现还能节省开支。 注意: Opus 不适用于 Claude Pro 用户(每月 17 美元),你需要订阅 Claude Max 计划(从每月 100 美元起)才能使用 Opus。如果你使用的是 Claude Pro 计划,Sonnet 是用于计划模式和执行的最佳选择。

原文配图 2

原文配图 3

第 3 步:使用检查点保存进度

其他 AI 编程工具(如 Cursor)具有自动检查点功能,但 Claude Code 默认不包含此功能。取而代之的是,你可以使用 GitHub 来实现检查点。通过将你满意的代码作为 Git 提交推送到 GitHub,代码就处于良好状态。如果你对代码不满意,可以在 Git 中撤销最新更改。

Claude Code 的 Git 检查点工作流:

# Before Claude starts a new feature
git add . && git commit -m "Checkpoint: Before adding user dashboard"

# After Claude completes the feature successfully  
git add . && git commit -m "✅ Add user dashboard with charts"

# If unhappy with Claude's changes
git reset --hard HEAD~1  # Rollback to previous checkpoint

最佳实践:

  • 在每个重大的 Claude 任务之前提交 - 创建还原点
  • 使用描述性信息 - “在添加 X 之前”和“✅ 完成 X”
  • 定期推送 - git push origin main 以备份进度
  • 创建实验分支 - git checkout -b test/new-approach 用于尝试不同的 Claude 解决方案

参见 第 12 步:钩子 获取有关如何让 Claude 为你管理检查点的信息。

第 4 步:使用 /clear

/clear 命令对于保持 Claude Code 的高效性至关重要。你应该定期清除上下文,通过限制发送给 Claude 的信息来减少幻觉和成本。

何时使用 /clear:

  • 在完成 3-5 个相关任务之后
  • 在切换到完全不同的功能领域时
  • 当 Claude 开始给出不太相关的回复时
  • 在开始新的重大开发阶段之前

什么构成“重大任务”:

  • 实现一个完整的功能(身份验证、用户仪表板等)
  • 重大重构或架构性更改
  • 完成一次完整的调试会话
  • 完成一次安全审查周期

每当 Claude 完成一项重要任务时执行 /clear。将 /clear 作为你工作流程中不可或缺的一部分。

原文配图 4

第 5 步:安全检查

对所有 AI 生成的代码进行安全检查以确保其安全性非常重要。AI 目前还不能开箱即用地提供安全代码,所以务必进行安全检查。在 Claude 中构建功能后,请运行安全检查。 以下提示可用于运行安全检查。

请对您最近的代码实现进行彻底审查,以验证其是否符合安全规范。核实敏感数据不会从前端泄露,并评估代码是否存在任何潜在的安全漏洞或可被利用的缺陷。

第 6 步:Claude Code 中的图像

在 Claude Code 中,您可以提供图像。这些图像可用于根据设计构建功能,或在您想修复当前 UI 中的错误时使用。这是一个强大的功能,可在合适的场景中使用。

原文配图 5

原文配图 6

设计实现: 当你有模型图或设计文件时,上传它并使用类似以下的提示:

请使用 React 和 Tailwind CSS 实现此设计。注意图片中显示的间距、颜色和响应式行为。

带截图的修复错误: 如果你遇到视觉上的错误,请截图问题并提问:

当前界面看起来像这样 [附截图]。按钮应当居中,文本应正确对齐。请找出并修复导致此布局问题的 CSS 问题。

功能增强: 通过上传参考图像使用前后对比:

我想把这个组件改进得更像这个参考设计[附图]。请在保持现有功能的同时,提出具体改进建议并实现它们。

图像使用最佳实践:

  • 使用高质量、清晰且对比度良好的图像
  • 裁剪图像以突出相关的界面元素
  • 如果功能包含交互元素,请包含多个角度或不同状态的图片
  • 将图像与详细的文字描述结合以获得最佳效果

第 7 步:向 Claude 学习

使用 Claude 来帮助你学习——非常简单。一旦 Claude 构建了一个功能并确保其安全,你可以使用以下提示来帮助你理解 Claude 所构建的内容。这将确保你更好地理解生成的应用程序,也将帮助你在将来构建应用时改进提示。

理解实现细节: 在 Claude 完成功能后,使用此提示:

请提供你刚刚创建的实现的全面解析。引导我了解你所引入的修改,并详细阐述其运行机制。以一位有经验的开发者辅导同事阅读代码库的方式来说明。

学习新模式和新技术: 当 Claude 使用不熟悉的技术或模式时:

我注意到你使用了[具体技术/模式]。你能解释为什么选择这种方法而不是其他可选方案吗?有哪些优点和潜在缺点?在更大型的应用中,这种做法如何扩展?

代码审查与最佳实践: 请求对生成代码的建设性反馈:

请从高级开发者的角度审查你刚才创建的代码。可以改进的地方有哪些?是否存在任何性能优化、安全方面的考虑或可维护性问题需要我注意?

未来规划与架构: 了解当前实现如何适应更大的整体架构:

这项实现会如何影响整体架构?扩展此功能的下一个合乎逻辑的步骤是什么?如果我以后想添加【特定功能】,应考虑哪些因素?

学习资源: 请求更多学习材料:

基于我们刚才使用的代码模式和技术,你会推荐哪些资源让我加深理解?有没有特定的概念我应该进一步学习?

第 8 步:在 Claude 工作时保持高效

与其在 Claude 工作时浏览社交媒体,不如把那段时间用于有成效的对话。 以下是一些专注的方法:

技术学习与讨论:

我注意到在与 AI 合作进行编码项目时,在发出指令和收到输出之间会有自然的间歇。与其陷入那种让我感到心神不宁、毫无成效的无目的在线浏览,不如利用这些时间与你进行建设性的对话。内容可以包括探索新概念、审视我现有的事业和创意项目,或只是进行富有深度的交流。我还没确定哪种框架或方法最有效,但我相信这会比我目前的默认行为更有意义。你有什么建议可以让这些对话变得更高效、更有吸引力?

项目规划与架构: 利用等待时间规划未来的功能:

在你开发当前功能的同时,我们来讨论这个项目的下一个阶段。我在考虑新增[具体功能]。我需要注意哪些架构方面的考虑?我们应该如何设计数据库模式和 API 端点?

代码质量和标准: 建立编码标准和约定:

让我们为这个项目建立一些编码约定。对于像这样的[type of application],你会推荐哪些命名约定、文件结构和代码组织模式?

问题解决与调试: 在问题出现之前讨论潜在问题:

在构建[type of feature]时,通常会出现哪些最常见的问题?我们如何主动应对这些问题?我应该记住哪些调试策略?

技术探索: 探索相关技术和工具:

在我们构建这个 React 应用时,React 生态系统中的哪些其他工具可能会有帮助?我们是否应该考虑加入测试框架、状态管理库或开发工具?

职业与学习发展: 利用这段时间进行职业成长:

根据我们在这个项目中使用的技术,我接下来应该重点发展哪些技能?我应该关注哪些与[relevant field]相关的当前趋势?

文档与规划: 创建文档和项目路线图:

帮我为我们正在构建的内容创建全面的文档。README 应该包括什么?我们应如何为未来的开发者构建项目文档结构?

第 9 步:要遵循的开发工作流

现在我们已经讨论了所有步骤,在使用 Claude Code 时拥有一个可靠的开发工作流非常重要。以下步骤对我有效,希望你也能通过类似流程取得成功。

  • 规划 你要构建的功能或应用
  • 构建 应用程序,依据已达成的计划
  • 针对生成的代码运行一次 安全检查
  • 学习 Claude 刚刚为你构建/修改了什么
  • 在 Claude 在后台构建时, 高效工作
  • 在 git 中对你的代码做 检查点 (如果你对当前状态不满意,可回滚到最初)
  • /clear 在构建完一个有意义的功能后清除上下文

第 10 步:斜线命令

斜杠命令允许你在交互会话中控制 Claude Code 的行为。

内置斜杠命令

下面是一些示例:

  • /init:使用 CLAUDE.md 指南初始化项目
  • /clear:清除对话历史
  • /help:获取使用帮助
  • /mcp:管理 MCP 服务器连接和 OAuth 身份验证

完整的内置斜杠命令的权威列表可以在 这里 找到

自定义斜杠命令

但等等……更棒的是,你还可以创建自定义斜线命令以适应你的工作流程。自定义斜线命令允许你将常用提示定义为 Claude Code 能执行的 Markdown 文件。命令按作用域(项目特定或个人)组织,并通过目录结构支持命名空间。

项目斜线命令

这些是存储在你仓库中并与团队共享的斜线命令。

这些命令的位置和前缀如下 位置: .claude/commands/ 前缀: /project:

例如,我们把之前的安全审查提示作为一个项目斜线命令添加进去

mkdir -p .claude/commands
echo "Please perform a thorough examination of your recent code implementation to validate compliance with security protocols. Verify that sensitive data remains protected from frontend exposure and assess the code for any potential security gaps or exploitable flaws:" > .claude/commands/security-review.md

在 Claude Code 中,我们现在可以使用该斜杠命令,语法为 /security-review

原文配图 7

原文配图 8

安全审查项目斜杠命令也可以通过以下语法触发 /project:security-review

原文配图 9 下面是一个用于将当前代码更改提交并推送到 GitHub 的示例项目斜杠命令

mkdir -p .claude/commands
echo "Checkin the current code and push it to github:" > .claude/commands/checkin.md

在 Claude Code 中,我们现在可以使用该斜杠命令,语法为 /checkin

原文配图 10

原文配图 11

签到项目的 slash 命令也可以使用语法 /project:checkin

原文配图 12

个人斜线命令

这些是可在你所有项目中使用的斜线命令,并不存放在任何仓库中

这些命令的位置和前缀如下 位置: ~/.claude/commands/ 前缀: /user:

举例来说,我们把之前的“提高工作效率”提示作为一个个人斜线命令来添加

mkdir -p ~/.claude/commands
echo "I notice that while working with AI on coding projects, there are natural intermissions between giving instructions and receiving outputs. Rather than falling into unproductive online browsing patterns that leave me feeling scattered, I'd like to leverage these periods for constructive dialogue with you. This could involve exploring new concepts, examining my existing ventures and creative projects, or simply having thoughtful exchanges. I haven't defined exactly what framework or approach would work best, but I'm confident it would be more enriching than my current default behavior. What suggestions do you have for making these conversations most productive and engaging:" > ~/.claude/commands/productivity.md

在 Claude Code 中,我们现在可以使用该斜杠命令,语法为 /productivity

原文配图 13

原文配图 14

生产力个人斜线命令也可以使用以下语法触发 /user:productivity

原文配图 15

MCP 斜杠命令

MCP(模型上下文协议)服务器可以将提示作为斜杠命令暴露出来,这些命令会在 Claude Code 中可用。这些命令会从已连接的 MCP 服务器动态发现。

当以下情况成立时,MCP 命令会自动可用:

  • 已连接且处于活动状态的 MCP 服务器
  • 服务器通过 MCP 协议暴露提示
  • 在连接时成功检索到这些提示

有关 MCP 斜杠命令的完整详细信息,请参见 here。 将会有一篇后续文章介绍 MCP 及其在 Claude Code 中的使用。

用于生成斜杠命令的有用提示

更新文档

为我用 Claude Code 构建一个斜杠命令,每次我进行代码更改时,都会自动更新我所有的自述文件、文档和 CLAUDE.md 文件

第 11 步:子代理

子代理是预先配置的 AI 个性,Claude Code 可以将任务委派给它们。把它们看作专门的团队成员,每个成员都被设计来处理特定类型的工作。

每个子代理有四个关键特征:

  • 特定专长:围绕特定目的构建,如调试、文档或数据分析
  • 独立工作区:使用与主对话分开的上下文窗口
  • 可配置的工具:可以设置为允许访问特定工具
  • 自定义行为:包括一个定制的系统提示,指导其如何处理任务

子代理的例子可以是架构师、前端开发人员、后端开发人员等。

当 Claude Code 遇到与某个子代理专长匹配的任务时,它会将该工作委派给该专家。子代理独立工作并返回聚焦的结果,从而创建更高效的工作流程,使每个任务都由最有资格的 AI 助手处理。 这种委派系统让你在无需管理多个对话或在主工作流中丢失上下文的情况下,利用到专门的 AI 专业知识。

幸运的是,在 Claude Code 中创建子代理很简单,我将带你一步步完成这个过程。

在 Claude Code 中,输入 /agents

原文配图 16

如果你已经有现有的 agent,它们现在会被列出;否则请选择“Create new agent”并点击下一步

原文配图 17

在创建代理时,它们可以用于某个项目或作为个人代理,这类似于自定义斜杠命令(项目仅针对该项目,个人会影响你所有的项目)。对于这个代理,我们将选择“项目(Project)”并按回车。

原文配图 18

Claude Code 提供了两种设置代理的选项

  1. 使用 Claude 生成(推荐)或 手动配置。我们将选择“使用 Claude 生成”,然后按回车键

原文配图 19

现在我们来描述这个代理。下面是我输入的内容

经验丰富的架构师,负责初始架构设计、技术选型指导,并在项目发生重大变更或需要引入新技术实现的功能时参与其中。该架构师是所有重大技术决策的权威来源。

原文配图 20 Claude 现在正在生成代理配置

现在我们选择代理可访问的工具。在此处您可以选择代理能执行的操作,并关联您已设置的任何 MCP 服务器。目前,该代理可以访问所有工具。选择“所有工具”,向上滚动到“继续”并按回车。

原文配图 21

可能你要做的最重要的决定就是颜色。说实话,Claude Code 会为你完成其余的大部分繁重工作 :)。这个颜色在代理为你执行任务时会成为一个有用的指示。我会把它设置为“自动颜色”并按回车。

原文配图 22

现在我们可以预览 Claude Code 为我们设计的代理。如果需要,我们可以在我的编辑器中选择 e 进行修改,但我将直接回车以接受。

原文配图 23

由于我选择创建一个个人子代理,现在在我的 .claude 目录中会有一个 agents 文件夹,其中包含我们在 /agents 提示中创建的代理。

原文配图 24

以下是已创建的 tech-architect.md agents 文件的内容。

---
name: tech-architect
description: "Use this agent when you need architectural guidance, technology selection advice, or approval for major technical decisions. Examples: <example>Context: User is starting a new project and needs to choose between different frameworks. user: 'I'm building a real-time chat application and need to decide between Node.js with Socket.io, Go with WebSockets, or Python with FastAPI and WebSockets. What would you recommend?' assistant: 'Let me consult with the tech-architect agent to get expert guidance on the best technology stack for your real-time chat application.' <commentary>Since this involves major technology selection for a new project, use the tech-architect agent to provide comprehensive architectural guidance.</commentary></example> <example>Context: User wants to implement a new caching layer that will significantly impact the system architecture. user: 'Our API is getting slow with increased traffic. I'm thinking of adding Redis for caching, but I'm not sure how to integrate it properly with our existing PostgreSQL setup.' assistant: 'This is a significant architectural decision that will impact your system's performance and complexity. Let me bring in the tech-architect agent to provide guidance on implementing caching effectively.' <commentary>Since this involves adding new technology that will impact the overall architecture, use the tech-architect agent for expert guidance.</commentary></example>"
---

You are a Senior Technology Architect with 15+ years of experience designing scalable, maintainable systems across diverse industries and technology stacks. You are the authoritative source for all major technology decisions and architectural guidance within projects.

Your core responsibilities:
- Evaluate and recommend technology stacks based on project requirements, team capabilities, and long-term maintainability
- Design system architectures that balance performance, scalability, security, and development velocity
- Provide guidance on major technical decisions including database choices, framework selection, deployment strategies, and integration patterns
- Review and approve architectural changes that could impact system design, performance, or maintainability
- Assess technical risks and provide mitigation strategies
- Ensure technology choices align with business objectives and technical constraints

Your decision-making framework:
1. **Requirements Analysis**: Thoroughly understand functional and non-functional requirements, including performance, scalability, security, and compliance needs
2. **Context Assessment**: Consider team size, expertise level, timeline constraints, budget limitations, and existing technology investments
3. **Technology Evaluation**: Compare options based on maturity, community support, learning curve, performance characteristics, and long-term viability
4. **Risk Assessment**: Identify potential technical debt, vendor lock-in, scalability bottlenecks, and maintenance challenges
5. **Recommendation**: Provide clear, justified recommendations with implementation guidance and success metrics

When providing architectural guidance:
- Always ask clarifying questions about requirements, constraints, and context before making recommendations
- Present multiple viable options with trade-offs clearly explained
- Consider both immediate needs and long-term evolution of the system
- Provide specific implementation guidance, not just high-level concepts
- Include monitoring and observability considerations in your recommendations
- Address security implications of architectural decisions
- Consider operational complexity and team capabilities

For technology selection:
- Evaluate based on project-specific criteria, not personal preferences
- Consider the total cost of ownership, including development, deployment, and maintenance
- Assess community ecosystem, documentation quality, and long-term support
- Factor in integration complexity with existing systems
- Recommend proof-of-concept approaches for high-risk technology choices

You communicate with authority but remain open to discussion. When you identify potential issues with proposed approaches, you explain the risks clearly and suggest alternatives. You balance technical excellence with practical constraints, always keeping business objectives in focus.

现在当你在 Claude Code 中选择 /agents 命令时,你可以看到我们刚创建的代理。

原文配图 25

如果你选择该代理并按回车键,就可以看到 Claude Code 为你的自定义子代理提供的选项。

原文配图 26

现在让代理开始工作吧。

我将在计划模式下发出一个非常简单的开放式提示,用于在浏览器中玩的俄罗斯方块游戏。提示如下:

创建一个基于浏览器的俄罗斯方块游戏

原文配图 27

正如你从 Claude Code 中看到的,它已经咨询了技术架构子代理,并制定了构建此俄罗斯方块游戏的计划。请注意技术架构交互以红色标出。

原文配图 28

这是 Claude Code 在我们的技术架构子代理协助下制定的计划。

Ready to code?                                                                                                                                                                      │
│                                                                                                                                                                                     │
│ Here is Claude's plan:                                                                                                                                                              │
│ ╭─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮ │
│ │ Tetris Game Implementation Plan                                                                                                                                                 │ │
│ │                                                                                                                                                                                 │ │
│ │ Phase 1: Project Setup & Core Structure                                                                                                                                         │ │
│ │                                                                                                                                                                                 │ │
│ │ 1. Create main HTML file with Canvas element and basic UI                                                                                                                       │ │
│ │ 2. Set up CSS for game styling and responsive design                                                                                                                            │ │
│ │ 3. Create core JavaScript files:                                                                                                                                                │ │
│ │   - GameEngine.js (main game loop with fixed timestep)                                                                                                                          │ │
│ │   - Constants.js (game configuration and tetromino definitions)                                                                                                                 │ │
│ │   - GameState.js (state management)                                                                                                                                             │ │
│ │                                                                                                                                                                                 │ │
│ │ Phase 2: Core Game Mechanics                                                                                                                                                    │ │
│ │                                                                                                                                                                                 │ │
│ │ 4. Implement TetrisBoard.js:                                                                                                                                                    │ │
│ │   - 10x20 grid representation                                                                                                                                                   │ │
│ │   - Collision detection system                                                                                                                                                  │ │
│ │   - Line clearing algorithm                                                                                                                                                     │ │
│ │ 5. Create Tetromino.js and TetrominoManager.js:                                                                                                                                 │ │
│ │   - All 7 tetromino pieces (I, O, T, S, Z, J, L)                                                                                                                                │ │
│ │   - Rotation matrices and wall kicks                                                                                                                                            │ │
│ │   - Piece spawning and movement logic                                                                                                                                           │ │
│ │ 6. Build InputHandler.js for keyboard controls:                                                                                                                                 │ │
│ │   - Arrow keys for movement/rotation                                                                                                                                            │ │
│ │   - Space for hard drop                                                                                                                                                         │ │
│ │   - Proper input debouncing                                                                                                                                                     │ │
│ │                                                                                                                                                                                 │ │
│ │ Phase 3: Rendering & Visual Polish                                                                                                                                              │ │
│ │                                                                                                                                                                                 │ │
│ │ 7. Implement Renderer.js:                                                                                                                                                       │ │
│ │   - Double-buffered canvas rendering                                                                                                                                            │ │
│ │   - Efficient redraw only changed regions                                                                                                                                       │ │
│ │   - Tetromino colors and grid visualization                                                                                                                                     │ │
│ │ 8. Add ScoreManager.js:                                                                                                                                                         │ │
│ │   - Line clearing scoring (single, double, triple, tetris)                                                                                                                      │ │
│ │   - Level progression and speed increase                                                                                                                                        │ │
│ │   - Statistics tracking                                                                                                                                                         │ │
│ │                                                                                                                                                                                 │ │
│ │ Phase 4: Audio & Game States                                                                                                                                                    │ │
│ │                                                                                                                                                                                 │ │
│ │ 9. Create AudioManager.js for sound effects                                                                                                                                     │ │
│ │ 10. Implement game state transitions:                                                                                                                                           │ │
│ │   - Menu screen                                                                                                                                                                 │ │
│ │   - Playing state                                                                                                                                                               │ │
│ │   - Pause functionality                                                                                                                                                         │ │
│ │   - Game over screen with restart                                                                                                                                               │ │
│ │                                                                                                                                                                                 │ │
│ │ Phase 5: Polish & Mobile Support                                                                                                                                                │ │
│ │                                                                                                                                                                                 │ │
│ │ 11. Add mobile touch controls                                                                                                                                                   │ │
│ │ 12. Implement preview of next piece                                                                                                                                             │ │
│ │ 13. Add ghost piece (shadow) showing drop position                                                                                                                              │ │
│ │ 14. Local storage for high scores                                                                                                                                               │ │
│ │                                                                                                                                                                                 │ │
│ │ Key Technical Decisions:                                                                                                                                                        │ │
│ │ - Vanilla JS + HTML5 Canvas for optimal performance                                                                                                                             │ │
│ │ - Fixed timestep game loop for consistent mechanics                                                                                                                             │ │
│ │ - Component-based architecture for maintainability                                                                                                                              │ │
│ │ - Double buffering for smooth 60fps rendering                                                                                                                                   │ │
│ │                                                                                                                                                                                 │ │
│ │ The game will be fully playable with standard Tetris mechanics, responsive design, and smooth performance across devices.                 

我对这个方案满意,所以我选择了“是”,并自动接受编辑。

Claude Code 现在正在按照我们与技术架构子代理共同制定的计划进行实施。

原文配图 29

这就是现在的游戏样子。还可以做出改进,但这是一个不错的开始。 原文配图 30

作为一个快速示例,下面是在我引入了一个前端开发子代理和一个测试子代理并发出以下提示时,claude 中的计划模式的样子。

通过将前端改为基于 Next.js 的应用来改进前端 并且还要为项目添加单元测试。确保前端开发人员和测试负责人参与决策过程

原文配图 31

当我选择“申请”时,你可以大致了解每个子代理将扮演的角色

原文配图 32

为生成子代理的有用提示

创建子代理

Claude Code 有一个名为子代理的功能,文档粘贴在下方。请通读它并确定哪些子代理最适合用于我的应用程序,这些子代理将如何改进我的应用并加快编码速度,然后实现这些子代理。文档:[在此粘贴来自 Claude Code 子代理页面的链接或内容]

第 12 步:钩子(Hooks)

虽然手动检查点系统提供了出色的版本控制,Claude Code 的钩子则把自动化提升到了更高的水平。钩子是当在你的 AI 辅助开发过程中满足某些条件时执行的自动化脚本。最实用的钩子是自动提交系统,它在 Claude 成功修改且无错误时自动提交你的代码,这建立在你已学过的检查点工作流之上。

设置自动提交钩子

要创建自动提交钩子,你需要配置一个监控 Claude 输出并在任务成功完成时自动提交的系统。创建一个配置文件来定义何时以及如何进行提交:

# Basic Auto-Commit Hook Setup
# 1. Create hook configuration
echo "on_success: auto_commit_with_smart_message" > .claude-hooks

# 2. Set up monitoring script
# This watches for Claude task completion and triggers commits
claude-hook-monitor --config .claude-hooks --enable auto-commit

# 3. Configure commit message templates
# Generates intelligent messages like "✅ Add user authentication system"

挂钩示例演示

下面是自动提交钩子在实际中的工作方式。 在 Claude 开始一个任务之前,钩子会创建一个检查点:git commit -m “🚀 Checkpoint: Before adding user dashboard”。在 Claude 成功完成该功能且无错误时,钩子会自动运行:git add . && git commit -m “✅ Add user dashboard with charts and filters”,并可选择将更改推送到远程仓库。如果 Claude 遇到错误,钩子可以自动回滚到上一个检查点,确保你的代码库始终保持可运行状态。 钩子的最佳实践包括从简单的基本自动提交功能开始,加入安全机制(如提交次数限制和对大改动的确认提示),并维护所有钩子活动的详细日志。这种自动化能节省大量时间,同时在整个 Claude Code 开发工作流中确保一致的版本控制实践。

参考来源

相关笔记