Claude Code 進階玩法 — GitHub Web 開發、Hook 知識庫、Remote Control 與常用 MCP

前言

AI Pair Programming 已經不是新鮮事了，但很多人用 Claude Code 還是停留在「問問題、生成程式碼」的階段，其實 Claude Code 的生態系已經非常豐富從跨對話記憶、排程自動化、MCP 擴充、到資安掃描，這些小技巧組合起來，能讓開發效率再上一個層級。

這篇整理了我日常使用 Claude Code 的幾個實用技巧，從基礎設定到進階自動化，新手可以按順序讀，有經驗的可以直接跳到想看的章節。

Claude Code 預設資料夾結構

剛開始用 Claude Code，常常搞不清楚哪些設定放哪裡，首先我們先理解 Claude Code 的相關資料夾結構

my-project/
├── CLAUDE.md               # 最高層級的 AI 提示詞與專案規範（專案記憶體，啟動時自動載入）
├── README.md               # 給人類看的專案說明
├── .claude/                # Claude Code Agent 的進階設定資料夾
│   ├── commands/           # 自訂的 Slash 指令（例如 /review.md、/test.md）
│   ├── rules/              # 常駐的特定細部規則（輔助 CLAUDE.md）
│   ├── skills/             # 按需呼叫的擴充技能或專業工作流（Skill 模組）
│   └── hooks/              # 生命週期事件攔截器（例如 PreToolUse、SessionEnd）
├── src/                    # 原始碼目錄
└── package.json            # 系統設定檔

幾個重點：

CLAUDE.md 是 AI 的「專案說明書」，每次對話開始都會自動載入，放越精準的規範效果越好
commands/ 存放自訂 Slash 指令，例如 /write-blog、/create-spec，可以把複雜的工作流封裝成一個指令
rules/ 適合放常駐規則，例如「每次改程式前先建 Spec」這類跨任務的行為約束
hooks/ 是 Shell 層的攔截器，比 rules 更強制，可以在 AI 真正執行操作前/後插入自訂邏輯

基礎設定 — settings.json

Claude Code 的專案設定檔是 .claude/settings.json，可以控制權限、效能等行為。以下是我常用的設定：

{
  "permissions": {
    "allow": [
      "Bash(*)",
      "Edit(*)",
      "Write(*)",
      "NotebookEdit(*)",
      "mcp__*"
    ]
  },
  "effortLevel": "high"
}

幾個重點：

permissions.allow：預設 Claude Code 每次執行 Bash、Edit、Write 等操作都會跳出確認提示，設定 allow 後可以跳過這些確認，大幅提升開發流暢度
- Bash(*)：允許執行所有 Shell 指令
- Edit(*)、Write(*)：允許直接編輯和建立檔案
- NotebookEdit(*)：允許編輯 Jupyter Notebook
- mcp__*：允許所有 MCP 工具呼叫
effortLevel：設為 "high" 讓 Claude 在回答和推理時投入更多運算資源，產出品質更好，適合複雜的開發任務

⚠️ 開放所有權限適合個人開發環境，團隊共用時建議依需求縮小範圍，例如只允許特定指令 Bash(npm run *)。

Claude Hook — 自動化攔截與知識提煉

我有個習慣叫 Write docs before code：希望 Claude 動手寫程式之前，先把計劃、規格這些文件整理出來。

一開始用 Rules 來約束，寫了不少「請在改程式前先建立 Spec」之類的規定。但實際跑起來，模型很常跳脫這些規則，照樣直接開始改程式，文件一行都沒有。

後來改成用 Hook + 自訂 Bash 腳本，把流程直接綁在 Edit/Write 操作的執行前（PreToolUse 事件）。這樣 AI 就沒辦法偷懶，文件沒寫好就無法繼續；完成後也會自動歸檔，整個流程就順了。

Claude Hook 可以在 Claude 執行特定操作（如 Edit、Write）前後攔截並執行自訂邏輯，設定在 .claude/settings.json 的 hooks 區塊，支援 PreToolUse 和 PostToolUse 事件。

常見應用場景：

Spec-before-Code：在寫程式前強制先建立規格文件
Lint 檢查：自動在寫入前跑格式化
安全性檢查：攔截可能包含敏感資訊的操作

用 Hook 提煉知識庫（Spec-before-Code 流程）

實務上遇到不少技術債導致 AI 協作效率不高，需要把工作拆得很細才能做到六七成功能。因此設計了一套機制，讓 AI 在修正問題的同時自動建立 Knowledge Base，加速後續開發：

Before Code：AI 寫程式前，強制撰寫計劃（Plan / Spec）
During Code：遇到 Bug 自動記錄，開發過程追加日誌
After Code：完成後歸檔、提煉知識

Claude Hook 知識提煉流程 — 從攔截到自動建立 Plan、Spec，最終匯入知識庫

這套流程的核心目標是讓 AI 越用越聰明每次開發都留下結構化的知識，下次遇到類似問題就能直接參考，而不是從零開始。

相關 Prompt 資源：markku636/GeneralPrompt

常用 MCP 推薦

MCP（Model Context Protocol）是 Claude Code 的擴充協議，讓 AI 能連接外部工具和服務。以下依「馬上能用」到「需要額外設定」的順序排列，新手從「基礎必裝」開始即可。

基礎必裝

這幾個 MCP 幾乎所有專案都用得到，安裝後立即有感，建議第一步先裝起來。

Context7 — 即時函式庫文件

解決 AI 產生過時 API 建議的問題，Context7 會即時取得最新的函式庫文件，對使用 React、Next.js 等快速迭代框架特別有用。

Tavily MCP — 即時網路搜尋

提供 AI 模型即時存取網路資訊和高品質知識來源的能力，支援進階過濾和特定領域搜尋。

Sequential Thinking — AI 思維增強

讓 Claude 以結構化方式分析複雜問題，適合架構設計、大型重構等需要深度推理的場景。

{
  "mcpServers": {
    "sequential-thinking": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-sequential-thinking"]
    }
  }
}

Memory MCP — 超長記憶

Claude Code 預設每次對話都是獨立的，但透過 Memory MCP，可以讓它記住跨對話的上下文。

設定方式

在 .claude/settings.json 或專案的 MCP 設定中加入：

{
  "mcpServers": {
    "memory": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-memory"],
      "env": {
        "MEMORY_FILE_PATH": ".claude/memory/memory.jsonl"
      }
    }
  }
}

實用場景

專案偏好記憶：記住「這個專案用 Tailwind 不用 CSS Modules」之類的偏好
人員資訊：記住團隊成員負責的模組
決策記錄：記住「為什麼選 A 方案而不是 B」

記憶檔案存在 .claude/memory/memory.jsonl，可以版本控管，團隊共享。

開發工具整合

針對特定開發場景的 MCP，依需求選裝。

Chrome DevTools MCP — 瀏覽器即時除錯

讓 Claude 直接存取 Chrome DevTools Protocol，可以即時讀取 Console log、Network 請求、DOM 結構等瀏覽器資訊，不用再手動截圖貼錯誤訊息，除錯效率大幅提升。

Playwright MCP — 瀏覽器自動化

控制瀏覽器進行自動化測試、UI 驗證、前端除錯，被評為開發者生產力提升最大的 MCP 之一。

Figma MCP — 精準切版利器

過去讓 AI 切版，通常是截圖給它看，但截圖會丟失細節，粉紅色按鈕可能被辨識成橘色按鈕，間距和字級也只能靠猜。有了 Figma MCP，Claude 可以直接讀取 Figma 設計稿的結構化資料（顏色值、spacing、字型、元件層級），轉化成 design-system.md 或直接產出對應的元件程式碼，切版精準度完全不同等級。

Docker MCP — 容器管理和編排

讓 AI 能建構、執行和管理容器化應用，適合需要在開發過程中操作 Docker 環境的場景。

資料庫與後端整合

需要額外設定連線資訊，建議確認資料庫帳號權限後再啟用。

MSSQL MCP — 資料庫查詢

直接讓 Claude 查詢 SQL Server 資料庫，適合需要查資料來輔助開發的場景：

{
  "mcpServers": {
    "mssql": {
      "command": "npx",
      "args": ["-y", "@connorbritain/mssql-mcp-server@latest"],
      "env": {
        "SERVER_NAME": "your-server.database.windows.net",
        "DATABASE_NAME": "YourDatabase",
        "SQL_AUTH_MODE": "aad",
        "SQL_PORT": "1433",
        "READONLY": "true",
        "AZURE_TENANT_ID": "your-tenant-id",
        "AZURE_CLIENT_ID": "your-client-id",
        "AZURE_CLIENT_SECRET": "your-client-secret"
      }
    }
  }
}

💡 建議設定 READONLY: true，避免 AI 意外執行寫入操作。

Supabase MCP — 資料庫與後端管理

遠端 MCP server，AI 能直接查詢 Postgres 資料庫、執行 SQL、檢查日誌、部署 Edge Functions、管理分支 Index.dev，而且支援 OAuth 認證，不用手動設 token。

企業級整合

大型團隊或企業環境適用。

Azure DevOps MCP

@azure-devops/mcp 涵蓋 Azure DevOps 幾乎所有主要功能，包含 Work Items 管理、Pipeline 操作、Repo 搜尋、Wiki 編輯、Test Plans、Advanced Security 等，適合重度使用 Azure DevOps 的團隊直接在 Claude Code 中操作。

Claude Schedule — 排程自動化

Claude Schedule 可以設定定時任務，讓 Claude 自動執行重複性工作。

應用範例：每日 AI 新聞整理

設定一個每天早上 8 點執行的排程，讓 Claude 自動：

搜尋當日 AI 領域重要新聞
整理成摘要格式
存到指定資料夾

上圖是實際的排程設定畫面：指定執行時間、存放資料夾，並在 Instructions 中描述 AI 要做的事（搜尋最新 AI 開發工具、研究論文、產業新聞等），Claude 就會按時自動執行。

以下是排程產出的結果一份整理好的每日 AI 新聞摘要，包含開發工具更新、AI 研究進展、產業動態，每則都附上來源連結：

其他排程應用：

每日 Code Review 提醒：檢查 PR 狀態
週報自動生成：整理本週 commit 和進度
依賴更新檢查：定期掃描 outdated packages

Claude 資安掃描

AI Pair Programming 讓開發速度變快，但同時也可能把風險一起放大AI 生成的程式碼數量大，人工 Review 可能看不完。

做法

在測試或上線之前，讓 AI 幫忙掃一輪：

直接請 Claude 掃描：把程式碼貼給 Claude，請它檢查常見漏洞（SQL Injection、XSS、CSRF 等）
整合到 Pipeline：最佳實踐是在 CI/CD Pipeline 中整合資安掃描工具，每次部署前自動檢查

上圖是整合 Semgrep（靜態分析）與 Trivy（依賴漏洞）的掃描儀表板，可以一目瞭然地看到嚴重度分佈（critical / high / medium / low），以及每個檔案的風險摘要。搭配 CI/CD Pipeline 自動觸發，每次部署前都能確保程式碼經過安全檢查。

建議流程

開發完成 → AI Code Review → 資安掃描 → 測試 → 部署
                ↑                ↑
           Claude Code     Pipeline 整合
           手動觸發        （如 Semgrep、Trivy、Snyk）