Claude Code 落地实践的工作简易流程

上次分享了一些 Claude Code 使用的经验和如何让 Claude Code 如何自己卷自己一次性完成一个项目。

这次讲一些关于 Claude Code 常见的一些工作流 。方便新手用户快速上手 Claude Code 落地实践。

Claude Code 落地实践工作流程

1. 创建自定义命令

Claude Code 支持自定义斜杠命令，您可以创建这些命令来快速执行特定的提示或任务。

假设你是想为你的项目创建可重用的斜杠命令，所有团队成员都可以使用。

（1）在你的项目中创建命令目录

bash 复制代码

mkdir -p .claude/commands

(2) 为每个命令创建 Markdown 文件，每个Markdown文件名称就是自定义命令的名称。如这边创建的是optimize.md，那么对应的指令就是：/optimize

bash 复制代码

echo "分析这段代码的性能，并提出三个具体的优化建议：" > .claude/commands/optimize.md

（3）在 Claude Code 中使用您的自定义命令：

后面的括弧里显示的是project就是当前项目的指令。

bash 复制代码

/optimize

或者

bash 复制代码

/project:optimize

总结：

命令名称来自文件名（例如，optimize.md 变成 /project:optimize）
你可以在子目录中组织命令（例如，.claude/commands/frontend/component.md 变成 /project:frontend:component）
项目命令对克隆存储库的每个人都可用
Markdown 文件内容成为调用命令时发送给 Claude 的提示

2. 理解新代码库

假设您刚加入一个新项目，需要快速了解其结构。获取已有的代码库上的概览。

（1）切换进入项目目录下：

bash 复制代码

cd /path/to/project

（2）启动 Claude Code:

bash 复制代码

claude

（3）接着在对话框上，发起请求高级概览：

bash 复制代码

给我一个这个代码库的概述

（4）深入了解特定组件:

bash 复制代码

1. 解释这里使用的主要体系结构模式
2. 关键的数据模型是什么？
3. 身份鉴权是如何处理的？

总结：

从广泛的问题开始，然后缩小到特定领域
询问项目中使用的编码约定和模式
请求项目特定术语的词汇表

3. 重构代码

假设你需要更新旧代码以使用现代模式和实践。

(1) 识别需要重构的遗留代码:

bash 复制代码

> 在我们的代码库中查找过时的API用法

(2)获取重构建议:

bash 复制代码

> 建议如何重构utils.js以使用现代JavaScript特性

(3)安全地应用更改:

bash 复制代码

> 重构utils.js以使用ES2024的特性，同时保持相同的行为

(4)验证重构:

bash 复制代码

> 运行重构代码的测试

总结：

让 Claude 解释现代方法的好处
在需要时请求更改保持向后兼容性
以小的、可测试的增量进行重构

4. 高效修复错误

假设你遇到了错误消息，需要找到并修复其源头。

（1）与 Claude 分享错误：

bash 复制代码

> 当我运行npm test时，我看到一个错误

(2) 对话框中请求给出修复建议：

bash 复制代码

> 建议几种方法来修复user.ts中的@ts-ignore

(3) 根据修复建议，进行选择应用修复，当然了，你也可以让它自动修复：

bash 复制代码

> 更新 user.ts 添加检查空值的逻辑

总结：

告诉 Claude 重现问题的命令并获取堆栈跟踪
提及重现错误的任何步骤
让 Claude 知道错误是间歇性的还是持续的

5. 处理图像

假设你需要在代码库中处理图像，并希望 Claude 帮助分析图像内容。

（1）向对话添加图像

您可以使用以下任何方法：

将图像拖放到 Claude Code 窗口中
复制图像并使用 ctrl+v 粘贴到 CLI 中（不要使用 cmd+v）
提供图像路径给 claude。例如："分析这张图片: /path/to/your/image.png"

（2）让 Claude 分析图像

bash 复制代码

> 这张图显示了什么？

> 描述这个截图中的UI元素

> 这个图中有什么问题元素吗？

(3) 使用图像提供上下文

bash 复制代码

> 下面是错误的截图。是什么引起的？

> 这是我们当前的数据库模式。我们应该如何为新功能修改它？

(4) 从视觉内容获取代码建议

bash 复制代码

> 生成CSS以匹配此设计模型

> 什么样的HTML结构会重新创建这个组件？

总结：

当文本描述不清楚或繁琐时使用图像
包含错误截图、UI 设计或图表以获得更好的上下文
您可以在对话中使用多个图像
图像分析适用于图表、截图、模型图等

国内如何使用 Claude Code 教程

我是通过使用 Claude Code 直连镜像的，无需魔法，也不用担心封号问题，费用也比较低。

怎么使用和安装对应的直连镜像，可以参考这篇文章：《国内如何使用和安装Claude Code的教程》

Claude Code 常用的斜杠命令

命令	用途
/bug	报告错误（将对话发送给 Anthropic）
/clear	清除对话历史
/compact [instructions]	压缩对话，可选择焦点说明
/config	查看/修改配置
/cost	显示令牌使用统计
/doctor	检查 Claude Code 安装的健康状况
/help	获取使用帮助
/init	使用 CLAUDE.md 指南初始化项目
/login	切换 Anthropic 账户
/logout	从 Anthropic 账户登出
/memory	编辑 CLAUDE.md 记忆文件
/pr_comments	查看拉取请求评论
/review	请求代码审查
/status	查看账户和系统状态
/terminal-setup	安装 Shift+Enter 换行键绑定（仅限 iTerm2 和 VSCode）
/vim	进入 vim 模式以切换插入和命令模式