---
title: "Claude Code 進階玩法 — GitHub Web 開發、Hook 知識庫、Remote Control 與常用 MCP"
description: "整理 Claude Code 的實用技巧：Memory MCP 跨對話記憶、Schedule 排程、Headless Remote Control、GitHub Actions 整合、常用 MCP 推薦、資安掃描，讓 AI Pair Programming 更高效"
canonical_url: "https://blog.markkulab.net/post/claude-code-tips-and-tricks"
author: "Mark Ku"
author_url: "https://blog.markkulab.net/author/mark-ku"
site: "Mark Ku's Blog"
date_published: "2026-03-18 10:00:00 +0800"
category: "AI"
tags: ["claude-code", "mcp", "developer-experience", "ai-tools"]
language: "zh-TW"
license: "CC BY 4.0"
license_url: "https://creativecommons.org/licenses/by/4.0/"
attribution: "轉載或引用請註明作者並附上原文連結"
---

# 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`，可以控制權限、效能等行為。以下是我常用的設定：

```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，最終匯入知識庫](https://blog.markkulab.net/content/markku/posts/claude-code-tips-and-tricks/images/hook-knowledge-flow.jpg)

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

相關 Prompt 資源：[markku636/GeneralPrompt](https://github.com/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 以結構化方式分析複雜問題，適合架構設計、大型重構等需要深度推理的場景。

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

#### Memory MCP — 超長記憶

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

**設定方式**

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

```json
{
  "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 資料庫，適合需要查資料來輔助開發的場景：

```json
{
  "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 自動：

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

![Claude Schedule 排程設定介面 — 設定每日自動蒐集 AI 新聞](https://blog.markkulab.net/content/markku/posts/claude-code-tips-and-tricks/images/schedule-setup.png)

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

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

![AI 每日新聞整理輸出 — 自動蒐集並分類的 Markdown 報告](https://blog.markkulab.net/content/markku/posts/claude-code-tips-and-tricks/images/ai-news-output.png)

其他排程應用：
- **每日 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 的掃描結果](https://blog.markkulab.net/content/markku/posts/claude-code-tips-and-tricks/images/security-scan.png)

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

### 建議流程

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

![Claude Security Scanning in AI Pair Programming Workflow](https://blog.markkulab.net/content/markku/posts/claude-code-tips-and-tricks/images/claude-security-scanning-workflow.jpg)

重點不是取代專業資安工具，而是在開發階段多一道防線，早期發現問題。

## Claude Code + GitHub 遠端開發

Claude Code 可以直接整合 GitHub，不需要本地開發環境，就能透過 Claude Web 介面遠端操作你的 GitHub Repo。


## Claude Code Remote Control

讓你透過手機遠端操作家後電腦的Claude Session，隨時隨地進行開發。

## 結論

Claude Code 不只是一個 AI 程式碼生成工具，善用這些周邊生態可以打造完整的開發工作流：

- **資料夾結構** 搞清楚 CLAUDE.md、commands/、rules/、hooks/ 的定位，設定更有條理
- **MCP 擴充** 從基礎必裝（Context7、Memory）到進階整合（資料庫、DevOps），按需選裝
- **Schedule** 自動化重複性工作，解放人力
- **Hook** 強制建立 Spec 文件，讓 AI 越用越聰明
- **資安掃描** 在開發階段就多一道防線
- **GitHub 遠端開發** 不需要本地環境，直接透過 Web 操作 Repo
- **Remote Control** 用 `-p` flag 和 GitHub Actions 把 Claude 整合進自動化流程

這些小技巧單獨看都很簡單，但組合起來就是一個高效的 AI 輔助開發環境。

---

## 關於本文與作者

本文出自 [Mark Ku's Blog](https://blog.markkulab.net/post/claude-code-tips-and-tricks)

授權條款： [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/) — 轉載或引用請註明作者並附上原文連結

### 關於作者

**[Mark Ku](https://blog.markkulab.net/author/mark-ku)** — Software Solution Provider

- 10+ 年資深軟體工程師，現為 AI 應用 Builder
- 專注大型平台架構設計，從北美電商到AI SaaS訂閱收費系統
- 結合 AI Agent 與自動化，打造高效可演進的產品技術基礎

### 作者開發的免費工具

以下工具皆可免費使用：

- [免費 PDF 簽名工具](https://blog.markkulab.net/tools/pdf-sign): 線上 PDF 簽名工具，瀏覽器內完成手繪、打字、上傳簽名，可拖曳放置、縮放、下載。所有處理都在你的裝置完成，檔案不會上傳。
- [VS Code Refactory](https://blog.markkulab.net/tools/refactory): Refactory 是一款 VS Code 重構擴充套件：34 個重構動作、37 條 code smell 檢查、Code Health 儀表板、18 種語言、534 支測試。懂你的專案慣例：介面放哪、DI 註冊寫在哪、'use client' 該不該加；還會用 git 修改頻率 × 複雜度排出「該先修哪個檔案」，並一鍵把壞味道交給你自己電腦上的 Claude Code 修。免費使用，原始碼不離開你的機器。
- [DB-Kit 資料庫管理工具](https://blog.markkulab.net/tools/db-kit): DB-Kit 是一個用 Tauri + Rust + React 打造的輕量跨平台資料庫管理工具，用單一一致的介面同時管理 MySQL、MariaDB、PostgreSQL、SQL Server、Oracle、SQLite、MongoDB、Redis、Kafka、Elasticsearch 與 RabbitMQ 十一種資料來源：連線密碼以 OS keychain 加密、SSH Tunnel、完整 CRUD、視覺化查詢建構器、多結果集同時顯示、跨連線資料傳輸與比對同步、Excel / CSV 匯入匯出、執行計畫視覺化、ER 圖、排程備份、SQL 壓力測試（p50～p99 延遲百分位）、15 條規則的 SQL 審查、Kafka 訊息瀏覽與監控告警；繁中 / 英文雙語介面，內建 AI 助手（自然語言生成 SQL、AI 審查與調校建議）與命令列工具 dbk。免費開源（MIT），提供 Windows / macOS / Linux 安裝檔。
- [VS Code Super Mermaid](https://blog.markkulab.net/tools/super-mermaid): Super Mermaid 是一款 VS Code 擴充套件：開箱即用的漂亮 Mermaid 圖表，自動上色、即時預覽、滑鼠平移縮放、PNG / SVG 高解析匯出，內建 21 種範本與多種主題。免費開源（MIT）。
- [React Super Mermaid](https://blog.markkulab.net/tools/react-super-mermaid): react-super-mermaid 是一個開源 React 元件庫：一行 <MermaidViewer> 即可渲染漂亮的 Mermaid 圖表，內建 colorful / sketch 主題、平移縮放、圖內搜尋、SVG / PNG 高解析匯出。輕量、SSR 安全、完整 TypeScript 型別。免費開源（MIT）。
- [Jira / Confluence Super Mermaid](https://blog.markkulab.net/tools/jira-super-mermaid): Atlassian Forge app：在 Jira issue 與 Confluence 內文直接寫 Mermaid 語法，畫流程圖、時序圖、狀態機與甘特圖。11 種圖表、SVG / PNG 匯出、明暗主題、完整中日韓文字支援。取得 Runs on Atlassian 資格：圖表存在你自己的站台，app 不呼叫任何第三方服務。免費，即將上架 Atlassian Marketplace。
- [Mermaid 線上預覽](https://blog.markkulab.net/tools/mermaid-preview): 在瀏覽器裡寫 Mermaid、即時看圖，整張圖表壓進網址就能分享。免註冊、不上傳伺服器，相容 mermaid.live 的分享連結。
- [React Intl Phone Number](https://blog.markkulab.net/tools/react-intl-phone-number): react-intl-phone-number 是一個開源 React 元件：framework-agnostic、不依賴 antd，提供 E.164 進出、可搜尋國旗 / 國碼下拉、可配置驗證等級（strict / mobile-strict / loose）、可主題化 CSS 與 i18n，電話邏輯由 google-libphonenumber 驅動。輕量、完整 TypeScript 型別。免費開源（MIT）。
- [Uptime Kuma Cluster](https://blog.markkulab.net/tools/uptime-kuma-cluster): 把單機版 Uptime Kuma 改造成高可用叢集：OpenResty + Lua 智慧負載平衡、MariaDB 共享狀態、健康檢查與自動 Failover，附叢集管理 REST API，一行 Docker Compose 啟動。免費開源（MIT）。
- [特教專案](https://blog.markkulab.net/education): 為特殊教育學生製作的學習教材

### 每日 Podcast

- [Mark's Tech Insights 每日 AI 新鮮事](https://blog.markkulab.net/category/tech-news): 每日精選 AI 與科技趨勢，透過語音摘要快速掌握最新技術動態，涵蓋 AI 應用、軟體架構、DevOps 與工程實戰。 — RSS: https://blog.markkulab.net/feed.xml
- [AI股市蝦聊](https://blog.markkulab.net/category/ai-stock-chat): 每個交易日用 AI 分析台股盤勢，以雙人對話聊當天的盤中觀察與隔日預測。 — RSS: https://blog.markkulab.net/ai-stock-chat/feed.xml
- [開源好物週報](https://blog.markkulab.net/category/open-source-weekly): 每週從 Hacker News、GitHub、Reddit 聲量雷達精選免費開源工具，以雙人對話聊解決什麼痛點與怎麼快速上手。 — RSS: https://blog.markkulab.net/open-source-weekly/feed.xml

### 電子報

[訂閱電子報](https://blog.markkulab.net/subscribe) — 第一時間收到新文章通知，無垃圾信、隨時可取消訂閱。