演示文稿
文稿要求：1.使用Claude Code完成了哪些工作 2.过程中遇到了哪些难题，是如何解决的 3.想给大家分享的经验；
完成的工作
简单任务
需求：
- ibox 个人中心 H5，修改完密码，添加一个弹窗倒计时功能。
bug:
- 地图未显示，数据边界处理检测问题，改得比较快
- 首页加载 undefined 图片
简单任务，目标明确任务，效率提升比较大。
中等优化任务
优化 pdf 预览组件，优化包大小。
优化 Echarts 的导入，首屏渲染速度加快。给出目标和限制，让AI优化，出了好几个版本，中间反复说不合适，反复横跳，最后自己综合了AI的几种方案，实现了首屏不加载Echarts的效果
去除无用包，升级/优化包。直接让AI去除无用包，升级包，并兼容当前 node 版本，AI 只给了一些建议，并没有去改代码升级。只能手动升级，转换思路让它推荐工具，但是推荐了一些 npm 命令，可视化工具，vscode 插件 version lens
敏感数据加解密，脱敏。理解代码逻辑，代码优化：从 6000 多行 -> 不到 2000 行。代码逻辑是 AI 帮助分析，一些方案和取舍还有业务方面，需要人为把握
中间有命令行报错询问 AI, 提供解决方案。
感觉 claude 应该对这类需要查询文档类的任务，没法直接修改，其实这个可以用 chat 类的 AI 工具就够用。
效率提升不多，但是对个人成长提升还是不少，过程中我俩是合作者，它对项目的细节把握度不够，我对一些边界处理考虑不够和知识储备量也不如他，但是奔着一个目标，互相在卡壳的时候给提示，最终把任务完成，提升了自己的代码能力和知识储备。
困难任务
写 Vite 插件，自己本身基本没有写 Vite 插件的经验，只看得懂代码语法，一些配置也不是很熟悉，基本全程让 AI 自己写，自己控制台验证效果。
人就是告诉 AI 效果是否正确，不对的话就自己测
结果能出来，并不是很快
分享的经验
总结
让 AI 执行一些目标明确的任务，会比较快和准确。
- 明确文件路径，明确代码行数，明确任务（交互、逻辑）
- 全局变量、全局函数要少用，或者让 AI 优化代码的时候告诉 AI 哪些是全局的，否则 AI 可能会自己实现一遍，或者转去读其他文件，浪费 时间和 token
- 少用一些模糊类话，例如：帮我优化一下代码
注意：
AI 命令行是沙箱环境，每次让AI 启动项目测试都会占用一个端口，测完了关不掉，只能关闭当前窗口，才能清空沙箱环境运行的端口服务
让AI对比git的修改记录，生成.patch文件，不能真正生成到工作目录下，只能生成的在沙箱环境里面
codex 每次只能读180行代码，超过180行代码，AI会自动询问是否读取剩余的代码
技巧
快捷键
| 快捷键 | 功能 |
|---|---|
! | 切换为命令行模式（如 Bash） |
@ | 插入文件路径 |
# | 标记内容为“需记忆”或重点 |
Esc（双击） | 清空输入框 |
Ctrl + _ | 撤销 |
Alt + M | 自动接受编辑建议 |
Alt + V | 粘贴图片 |
Ctrl + O | 显示详细输出 |
Ctrl + T | 查看待办事项 |
Tab | 切换思考模式（显示推理过程） |
\ + 回车 | 插入换行，不提交 |
插件
vscode 插件 Claude Code for VS Code（如果不生效，请升级 node，升级 vscode），作用：
- AI 输出的文件变更，实时显示对比
- 实时监控鼠标选中代码，在命令行中有提示。明确目标和方向
git
git 配合（非远程项目也可以在工作目录执行 git init）。建议每次进行一个任务 git add . 一次，每次任务取得阶段性进展的时候 commit 提交到本地一次
每次输出都要看一下 AI 输出了哪些内容，原因：
- 把握 AI 的方向，把控节奏,以免跑偏，过度设计；还有就是，陷入死胡同，及时提示
- 减少输出无用代码
- 学习 AI 输出的代码，自我提升，例如：代码质量、逻辑清晰度
git 历史记录
配合其他 mcp
mcp 插件类比：
项目文件：原材料 MCP 插件：各种厨具，电器 AI: 厨子 用户：客人（点餐）
例子：
vscode 安装 chrome devtools mcp
code --add-mcp '{\"name\":\"chrome-devtools\",\"command\":\"npx\",\"args\":[\"chrome-devtools-mcp@latest\"]}'或者直接在.vscode/mcp.json 中添加
{
"servers": {
"chrome-devtools": {
"command": "npx",
"args": [
"chrome-devtools-mcp@latest"
]
}
},
"inputs": []
}
```txt
claude mcp add chrome-devtools npx chrome-devtools-mcp@latest告诉CLAUDE 连接 chrome devtools mcp 然后打开网站，测试性能