这篇通过一个实际案例，演示 Claude Code 如何帮你完成一个小功能，以及修复一个 Bug。
场景一：开发排序算法可视化工具
需求描述
我想做一个算法可视化的网站，能够通过可视化的方式，一步步展示常见排序算法的运行过程。
启动 Claude Code 后，我输入了这样的提示词：
我希望做一个算法可视化的网站，它能够通过例子，和可视化的方式，一步步的展示常见的排序算法的运行过程
Claude 收到需求后，并没有直接开始写代码，而是先问我：想用什么技术栈实现？我选择了 React。
创建项目结构
Claude 开始创建项目文件。
编写核心逻辑
然后是 JavaScript 核心逻辑，实现排序算法和动画效果。
Claude 给出了运行指令，让我用浏览器打开 HTML 文件查看效果。
运行验证
按照提示，我在浏览器中打开了页面。
功能正常！页面展示了排序算法的可视化过程，支持选择不同算法、调整速度、单步执行等操作。
场景二：修复一个 Bug
问题发现
在测试过程中，我发现了一个问题：执行单步排序后，重置按钮失效了。
于是我向 Claude 描述了这个 Bug：
重置按钮失效了，帮我看看是怎么回事？我执行了单步排序后，没法按重置。
问题分析
Claude 读取了代码，分析后发现：单步排序时修改了按钮状态，但没有在重置时恢复。问题出在状态管理上。
修复验证
Claude 修改了相关代码，添加了状态重置逻辑。我再次测试，重置按钮恢复正常了。
小结
通过这个案例可以看到 Claude Code 的工作方式：
开发功能时：
- 描述需求 → Claude 理解并给出方案
- 创建文件 → 逐步实现各个模块
- 运行验证 → 确认功能正常
修复 Bug 时：
- 描述问题 → 说明具体症状
- Claude 分析 → 读取代码定位原因
- 修复验证 → 确认问题解决
关键点：描述要具体。开发功能时说清楚要做什么，修复 Bug 时说清楚哪里不对、怎么操作会出现问题。这样 Claude 才能准确理解你的意图。
从这两个案例中可以看到，Claude 的一个重要特点：先思考，后行动。无论是开发功能还是修复 Bug，Claude 都会先理解需求、分析问题，然后再动手写代码。这种工作方式能避免很多无效操作，提高开发效率。后续文章中，我们会深入介绍 Claude 这类 Coding Agent 在任务执行规划时的基本原理。
