從上個月 9 號開始從 Cursor 轉使用 Claude Code 也快一個月了，我算是中度使用，也輕鬆回本（20$ 一個月），現在 Cursor 就主要負責 tab 補全了，日常全是 Claude Code 更好用，下面是 ccusage 截圖。
太太太太太爽了，用 sonnet-4 對我來說已經足夠，很聰明，下面記錄一下日常使用的小技巧。本篇沒什麼乾貨，只有一些記錄～
小知識#
從 6 Weeks of Claude Code - Puzzmo Blog 和 How I use Claude Code (+ my best tips) 等文章裡學到了幾個小知識，還有一些是之前看到的。
- 透過 hook 在 claude 的
settings.json設置通知音（Claude Code 設置 - Anthropic），如在完成的時候語音通知我 “任務完成”，在請求權限時通知我 “等待許可”，可參考 鉤子參考 - Anthropic
{
"hooks": {
"Notification": [
{
"matcher": "",
"hooks": [
{
"type": "command",
"command": "afplay /System/Library/Sounds/Funk.aiff && say \\\"等待許可\\"
}
]
}
],
"Stop": [
{
"matcher": "",
"hooks": [
{
"type": "command",
"command": "afplay /System/Library/Sounds/Glass.aiff && say \\\"任務完成\\"
}
]
}
]
}
}
- 透過 permissions 設置常用的命令直接放過，不用每次都允許，也不用擔心
--dangerously-skip-permissions亂刪東西。
{
"permissions": {
"allow": ["Bash(grep:*)", "Bash(find:*)", "Bash(mkdir:*)", "Bash(rg:*)", "Bash(ls:*)", "Bash(awk:*)"]
}
}
-
由於它是一個終端介面，所以從 Command + V 貼上剪貼板中的圖像不起作用。請改用 Control + V（在 mac 上）
-
創建自定義斜杠命令。ClaudeCode 可以非常輕鬆地添加自定義斜杠命令。要添加命令，只需創建一個
.claude/commands文件夾，將命令名稱添加為擴展名為.md的文件。只需用自然語言編寫這些內容，然後可以使用$ARGUMENTS字符串將參數放入提示中。具體官方教程在 斜杠命令 - Anthropic
# 創建個人命令
mkdir -p ~/.claude/commands
echo "審查此代碼的安全漏洞：" > ~/.claude/commands/security-review.md
可使用 GitHub - brennercruvinel/CCPlugins 添加一部分指令，他提供了一些主要命令，如:
/cleanproject、/commit、/format、/scaffold、/test、/implement、/refactor實現一鍵清理、初始化和重構等。- 代碼質量與安全：
/review、/security-scan、/predict-issues等執行代碼 Review，自動檢測和修復安全漏洞、導入問題、TODO 等。 - 高級分析：
/understand、/explain-like-senior、/make-it-pretty提供全局架構分析、高級代碼解釋和可讀性優化。 - 會話與項目管理：
/session-start、/session-end、/docs、/todos-to-issues、/undo增加會話持續性，保障開發過程可追溯和可回滾。
使用 Claude Code 進行項目的快速學習#
常見工作流程 - Anthropic 官方也有給一些常用流程的示例教程。
比如我想學習這個項目 GitHub - webclipper/web-clipper 想讓 AI 給我進行分析，學習其中抓取網頁的精髓。
首先 clone 項目到本地，/init 生成 CLAUDE.md 項目文檔，然後我會問他：
我需要對這個項目進行學習，學習其整體結構與其是如何抓取 web 內容的，輸出一系列 md 文檔在 docs 文件夾下供我參考。
> @CLAUDE.md @src/ @docs/ 我需要對這個項目進行學習，學習其整體結構與其是如何抓取 web 內容的，輸出一系列 md 文檔在 docs 文件夾下供我參考。
⎿ Read CLAUDE.md (65 lines)
⎿ Listed directory src/
⎿ Listed directory docs/
⎿ ⧉ Selected 46 lines from CLAUDE.md in Cursor
⏺ I'll help you learn the web-clipper project by creating comprehensive documentation. Let me first create a todo list to plan this learning
documentation task.
...
⏺ Update Todos
⎿ ☒ Create docs directory structure
☒ Analyze and document overall project architecture
☒ Document web content capture mechanism
☒ Document service plugin system
☒ Document extension system
☒ Document IPC communication system
☒ Document build and deployment process
⏺ Write(docs/README.md)
⎿ Wrote 137 lines to docs/README.md
# Web-Clipper 學習文檔
本文檔集合詳細解析了 Web-Clipper 項目的整體架構、核心機制和技術實現，旨在幫助開發者深入理解這個通用網頁剪藏瀏覽器擴展的設計思路和實現細節。
## 文檔目錄
### 1. [項目架構概覽](./01-architecture-overview.md)
- 項目簡介和核心架構模式
- 主要目錄結構和技術棧
- 三個主要入口點的職責分工
… +127 lines (ctrl+r to expand)
⏺ 我已經完成了對 Web-Clipper 項目的全面學習和文檔化工作。在 docs/ 文件夾下創建了完整的學習文檔系列：
已創建的文檔
1. docs/01-architecture-overview.md - 整體架構和技術棧
2. docs/02-content-capture-mechanism.md - 網頁內容抓取的核心實現
3. docs/03-service-plugin-system.md - 25+ 服務的插件架構
4. docs/04-extension-system.md - 6 種擴展的生命週期管理
5. docs/05-ipc-communication-system.md - 進程間通信架構
6. docs/06-build-and-deployment.md - Webpack 構建配置
7. docs/README.md - 學習指南和文檔導航
核心發現
Web-Clipper 是一個設計精良的瀏覽器擴展項目，具有以下突出特點：
- 高度模組化: 透過動態服務發現和擴展系統實現了極高的可擴展性
- 類型安全: 完整的 TypeScript 支持確保代碼質量
- 架構先進: 使用依賴注入、通道化通信等現代架構模式
- 多瀏覽器支持: 一套代碼適配 Chrome 和 Firefox
- 用戶體驗優秀: 智能內容提取、國際化支持、靈活配置
這些文檔將幫助你深入理解項目的設計思路和實現細節，是學習瀏覽器擴展開發和大型 TypeScript 項目架構的優秀參考資料。
這樣生成出來的一系列 md 不僅準確度高，而且易於學習，相當推薦的說。
繼續追問核心實現：
> 繼續深入分析智能提取的實現，以及圖片是如何進行提取的。也輸出 markdown 文件
⎿ Found 10 new diagnostic issues in 1 file (ctrl-r to expand)
⏺ 我將深入分析智能提取和圖片提取的實現機制，並創建詳細的文檔。
⏺ Update Todos
⎿ ☐ Analyze intelligent content extraction mechanism
☐ Analyze image extraction and processing
☐ Document Readability algorithm implementation
☐ Document screenshot capture and processing
☐ Document image hosting integration
☐ Create comprehensive analysis document
結果：也清晰無誤的分析了大概 577 行的 md，如果想要更深入某個部分同理。
也試了試上文提到的 CCPlugin 中的 /understand，但是這個實測沒有上面這個質量好，應該是輔助開發過程中使用的。