前言
由于claude code上配置使用 DeepseekV3.1 模型可以较大幅度地提升AI编程能力，本章分享claude code 的 相关技巧。
环境搭建
不再赘述，详情请查看【产品体验】Claude Code+Deepseek模型的配置使用方法
使用技巧
技巧1：使用context7查询最新API文档
通过在Claude Code中配置context7的mcp工具，可以让Claude Code在使用过程中，自动查询最新API文档，从而加速开发工作。
1.1 注册申请context7的API KEY
- 访问https://www.context7.com/
- 点击注册，注册一个账号
- 注册成功后，在个人中心->API KEY中，获取API KEY
1.2 配置context7的mcp工具
- 在终端中执行以下命令，安装mcp工具
Mac系统下配置方法：
claude mcp add context7 -- npx -y @upstash/context7-mcp --api-key YOUR_API_KEYWindows系统下配置方法：
claude mcp add --transport http context7 https://mcp.context7.com/mcp --header "CONTEXT7_API_KEY: yourkey"1.3 启动claude确认mcp工具可用
1.4 使用mcp工具查询API文档
可以通过如下的提示词让Claude Code自动查询API文档
请查询最新的XXX的API文档示例：
以下示例是我通过提示词让Claude Code查询mlflow的最新API文档进行大模型调用的代码更新示意图
技巧2：使用不同的提示词来进行方案设计、代码重构等
以下是我常用的提示词分享出来，可以根据自己的需求进行调整，。
2.1 代码重构提示词
请根据我提供的信息，进行相应代码优化的方案设计。
背景：
1、我已经对PPT生成的前端代码进行了梳理，但是其实现过程存在扩展性、维护性的问题，所以需要进行重构方案的评估。
目标：
1、根据我提供的资料，制定并输出一份重构方案到{{docs/arch}}目录下
资料：
docs/arch/AIPPT生成流程设计.md
需求：
我希望重构方案能够解决以下问题：
1）问题1：解决函数体过长且职责混杂的问题，提升代码的可维护性和可扩展性
2）问题2：解决硬编码的分页逻辑的问题，我希望能够对硬编码的策略进行提取，方便配置管理而不是在代码中hardcode
3）问题3：解决幻灯片生成的类型问题，目前幻灯片类型主要分为cover、contents、transition、content、end，而在实际教育场景下，content的内容还可以细分为不同类型，比如：背景介绍，学习目标，概念讲解，题目练习，问题讨论，内容总结，课后作业等等，这些不同的内容目的在content中呈现时，其排版等方式是不同的，需要PPT生成能够进行更好的选择和支持
要求：
1、优化方案需要有清晰的结构设计图，流程图
2、优化方案需要有核心代码的说明
3、优化方案中要包含代码文件的组织目录结构，组织方式需要在既有的项目目录文件维护基础上，能够按照行业规范进行代码文件清晰规划，
4、代码要清晰简洁，易于阅读和维护
5、代码要符合行业规范，向行业最佳实践看齐
6、优化方案可以暂时性保留原有的代码逻辑，实现新的代码实现；待新的代码实现没有问题后，原有旧的代码可以方便地清理清除。2.2 Bug修复提示词
请根据我反馈的问题,修复幻灯片生成过程中的显示问题.
背景：
1、我目前正在对当前系统的幻灯片生成流程进行重构，在重构过程中遇到了前端显示幻灯片刷新显示不正确的问题，所以需要你分析问题并修复。
问题:
1、生成幻灯片时,文字内容会先填充到骨架;当生成图片时,图片生成后在更新图片到对应幻灯片时,会将原来的文字覆盖,导致显示错误.
机制说明：
当前系统中有新旧两套机制：
1、老的机制：
A[前端调用/generate/slides] --> B[后端返回XML流]
B --> C[前端解析XML内容]
C --> D[前端组装幻灯片数据]
D --> E[前端调用updatePresentation]
E --> F[后端更新数据库]
2、新的机制：
A[前端建立SSE连接] --> B[后端批量生成内容]
B --> C[后端流式输出事件]
C --> D[前端更新UI状态]
B --> E[后端组装完整数据]
E --> F[后端单次数据库写入]
F --> G[发送完成事件]
备注：关于新老机制的详细说明，可以查看重构方案文档了解。
目标：
1、参考老机制幻灯片生成图片完成后的处理方式，修复新的机制下图片显示的问题
流程：
1、请你仔细阅读重构方案文档，对幻灯片生成的新老机制有一个了解
2、请你仔细阅读前端在图片生成后更新时，新老机制的实现过程
3、根据你的了解，修复新机制图片生成后更新到幻灯片覆盖文字的问题
补充信息:
1、老机制实现的时候,在生成幻灯片后,幻灯片的布局中会留有图片的位置,当图片生成完毕后会在预留位置显示对应的图片
资料：
1、重构方案文档：docs/arch/v0.2版本/stream流式输出重构设计方案.md
2、后端服务老接口：backend/app/api/v1/endpoints/generation.py
3、后端服务新接口：backend/app/api/v1/endpoints/stream.py
4、前端代码：frontend/src
要求：
1、问题修复的方式要在机制上彻底解决此问题
2、代码实现的架构、流程要采用行业标准规范或者最佳实践的做法
3、代码实现要结构清晰，易于阅读和维护
4、代码实现要满足我的需求
需求：
1、幻灯片生成的效果:
由于幻灯片往往有很多页,所以对于用户比较好的一种体验是:
1)当点击生成幻灯片后,先显示幻灯片的骨架(里面没有内容)
2)随着流式输出返回内容,页面中的骨架逐个地替换为幻灯片的内容
3)先显示幻灯片中的文字内容,对于有图片的可以显示图片占位符(例如加载中状态)
4)待图片生成之后，在已经显示的幻灯片中，占位符更新为实际的图片。
2、幻灯片生成的性能:
1)幻灯片生成的过程要性能尽量要快,减少用户的等待时间。2.3 方案评估提示词
请根据我提供的信息，进行相关功能的架构设计。
背景：
1、目前系统中已经实现了幻灯片的生成，包括幻灯片内容以及图片的生成。
2、在进行图片生成时，使用了文生图的接口，从而实现了对应的图片生成和显示。
问题：
1、问题1：目前图片生成之后，是下载到本地workspace的images中存储，数据库中通过local_path保存本地的文件路径。这种管理方式不够先进，没有使用目前主流的对象存储COS，所以我希望将图片的管理改为使用腾讯云的COS管理。
2、问题2：每次进行文生图非常消耗模型调用的Token，这带来了不少费用支出。我希望，能够在调用模型生成图片前，使用腾讯云的对象存储COS中查询是否有匹配相关内容的图片，如果有的话直接使用COS中的图片，从而避免进行文生图的生成。
目标：
1、请你根据我提出的问题和需求，重新规划图片管理的架构设计，输出设计文档
流程：
1、你需要仔细阅读了解当前项目的总体设计和后端设计
2、你需要仔细阅读当前后端的代码实现
3、你需要仔细阅读当前数据结构设计，特别是数据中generated_images数据表的设计
4、你需要阅读了解腾讯云文件存储的使用方法
5、结合上面你的了解，输出图片管理的实现方案设计
相关资料：
1、总体架构设计：docs/arch/总体架构设计.md
2、后端详细设计：docs/arch/后端详细设计.md
3、数据结构设计：docs/arch/数据结构设计.md
4、腾讯云对象存储：@https://cloud.tencent.com/document/product/436
要求：
1、架构设计文档应该包含整体的架构设计框架图
2、架构设计文档应该包含数据存储的设计
3、架构设计文档应该包含核心实现流程
注意：
1、已有的图片不需要考虑数据迁移的问题。
2、数据库中已有的记录也不需要考虑数据迁移问题。
输出文档位置：
docs/arch/图片管理设计.md
技巧3：使用chrome-devtools-mcp调试前端问题
官方使用方法：https://github.com/ChromeDevTools/chrome-devtools-mcp
3.1 配置mcp工具
- 在终端中执行以下命令，安装mcp工具
claude mcp add chrome-devtools npx chrome-devtools-mcp@latest1.3 启动claude确认chrome-devtools工具可用
启动claude之后，通过/mcp命令，确认chrome-devtools工具可用
1.4 使用chrome-devtools工具进行前端错误调试
可以通过如下的提示词让Claude Code自动启动前端页面并分析console错误
请使用chrome-devtools访问http://127.0.0.1:5173/,查看前端页面console的问题并告知我问题原因 示例：
-
Claude Code自动启动浏览器。
(为了演示，我未启动后端服务，手动点击AI自动生成触发错误)
-
Claude Code自动读取console错误
