1. Claude Code 簡介與安裝
1.1 什么是 Claude Code
Claude Code 是 Anthropic 官方推出的命令行 AI 編程助手，專為開發(fā)者設計。它既是獨立的 CLI 工具，也可作為插件集成到主流編輯器中。
核心特性：
- ??? CLI 優(yōu)先：直接在終端中運行
claude命令進行交互 - ?? 編輯器集成：支持 VS Code、JetBrains IDE（WebStorm/IntelliJ）、Trae等編輯器插件
- ?? 多模型支持：可接入 Claude 系列模型（Sonnet、Opus、Haiku）
- ?? 項目感知：通過 CLAUDE.md 文件理解項目上下文和規(guī)范
- ?? 模塊化架構(gòu)：支持 Skills（技能包）、Subagents（子智能體）、MCP（外部工具連接）
一句話總結(jié)： 在終端或編輯器中直接對話的 AI 結(jié)對編程伙伴，能理解你的代碼庫并提供精準幫助。
1.2 環(huán)境準備
在安裝 Claude Code 前，請確保你的開發(fā)環(huán)境滿足以下要求：
?? 系統(tǒng)要求
- Node.js：版本 18 或更高（推薦 LTS 版本）
- Git：已安裝并配置用戶信息
- 包管理器：npm 或 yarn（npm 隨 Node.js 自動安裝）
- 終端：支持 Bash、Zsh、PowerShell 等
? 驗證通過標準
-
node --version顯示 v18.x.x 或更高 -
git --version顯示版本號且配置信息完整 - 終端可正常執(zhí)行 npm 命令
1.3 安裝步驟
1.3.1 全局安裝 Claude Code
npm install -g @anthropic-ai/claude-code
1.3.2 編輯器插件安裝
在編輯器中搜索并安裝 Claude Code 插件。
1.3.3 驗證安裝
在終端中輸入以下命令驗證 Claude Code 的能力：
claude
：你是什么模型？有什么能力？全部列舉，簡短回答
1.3.4 初始化項目
項目初始化是讓 Claude Code 理解你的代碼庫結(jié)構(gòu)和開發(fā)規(guī)范的關(guān)鍵步驟。
?? 初始化流程
啟動 Claude Code 并執(zhí)行初始化：
claude
/init
?? /init 命令功能
/init 命令會自動分析你的項目并生成關(guān)鍵配置文件：
-
分析現(xiàn)有文檔：讀取
README.md、package.json等文件 - 生成 CLAUDE.md：在項目根目錄創(chuàng)建項目配置文件
-
補充缺失文檔：如果
README.md不存在或內(nèi)容不足，會自動生成 - 理解項目結(jié)構(gòu)：分析目錄布局、技術(shù)棧和開發(fā)規(guī)范
??? 后續(xù)優(yōu)化
如果對生成的文檔不滿意，可以手動優(yōu)化：
# 重新生成 README.md
生成這個項目的 README.md
# 基于更新后的 README.md 重新生成 CLAUDE.md
參考最新的 README.md，重新生成 CLAUDE.md
?? 注意事項
-
/init命令會讀取項目文件，請確保不包含敏感信息 - 生成的文件可能需要根據(jù)項目特點手動調(diào)整
- 大型項目初始化可能需要較長時間
1.3.5 第三方Skill集成
1.3.5.1 UI UX Pro Max
什么是UI UX Pro Max？
UI UX Pro Max 是一個專為 AI 編程助手打造的設計智能技能包，它通過強大的設計數(shù)據(jù)庫和語義搜索功能，幫助開發(fā)者快速生成符合行業(yè)標準的界面設計方案。
核心能力：
- ?? 設計數(shù)據(jù)庫：包含數(shù)千個行業(yè)標準的設計模式和組件
- ?? 語義搜索：通過自然語言描述搜索合適的設計方案
- ??? 多平臺適配：支持 Web、移動端、桌面應用等多種平臺
- ?? 多框架支持：適配 Vue、React、Angular 等主流前端框架
- ?? AI助手集成：專為 Claude Code、Cursor、Windsurf 等 AI 編程助手優(yōu)化
安裝與初始化
# 1. 全局安裝 UI Pro CLI
npm install -g uipro-cli
# 2. 驗證安裝
uipro --version
# 3. 在項目中初始化（針對Claude Code）
uipro init --ai claude
# 4. 查看生成的配置文件
ls -la .claude/skills/
初始化后生成的文件：
項目目錄/
├── .claude/
│ └── skills/
│ └── ui-ux-pro-max/
│ └── SKILL.md # UI UX Pro Max 技能配置文件
配置文件說明：
-
SKILL.md文件包含了 UI UX Pro Max 的所有配置和指令 - 你可以根據(jù)需要修改這個文件來定制設計規(guī)則和偏好
- 修改后無需重新安裝，Claude Code 會自動加載更新后的配置
命令行使用示例
提示：以下示例都是在Claude Code會話中直接輸入的自然語言命令，UI UX Pro Max會自動識別并調(diào)用相應的設計功能。
1. 基本設計生成
# 在Claude Code會話中直接輸入：
生成一個用戶登錄頁面的設計，包含郵箱/密碼輸入和第三方登錄選項
2. 特定風格設計
# 在Claude Code會話中直接輸入：
設計一個深色主題的管理后臺儀表板，使用Material Design組件
3. 響應式布局
# 在Claude Code會話中直接輸入：
創(chuàng)建一個電商商品列表頁，支持桌面、平板和手機三種視圖
4. 設計系統(tǒng)生成
# 在Claude Code會話中直接輸入：
為我的SaaS應用創(chuàng)建一套完整的設計系統(tǒng)，包括顏色、字體、間距和組件規(guī)范
常用工作流程
場景1：快速原型設計
1. 在Claude Code中輸入設計需求
2. UI UX Pro Max 自動搜索合適的設計模式
3. 生成完整的界面代碼和設計說明
4. 根據(jù)需要調(diào)整和優(yōu)化
場景2：設計規(guī)范制定
1. 描述你的品牌風格和設計需求
2. 生成完整的設計系統(tǒng)文檔
3. 導出可復用的設計組件
4. 集成到現(xiàn)有項目中
場景3：多平臺適配
1. 指定目標平臺（Web、iOS、Android）
2. 生成平臺特定的設計規(guī)范
3. 提供跨平臺的一致性建議
4. 生成對應的代碼實現(xiàn)
最佳實踐
- 明確需求：在請求設計時盡可能詳細描述需求
- 提供上下文：說明項目類型、目標用戶和技術(shù)棧
- 迭代優(yōu)化：先生成基礎(chǔ)設計，再逐步優(yōu)化細節(jié)
- 保持一致性：使用相同的設計語言和組件庫
- 測試可用性：生成設計后在實際設備上測試體驗
技術(shù)棧適配提示：
- Vue + Element Plus：適合企業(yè)級后臺管理系統(tǒng)
- React + Ant Design：適合中臺和業(yè)務系統(tǒng)
- 移動端優(yōu)先：優(yōu)先考慮移動端體驗，再適配桌面端
- 無障礙設計：考慮可訪問性要求，確保符合WCAG（Web內(nèi)容可訪問性指南）標準
1.3.5.2 OpenSpec規(guī)范驅(qū)動開發(fā)
什么是OpenSpec？
OpenSpec 是一個為 AI 編碼助手設計的規(guī)范驅(qū)動開發(fā)工具，它通過輕量級的工作流程，確保人類開發(fā)者和 AI 助手在編寫任何代碼之前就能對需求達成明確共識。
核心價值：
- ?? 需求對齊：在編碼前明確需求，避免返工
- ?? 規(guī)范先行：先寫規(guī)范，再寫代碼，確保質(zhì)量
- ?? 人機協(xié)作：為AI助手提供清晰的開發(fā)指導
- ?? 變更管理：系統(tǒng)化地管理功能變更和需求演進
安裝與初始化
# 1. 安裝OpenSpec CLI
npm install -g @fission-ai/openspec@latest
# 2. 驗證安裝
openspec --version
# 3. 在項目中初始化OpenSpec
openspec init
# 4. 查看已創(chuàng)建的變更規(guī)范
openspec list
初始化后需要做的事：
- 閱讀生成的
openspec/project.md文件 - 根據(jù)你的項目特點填寫項目信息、技術(shù)棧和開發(fā)約定
- 根據(jù)需要將相關(guān)文檔翻譯為中文
核心工作流命令
OpenSpec 的核心工作流圍繞三個關(guān)鍵命令展開，對應開發(fā)的不同階段：
1. ?? /openspec:proposal - 創(chuàng)建變更提案
- 用途：為新的功能、修改或刪除創(chuàng)建詳細的規(guī)范提案
- 場景：開始新功能開發(fā)前，或需要對現(xiàn)有功能進行重大變更時
- 作用：生成結(jié)構(gòu)化的需求文檔，確保AI理解你的意圖
2. ?? /openspec:apply - 應用變更規(guī)范
- 用途：基于已批準的提案開始實際編碼工作
- 場景：提案審核通過后，開始實現(xiàn)功能
- 作用：指導AI按照規(guī)范要求編寫代碼，確保實現(xiàn)符合預期
3. ?? /openspec:archive - 歸檔已完成變更
- 用途：標記變更已完成，清理工作空間
- 場景：功能開發(fā)完成并通過測試后
- 作用：保持變更列表整潔，便于管理歷史記錄
使用示例：
# 場景：需要添加用戶登錄功能
1. 在Claude Code中輸入：/openspec:proposal
2. 描述需求："添加用戶登錄功能，支持郵箱/密碼登錄和第三方登錄"
3. AI會生成詳細的規(guī)范文檔供你審核
4. 審核通過后輸入：/openspec:apply
5. AI開始按照規(guī)范實現(xiàn)登錄功能
6. 功能完成后輸入：/openspec:archive
常用管理命令
# 查看所有活動變更（未歸檔的）
openspec list
# 交互式查看變更儀表板
openspec view
# 查看特定變更的詳細信息
openspec show <變更名稱>
# 驗證規(guī)范格式是否正確
openspec validate <變更名稱>
# 交互式歸檔變更（會詢問確認）
openspec archive <變更名稱>
# 非交互式歸檔（直接歸檔）
openspec archive <變更名稱> --yes
# 刷新AI指導，重新生成Claude Code命令
openspec update
規(guī)范格式模板
## ADDED Requirements # 新增功能需求
## MODIFIED Requirements # 修改功能需求（必須包含完整的新文本）
## REMOVED Requirements # 移除功能需求
最佳實踐：
-
先提案，后編碼：始終使用
/openspec:proposal開始新工作 - 明確邊界：在提案中清晰定義功能范圍和限制
- 定期歸檔：完成的工作及時歸檔，保持列表整潔
- 版本控制：將規(guī)范文檔納入Git版本管理
2. Claude Code 基礎(chǔ)使用指南
2.1 基本命令
| 命令 | 功能描述 | 使用場景 | 示例 |
|---|---|---|---|
/clear |
清除本次上下文 | 開始新任務時清理歷史 | /clear |
| 回檔 | 回檔（撤消改動、回滾） | 操作失誤時恢復 | 回滾 |
/model |
切換模型 | 需要不同模型能力時 | /model sonnet |
/cost |
查看當前會話使用情況 | 監(jiān)控資源消耗 | /cost |
/compact |
清除對話歷史記錄，保留上下文摘要 | 清理歷史但保留關(guān)鍵信息 | /compact |
/quit |
退出 Claude Code | 結(jié)束會話 | /quit |
/help |
顯示幫助信息 | 查看可用命令 | /help |
/resume |
恢復歷史會話 | 繼續(xù)之前的工作 | /resume |
/tasks |
查看后臺任務 | 監(jiān)控運行中的任務 | /tasks |
常用命令速查：
# 快速開始新任務
/clear
# 查看當前花費
/cost
# 切換為 Sonnet 模型（平衡性能與成本）
/model sonnet
# 退出會話
/quit
2.2 文件引用功能
在對話中輸入 @ 符號可以引用文件、文件夾等，讓 AI 理解上下文：
基本用法：
# 引用單個文件
@README.md 幫我優(yōu)化這個文檔
# 引用文件夾
@src/components/ 分析這個組件目錄的結(jié)構(gòu)
# 引用多個文件
@package.json @tsconfig.json 查看項目配置
高級用法：
# 引用并指定操作
@src/utils/date.ts 優(yōu)化這個日期工具函數(shù)
# 引用并對比
@old-version.js @new-version.js 對比這兩個文件的差異
# 引用并生成文檔
@src/api/user.ts 為這個API文件生成使用文檔
文件引用規(guī)則：
- 支持相對路徑和絕對路徑
- 支持通配符：
@src/**/*.ts（所有TypeScript文件） - 支持多個文件同時引用
- 文件不存在時會提示錯誤
2.3 思考模式
2.3.1 命令行
在 Claude Code 中，可以使用 "think" 這個詞來激活深度思考模式，包括以下幾種級別（思考深度遞增）：
思考級別：
-
think- 輕度思考 -
think hard- 中度思考 -
think harder- 深度思考 -
ultra think- 極限思考（最費錢但能力最強）
使用示例：
# 簡單問題
1+1=？think
# 復雜算法問題
實現(xiàn)一個快速排序算法 think hard
# 架構(gòu)設計問題
設計一個微服務架構(gòu) think harder
# 最難的問題
證明哥德巴赫猜想 ultra think
成本提示：
-
think：成本最低，適合簡單問題 -
think hard：中等成本，適合復雜問題 -
think harder：較高成本，適合架構(gòu)設計 -
ultra think：最高成本，發(fā)揮 Claude 最大潛能
最佳實踐：
- 先用
think測試簡單問題 - 復雜問題用
think hard - 架構(gòu)設計用
think harder - 只有最重要的問題才用
ultra think
2.3.2 界面交互
快捷鍵： Tab 開啟/關(guān)閉（實時切換）
功能： 顯示 AI 的推理過程（灰色斜體文字），讓你看到 Claude 的"內(nèi)心活動"
適用場景：
- 調(diào)試 AI 思路： 想看 AI 怎么思考的
- 發(fā)現(xiàn)問題： AI 答案有問題時進行調(diào)試
- 糾正誤解： 發(fā)現(xiàn) AI 理解錯了需求時
- 學習 AI： 了解 AI 解決問題的方法
使用示例：
# 開啟思考模式后提問
Tab
幫我優(yōu)化這個函數(shù)...
# 看到思考過程后可以干預
等等，你理解錯了，我需要的是...
# 關(guān)閉思考模式
Tab
思考模式顯示的內(nèi)容：
- 問題分析過程
- 方案選擇理由
- 代碼實現(xiàn)思路
- 潛在問題考慮
2.4 執(zhí)行模式切換
快捷鍵： Shift + Tab（循環(huán)切換）
2.4.1 Normal Mode - 默認模式（新手推薦）
- 特點： 所有操作都詢問用戶，AI 不會擅自行動
- 適用場景： 不熟悉文件夾結(jié)構(gòu)，或處理重要內(nèi)容時（重要文檔、核心代碼等）
-
提示： 每次操作前都會顯示
?? 危險操作檢測！確認框
2.4.2 Accept Edits - 自動編輯（日常使用）
- 特點： AI 可以自動修改文件，但運行命令時仍會詢問
- 適用場景： 日常工作，信任 AI 的改動（整理文檔、優(yōu)化內(nèi)容、批量處理等）
-
提示： 文件編輯自動執(zhí)行，但
git、npm等命令仍需確認
2.4.3 Plan Mode - 先看計劃（復雜任務用）
- 特點： AI 先列出完整計劃，用戶審查后再執(zhí)行
- 適用場景： 復雜功能開發(fā)，想先看清楚 AI 要做什么
- 流程： 分析 → 計劃 → 用戶批準 → 執(zhí)行
2.4.4 Bypass Permissions - 完全自動（?? 危險！）
- 特點： AI 可以做任何事，不詢問用戶（包括刪除文件?。?/li>
- 適用場景： 批量自動化操作（文件整理、格式轉(zhuǎn)換、數(shù)據(jù)處理）
-
激活方式： 啟動時加
--dangerously-skip-permissions參數(shù) - 警告： 可能誤刪文件，僅限信任的環(huán)境使用
模式選擇指南：
# 啟動時指定模式
claude --mode accept-edits
# 臨時切換模式（會話中）
我現(xiàn)在要處理一些簡單文檔整理，切換到 Accept Edits 模式
自動啟動設置：
# 或使用提示詞讓 Claude 幫你設置
幫我設置 Claude Code 自動以 bypass permissions 模式啟動。
當我輸入 claude 時，自動執(zhí)行 claude --dangerously-skip-permissions
2.5 恢復歷史會話
Claude Code 會自動保存你的對話歷史，可以通過多種方式恢復：
2.5.1 非交互模式（啟動時恢復）
在終端中直接使用帶參數(shù)的命令：
| 命令 | 功能 | 使用方式 | 示例 |
|---|---|---|---|
claude --continue 或 claude -c
|
自動繼續(xù)最近的對話 | 無需任何提示 | claude -c |
claude --resume 或 claude -r
|
顯示歷史對話選擇器 | 選擇要恢復的會話 | claude --resume |
注意： 這兩個帶參數(shù)的命令需要在「非交互模式」下進行，也就是還沒有進入 Claude Code 會話時。
2.5.2 交互模式（會話中恢復）
如果已經(jīng)進入了 Claude Code 會話，可以使用 /resume 命令：
# 在 Claude Code 會話中輸入
/resume
# 使用方向鍵選擇要恢復的會話
↑ ↓ 選擇會話，Enter 確認
操作步驟：
- 輸入
/resume命令 - 使用上下方向鍵瀏覽歷史會話列表
- 按 Enter 鍵恢復選中的會話
- 繼續(xù)之前的對話
2.5.3 查看所有歷史會話
# 查看會話列表（帶時間戳）
claude --list-sessions
# 查看會話詳情
claude --show-session <會話ID>
2.5.4 管理歷史會話
# 刪除特定會話
claude --delete-session <會話ID>
# 清理所有歷史會話
claude --clear-sessions
# 導出會話記錄
claude --export-session <會話ID> > conversation.txt
最佳實踐：
- 重要會話命名： 在重要對話開始時說明主題，便于后續(xù)查找
- 定期清理： 清理不再需要的會話記錄
- 備份重要對話： 導出重要的技術(shù)討論或解決方案
-
使用
--continue： 日常開發(fā)中使用claude -c快速繼續(xù)工作
3. Claude Code 架構(gòu)組件概述
3.1 核心組件介紹
Claude Code 的整體架構(gòu)包括以下五個核心組件，它們協(xié)同工作形成一個完整的 AI 編程助手生態(tài)系統(tǒng)：
-
Prompts（提示詞）：你在對話中給 Claude 的即時指令
- 用途：處理當前的具體需求，靈活但不持久
- 類比：就像當面給同事的口頭指示
-
Projects（工作空間）：長期項目的工作空間
- 用途：CLAUDE.md 是 Projects 功能的具體載體，它包含了項目所需的所有上下文信息
- 類比：整個項目文件夾（包含所有文件）
-
Skills（技能包）：可復用的操作手冊和資源包
- 用途：讓 Claude 穩(wěn)定地按同一套方法完成重復性任務
- 類比：標準作業(yè)流程（SOP）
-
Subagents（子智能體）：分工明確的專業(yè)助手
- 用途：獨立處理專門任務，實現(xiàn)權(quán)限隔離和并行處理
- 類比：專業(yè)領(lǐng)域的專家顧問
-
MCP（模型上下文協(xié)議）：外部工具連接協(xié)議
- 用途：讓 Claude 接入數(shù)據(jù)庫、API 等外部數(shù)據(jù)源
- 類比：系統(tǒng)的擴展接口，用于連接 Claude Code 與外部工具
3.2 組件關(guān)系與協(xié)作
這些組件按照以下順序協(xié)同工作，形成一個完整的 AI 編程助手生態(tài)系統(tǒng)：
- Prompts 提供即時指令：處理當前對話的具體需求
- Projects 提供持久上下文：長期項目中的內(nèi)容積累和連續(xù)性
- Skills 提供穩(wěn)定能力：確保重復性任務的質(zhì)量一致性
- Subagents 提供專業(yè)分工：復雜任務的并行處理和權(quán)限隔離
- MCP 提供外部連接：擴展 Claude Code 的能力邊界
4. CLAUDE.md文件詳解
4.1 什么是CLAUDE.md文件？
CLAUDE.md 是 Claude Code 的"項目備忘錄"，一個特殊的配置文件，用于告訴 Claude Code 項目的組織結(jié)構(gòu)、開發(fā)約定、技術(shù)規(guī)范和流程。
存放位置： 項目根目錄，團隊共享
核心價值： 將項目關(guān)鍵信息寫入 CLAUDE.md，讓 Claude Code 從對話開始就"對齊上下文"，避免重復解釋。
4.2 文件內(nèi)容要點
為 Claude Code 補充項目背景、明確工作流程、說明常用工具和約定。重點記錄實際開發(fā)中需要反復解釋的內(nèi)容。
記錄內(nèi)容：
- 常用 bash 命令
- 關(guān)鍵工具類
- 編碼規(guī)范
- 測試方法
- 倉庫結(jié)構(gòu)
- 環(huán)境搭建步驟
- 常見注意事項
格式要求： 簡潔易讀，便于團隊成員和 Claude Code 快速理解。
4.3 /init 之后，下一步做什么？
執(zhí)行 /init 命令生成 CLAUDE.md 后：
# 1. 檢查生成內(nèi)容的準確性
# 2. 補充項目特有的"潛規(guī)則"
# 3. 精簡通用內(nèi)容，保留項目相關(guān)部分
# 4. 提交到版本控制系統(tǒng)
具體步驟：
- 驗證信息： 確保生成的項目結(jié)構(gòu)、技術(shù)棧等信息正確
- 補充細節(jié)： 添加分支命名規(guī)范、部署流程、代碼審查要求等
- 優(yōu)化內(nèi)容： 刪除不相關(guān)的通用指導，聚焦項目實際需求
- 版本管理： 提交 CLAUDE.md 到 Git，方便團隊共享
4.4 編寫原則
- 聚焦核心： 只記錄最關(guān)鍵的項目結(jié)構(gòu)、構(gòu)建命令、常用腳本
- 拆分輔助： 將輔助信息拆分為獨立文件（如 testing.md、deploy.md），在 CLAUDE.md 中引用
- 保持簡潔： 避免冗長，確保信息密度高
4.5 安全注意事項
CLAUDE.md 會成為 Claude Code 的系統(tǒng)上下文，通常提交到倉庫與團隊共享。切勿包含敏感信息：
- API Key
- 數(shù)據(jù)庫連接字符串
- 私有證書
- 詳細安全漏洞信息
安全原則： 將 CLAUDE.md 視為可能公開的文檔來編寫。
5. 高級功能
5.1 自定義命令
把常用提示詞變成快捷命令，一鍵觸發(fā)常用操作。
5.1.1 創(chuàng)建命令
直接復制這個提示詞給 Claude：
幫我創(chuàng)建一個自定義命令。
如果我沒說清楚，請先問我：
1. 命令叫什么名字？（比如：整理筆記、寫總結(jié)、格式轉(zhuǎn)換、潤色文章）
2. 這個命令要做什么？（詳細說明功能）
5.1.2 命令文件位置
創(chuàng)建后保存到：.claude/commands/[命令名].md
5.1.3 命令模板
---
description: [一句話說明這個命令是干什么的]
argument-hint: [命令參數(shù)提示（可選）]
---
[詳細描述這個命令要做什么事情，怎么做]
如果需要接收參數(shù)，可以用 $ARGUMENTS 變量。
5.1.4 性能優(yōu)化命令示例
手動創(chuàng)建命令文件：
創(chuàng)建 .claude/commands/performance-optimization.md，內(nèi)容寫入你的標準性能優(yōu)化指令。
之后在任何對話中輸入：
/performance-optimization myfile.py
performance-optimization.md 內(nèi)容示例：
# 性能優(yōu)化
分析所提供的代碼，以找出性能瓶頸并尋找優(yōu)化機會。進行全面審查，內(nèi)容包括：
## 需要分析的方面
### 數(shù)據(jù)庫與數(shù)據(jù)訪問
- N+1 查詢問題及缺失的主動加載
- 常用查詢列缺乏數(shù)據(jù)庫索引
- 連接或子查詢效率低下
- 大結(jié)果集缺少分頁功能
- 缺乏查詢結(jié)果緩存
- 連接池問題
### 算法效率
- 時間復雜度問題（如 O(n2) 或更差的情況，若存在更優(yōu)的算法則應予以改進）
- 可能存在優(yōu)化空間的嵌套循環(huán)
- 重復計算或重復工作
- 數(shù)據(jù)結(jié)構(gòu)選擇不當
- 缺少記憶化或動態(tài)規(guī)劃的運用機會
### 內(nèi)存管理
- 內(nèi)存泄漏或保留引用
- 在流處理可行的情況下加載整個數(shù)據(jù)集
- 循環(huán)中過度實例化對象
- 不必要的將大型數(shù)據(jù)結(jié)構(gòu)保留在內(nèi)存中
- 缺乏垃圾回收的機會
### 異步與并發(fā)
- 應該采用異步方式處理的阻塞式 I/O 操作
- 可以并行運行的順序性操作
- 缺少 Promise.all() 或并發(fā)執(zhí)行模式
- 同步的文件操作
- 未優(yōu)化的工作者線程使用方式
### 網(wǎng)絡與 I/O
- 過多的 API 調(diào)用（缺少請求批量處理）
- 無響應緩存策略
- 大量數(shù)據(jù)未進行壓縮
- 靜態(tài)資產(chǎn)未使用 CDN
- 缺乏連接復用機制
### 前端性能
- 帶有阻塞效果的 JavaScript 或 CSS
- 缺少代碼拆分或延遲加載
- 未優(yōu)化的圖片或資源
- 過多的 DOM 操作或重繪
- 長列表缺少虛擬化技術(shù)
- 對耗時操作未使用節(jié)流/防抖機制
### 緩存
- 缺少 HTTP 緩存頭信息
- 沒有應用級別的緩存層
- 未為純函數(shù)實現(xiàn)記憶化功能
- 靜態(tài)資源未設置緩存過期機制
## 輸出格式
對于所識別出的每一個問題：
1. **問題**：描述該性能故障的情況
2. **位置**：請注明文件/函數(shù)/行號
3. **影響**：確定嚴重程度（危急/高/中/低）并說明預期的性能下降情況
4. **當前復雜度**：如適用，請注明時間/空間復雜度
5. **建議**：提供具體的優(yōu)化方案
6. **代碼示例**：盡可能展示優(yōu)化后的版本
7. **預期改進**：若可衡量，則量化性能提升情況
如果代碼經(jīng)過了優(yōu)化處理：
- 確認優(yōu)化狀態(tài)
- 列出已正確實施的性能最佳實踐
- 記錄任何可能的微小改進之處
**需要審查的代碼：**```$參數(shù)```
5.2 子智能體(Subagents)
5.2.1 功能介紹
與 Command 的區(qū)別：
- Command（命令）： 需要用戶主動調(diào)用（輸入 /命令名）
- SubAgent（子智能體）： 能自動觸發(fā)！當用戶說相關(guān)的話，AI 自動啟動對應的助手
核心能力：
- 獨立的上下文（不污染主對話）
- 可配置工具權(quán)限（精確控制能力）
- 自定義系統(tǒng)提示（專業(yè)化行為）
5.2.2 創(chuàng)建步驟
輸入 "/agent" 可以看到所有可用的 agent：
創(chuàng)建新 agent 步驟（跟著圖走就行）：
-
輸入 "/agent"，選擇 agents
image.png -
創(chuàng)建新 agent
image.png -
選第一個，根據(jù)文件夾生成
image.png -
選自動生成（推薦）
image.png -
輸入你的要求
image.png -
AI 開始自動生成
image.png -
選擇工具權(quán)限（繼續(xù)就行，默認全勾上）
image.png -
選擇模型（推薦 sonnet）
image.png -
選顏色（對話時的顯示顏色）
image.png -
確認信息，按 enter
image.png -
完成！文件在 .claude/agents/ 文件夾里
image.png
5.2.3 使用方法
方式1：主動調(diào)用
輸入 @agent 選擇需要的助手
方式2：讓 AI 自動識別（更智能！）
裝好后自動工作，用戶說相關(guān)的話就會啟動。
示例：
- 裝了"文章潤色"助手：用戶說"幫我優(yōu)化這篇文章"，助手自動跳出來
- 裝了"知識整理"助手：用戶說"整理一下這些筆記"，助手自動開始工作
- 裝了"代碼審查"助手：用戶說"檢查一下代碼"，助手自動分析
5.3 MCP服務管理
5.3.1 功能介紹
MCP（Model Context Protocol）服務可以連接 Claude 到外部工具（數(shù)據(jù)庫、API、瀏覽器等），擴展能力邊界！
5.3.2 安裝 MCP
Claude Code 添加 MCP 需要執(zhí)行終端命令，可以使用以下提示詞：
幫我管理 MCP 服務（添加或刪除）。
我會提供配置信息，格式如下：
{
"mcpServers": {
"服務名": {
"command": "命令",
"args": ["參數(shù)列表"]
}
}
}
請你根據(jù)我的需求：
**添加服務**
1. 提取配置中的服務名、command、args
2. 轉(zhuǎn)換成命令：claude mcp add-json <服務名> '{"command": "xxx", "args": [...]}'
3. 執(zhí)行安裝
4. 安裝完成后測試是否可用
**刪除服務**
使用命令：claude mcp remove <服務名>
使用方式： 復制提示詞，然后提供你要安裝的 MCP 配置。
5.3.3 管理 MCP
查看狀態(tài)： 輸入 /mcp 就能看到所有已安裝的服務
狀態(tài)詳情：
5.3.4 使用 MCP
在對話中注明 MCP 名稱，AI 會自動調(diào)用。如果語義不明確，調(diào)用概率會降低。
5.4 Skills技能包
5.4.1 Skills 技能包定義
Skills是"文件夾式"的專業(yè)能力包，包含指令說明、腳本和資源文件。Claude在處理任務時會動態(tài)掃描并加載相關(guān)Skills，在特定領(lǐng)域提供更穩(wěn)定、專業(yè)的支持。
加載機制：
Skills采用漸進式加載機制：
- 元信息加載：約100 tokens，用于判斷Skill相關(guān)性
- 完整說明加載：需要時加載，不超過5k tokens
- 資源文件加載：實際使用時才加載相關(guān)腳本和文件
5.4.2 如何命名 Skill
每個Skill必須包含三個核心組件：名稱、描述、指令。名稱和描述決定了Skill的觸發(fā)邏輯。
命名規(guī)則：
- 使用小寫字母和連字符（如：pdf-editor、brand-guidelines）
- 名稱要簡潔直觀，避免冗長描述
描述要點：
- 能力：具體描述Skill能做什么
- 觸發(fā)條件：明確調(diào)用場景
- 上下文：說明使用情境
- 邊界：指出不適用的場景
5.4.3 如何在 Claude Code 中加載你的 Skill
操作步驟：
-
創(chuàng)建Skill文件夾：在項目根目錄創(chuàng)建
skills/文件夾 -
添加SKILL.md文件：在
skills/下創(chuàng)建子文件夾（如my-skill/），添加SKILL.md文件 - 自動加載：Claude Code會自動識別并加載Skill
目錄結(jié)構(gòu)示例：
my-project/
├── skills/
│ └── my-skill/
│ └── SKILL.md
5.4.4 創(chuàng)建實用 Skill 的技巧
-
從真實痛點出發(fā)
- 只為核心重復性任務創(chuàng)建Skill
- 確認任務已重復5次以上，且未來還會重復10次以上
-
明確質(zhì)量標準
- 在Skill指令中定義清晰的輸出標準
- 包括結(jié)構(gòu)、格式、驗證規(guī)則和質(zhì)量閾值
-
善用 Skill-Creator 工具
- 幫助構(gòu)建結(jié)構(gòu)化Skill
- 引導需求清晰化，優(yōu)化描述字段
- 規(guī)范格式，便于維護
5.4.5 Skill 觸發(fā)機制
Claude通過語義理解判斷請求與Skill的相關(guān)性，而非簡單關(guān)鍵詞匹配。
注意事項：
- 避免模糊描述：清晰請求才能準確觸發(fā)對應Skill
- 避免多重觸發(fā)：復雜任務可能同時激活多個相關(guān)Skill
- 避免遺漏觸發(fā)：Skill描述需覆蓋所有關(guān)鍵用例
5.4.6 適用場景
當需要Claude穩(wěn)定、重復、高效完成專業(yè)任務時，優(yōu)先使用Skills。
典型場景：
- 組織級工作流：品牌規(guī)范、合規(guī)流程、文檔模板
- 領(lǐng)域型能力：Excel建模、PDF處理、數(shù)據(jù)分析
- 個人偏好：筆記規(guī)則、代碼風格、調(diào)研方法
5.4.7 目前流行的第三方Skills包（一般通過npm安裝）
除了自定義Skills外，社區(qū)還提供了許多優(yōu)秀的第三方Skills包，可以通過npm安裝使用。這些包通常針對特定領(lǐng)域或任務進行了深度優(yōu)化。
安裝方式：
# 全局安裝第三方Skills包
npm install -g <skill-package-name>
# 或在項目中安裝
npm install <skill-package-name> --save-dev
流行的第三方Skills包：
-
UI/UX設計類
- @fission-ai/ui-ux-pro-max：專業(yè)UI/UX設計技能包，包含數(shù)千個行業(yè)標準設計模式和組件
- @claude-skills/design-system：設計系統(tǒng)生成和管理工具
- @ai-design-tools/material-builder：Material Design組件生成器
-
代碼質(zhì)量類
- @claude-skills/code-review：自動化代碼審查，支持多種編程語言
- @ai-dev-tools/security-audit：代碼安全審計和漏洞檢測
- @claude-skills/performance-optimizer：性能分析和優(yōu)化建議
-
文檔處理類
- @claude-skills/pdf-expert：PDF文檔處理、提取、轉(zhuǎn)換和編輯
- @ai-docs/markdown-pro：Markdown文檔增強和格式化
- @claude-skills/api-documenter：自動生成API文檔
-
數(shù)據(jù)科學類
- @claude-skills/data-analysis：數(shù)據(jù)分析和可視化
- @ai-ml/pandas-helper：Pandas數(shù)據(jù)處理助手
- @claude-skills/sql-expert：SQL查詢優(yōu)化和數(shù)據(jù)庫設計
-
項目管理類
- @fission-ai/openspec：規(guī)范驅(qū)動開發(fā)工具（已在1.3.5.2節(jié)介紹）
- @claude-skills/project-manager：項目管理、任務分解和進度跟蹤
- @ai-dev-tools/git-workflow：Git工作流優(yōu)化和自動化
-
前端開發(fā)類
- @claude-skills/vue-expert：Vue.js開發(fā)最佳實踐和組件生成
- @claude-skills/react-helper：React組件開發(fā)和狀態(tài)管理
- @ai-frontend/css-optimizer：CSS優(yōu)化和樣式規(guī)范檢查
-
后端開發(fā)類
- @claude-skills/nodejs-expert：Node.js后端開發(fā)和API設計
- @ai-backend/database-designer：數(shù)據(jù)庫設計和ORM配置
- @claude-skills/api-builder：RESTful API和GraphQL API生成
集成到Claude Code：
大多數(shù)第三方Skills包會自動集成到Claude Code中，安裝后即可使用。部分包可能需要手動配置：
# 安裝后可能需要初始化
<skill-package-name> init --ai claude
# 或手動添加到.claude/skills/目錄
cp -r node_modules/<skill-package-name>/skills/* .claude/skills/
使用示例：
# 在Claude Code會話中直接使用
# 安裝UI UX Pro Max后
生成一個用戶登錄頁面的設計，包含郵箱/密碼輸入和第三方登錄選項
# 安裝Code Review后
審查src/components/UserForm.vue的代碼質(zhì)量
# 安裝Data Analysis后
分析這個CSV文件的數(shù)據(jù)分布和統(tǒng)計特征
選擇建議：
- 評估需求：根據(jù)實際開發(fā)需求選擇合適的Skills包
- 查看文檔：安裝前查看包的文檔和示例
- 測試兼容性：確保與當前Claude Code版本兼容
- 關(guān)注更新：定期更新以獲得最新功能和修復
注意事項：
- 第三方Skills包可能依賴特定版本的Claude Code
- 部分包可能需要額外的配置或環(huán)境變量
- 注意包的許可證和商業(yè)使用限制
- 建議在開發(fā)環(huán)境中先測試，再應用到生產(chǎn)項目
6. 總結(jié)
本指南詳細介紹了 Claude Code 的安裝、配置、使用技巧和高級功能。通過合理利用 Claude Code 的各項功能，可以顯著提高開發(fā)效率和代碼質(zhì)量。
核心要點：
-
正確初始化： 使用
/init命令生成 CLAUDE.md，確保項目上下文對齊 - 合理選擇模式： 根據(jù)任務復雜度選擇合適的執(zhí)行模式
- 善用高級功能： MCP、Skills、Subagents 等可以擴展 Claude Code 的能力邊界
- 安全第一： 注意敏感信息保護，避免在配置文件中泄露關(guān)鍵信息
通過持續(xù)學習和實踐，你可以更好地利用 Claude Code 這個強大的 AI 編程助手，提升開發(fā)效率和代碼質(zhì)量。
