Claude Code Vibe Coding 開發手冊

＜內容簡介＞

  Claude Code 是帶起 Vibe Coding 工具風潮的領先者，只要開啟終端機，就可以透過文字交談與 Claude Code 協作，不需要綁死特定的 IDE。本書就以終端機為主要實作場景，說明 Claude Code 的使用方法，主要特色如下：

||原生安裝 Claude Code||

Claude Code 可以透過 Node.js 安裝，不過會跟特定的 Node.js 環境綁定，如果需要切換不同版本的 Node.js，或是移除了 Node.js 環境，就無法執行。本書主要採用原生安裝的方式，不需要 Node.js 就可以使用 Claude Code，而且可跨 Windows/Linux/macOS 平台。Windows 平台也涵蓋 WSL 環境下的安裝方式，以便同時開發 Windows/Linux 應用程式。

||小專案實戰演練基本用法||

以簡單的台灣 3+3 郵遞區號查詢專案一步步介紹 Claude Code 的基本用法與關鍵概念，像是記錄對談的 Session、產品需求文件（PRD, Product Requirement Document）、規範 Claude Code 行為準則的 CLAUDE.md 記憶檔、可復原檔案修改內容的檢查點（Checkpoint）、先規劃不動作的 Plan Mode 等等，並且也會說明整合 Visual Studio Code 與 Claude Code 連動的方法。

||斜線指令全解析||

除了文字交談外，Claude Code 也提供許多指令，像是可以接續之前 Session 的 /resume、查看當前用量的 /context、選用模型的 /memory、壓縮對話摘要內容的 /compact 等等，書中都會詳細說明使用方法。另外，Claude Code 也提供許多快捷鍵，都會在適用的情境下介紹，特別的是雖然 Claude Code 是跨平台的工具，但是不同平台的快捷鍵卻有差異，書中也都會特別說明。

||用 MCP 加上超能力||

Claude Code 雖然很強，但還是有它做不到的事情，不過別擔心，只要透過 MCP 協議，就可以使用各種外部的工具。本書會透過 MCP 連接 Playwright 與 Claude Code 協作，就像指揮一位測試工程師那樣幫自行開發的台灣房價地圖網站自動化測試與除錯。另外，書中也會介紹其他好用的 MCP 伺服器，補足 Claude Code 的不足。

||多 Agent 角色扮演合作||

Claude Code 提供了 Subagent，可以變出多個 Claude Code 的分身，每個分身有各自獨立的單次對話用量限制，對於需要較長前後文的任務，就可以分段交給多個 Subagent 分攤處理，避免因為超過限制無法運作。另外，書中也會介紹讓 Subagent 扮演專案中的不同角色，各自擔負單一專精任務，分工合作完成複雜的任務。

||Hook 通知與專案防護||

Claude Code 可以在工作流程中透過 Hook 發送通知，書中會展示如何串接 Hook，透過系統的桌面通知或是台灣人人都在用的 LINE 傳送通知，即使要求 Claude Code 進行任務後跑到茶水間喝杯咖啡，也可以在任務完成後從手機收到通知。另外，書中也會展示在我們既想要信任 Claude Code 自動修改、又想要在動到關鍵檔案時把關時，透過 Hook 建立最後一道防線。

||Git 與 GitHub 協作||

Claude Code 就是一起協作的工程師，書中也會說明如何利用自訂指令讓 Claude Code 融入 Git/GitHub 工作流程，協助我們自動完成原本需要繁瑣操作的工作。本書更獨家設計具備互動功能的自訂指令，讓 Claude Code 逐項徵詢意見後再自動完成個別工作。此外，書中更進一步說明設計可以自主規劃任務後以互動方式進行並記錄任務進度的自訂指令。

||實戰專案演練||

Vibe Coding 雖然聽起來很簡單，好像只要出一張嘴就可以做出專案，實際上你可能只是在 Claude Code 喇賽繞圈圈，一直鬼打牆做不出想要的功能。本書會帶大家透過實作把 YouTube 影片變投影片與 PDF 翻譯神器兩個小型專案，實戰體驗怎麼聊、聊什麼，才能做出你心中想要的成果。

★本書特色：

  |> AI 就是你的工程師同事

- Windows/macOS/Linux 原生安裝 Claude Code

- 斜線指令全解析、掌控即時用量、客製狀態列

- 連接 MCP 讓 Claude Code 自動化測試與除錯

- 多 Agent 角色扮演、專業分工提升效率與品質

- Hook 串桌面/LINE 通知不用痴痴等任務完成

- 用自訂命令自動化 Git 工作流程精準又便利

- 讓 Claude Code 上 GitHub 解 Issue 發 PR

- YouTube 影片變投影片/PDF 翻譯神器實戰演練

- Visual Studio Code 與 Claude Code 連動

★目錄：

第 1 章 Claude Code 簡介與安裝

1-1 Claude Code 簡介

系統需求

1-2 在 Windows 安裝 Claude Code

在 Windows 環境中使用 Scoop 建立指令行工具鏈

安裝 Git 工具

安裝原生版本的 Claude Code

登入 Claude 帳戶

1-3 在 WSL（Linux/macOS）中

安裝 Claude Code

安裝 WSL

安裝原生版本的 Claude Code

1-4 安裝後續章節所需的工具

Windows

WSL/Linux/macOS

透過 Node.js 環境安裝 Claude Code

第 2 章 Claude Code 基礎用法--以建立郵遞區號小幫手為例

2-1 用聊天的方式生成程式碼--專案與 Session 的概念

以資料夾為專案的核心概念

交談階段（Session）-- 用聊天方式設計郵遞區號小幫手

2-2 建立專案文件：CLAUDE.md 與 PRD

用 CLAUDE.md 加入開發規範

整合對話內容建立產品需求文件

2-3 良好的 PRD 寫法與自動接受模式

使用檢查點（Checkpoint）復原程式碼

修改 PRD 以條列方式明確表達各項要求

啟用 Auto-Accept Mode（自動接受模式）

使用 # 指令在 CLAUDE.md 中增加規範

使用 /init 自動生成專案架構摘要

2-4 用 Plan Mode 完成複雜任務

建立網頁版的 PRD

啟用 Plan Mode 進行網站開發規劃

以圖片餵入網站設計需求

2-5 結合 Visual Studio Code

在 VSCode 安裝 Claude Code 延伸模組

圖形介面的 Claude Code

VSCode 與 Claude Code 連動的好處

讓外部終端機中的 Claude Code 與 VSCode 連動

第 3 章 Claude 常用指令

3-1 全域設定與狀態查詢

/status

/release-notes

/doctor

/config

3-2 專案初始化與環境配置

/init

/add-dir

/memory

3-3 狀態監控與問題回報

/todos

/bashes

/usage

/help

/feedback

3-4 開發環境與工具整合

/ide

/vim

/output-style

/output-style:new

/model

/permissions

3-5 對話管理與資料處理

/context

/compact

/clear

/resume

/export

3-6 帳戶管理與系統操作

/upgrade

/login

/logout

/exit

3-7 客製輸入區的顯示狀態

使用 /statusline 顯示目前時間

實際的設定內容

Windows 下的注意事項

第 4 章 用 Subagent 分工合作

4-1 Subagent 簡介

建立 Subagent

測試 Subagent

4-2 多 Subagent 並行運作的威力

用並行的 Subagent 縮短任務時間

Subagent 對 context 大小的影響

4-3 用獨立上下文突破模型限制

用多個 Subagent 分擔輸出

4-4 讓多個 Subagent 組成專業團隊

用專精不同工作的 Subagent 協作

結論

第 5 章 用 MCP 幫 Claude Code 生出超能力

5-1 什麼是 MCP？

MCP 的架構

5-2 PlayWright MCP 伺服器

下載「臺灣房價地圖」專案

Claude Code 的 MCP 安裝和管理

測試 PlayWright MCP

5-3 用 PlayWright MCP 測試網頁應用程式

透過 PlayWright MCP 進行自動化測試

5-4 把 Claude Code 當命令列版本的

AI 聊天機器人

Desktop Commander MCP

檔案搜尋

批次讀取檔案

檔案整理分類

分析 CSV 檔

系統與效能監控

5-5 MCP 的 Tokens 耗用成本

MCP 資訊所消耗的 Tokens

執行階段所消耗的 Tokens

第 6 章 最後的防線：Hook

6-1 什麼是 Hook?

Hook 的執行流程

為什麼需要 Hook?

Hook 的種類

6-2 建立第一個 Hook - PostToolUse hook

追蹤指定檔案

Hook 完整的運行流程

在專案中建立 Hook

Hook 執行的指令 – 發送通知到電腦桌面

測試Hook有沒有順利運作

6-3 建立 Notification Hook–

在 LINE 上收到提醒通知

新增第二個 Hook

Hook 執行的指令 – 發送提醒通知到 LINE

測試 Hook 有沒有順利運作

6-4 從追蹤檔案轉為保護檔案的 Hook

建立『修改預告』的 Hook

保護檔案不被 Claude Code 修改

第 7 章 實戰範例：PDF 檔翻譯器

7-1 用簡單提示詞生成程式

7-2 增加提示詞與延伸思考模式

7-3 使用 Subagent

結論

第 8 章 實戰範例：YouTube 影片轉投影片

8-1 與 Claude Code 討論專案

初始化專案

先規劃，後實作

設計專案架構

8-2 執行實作

初步檢查與測試

8-3 應用程式除錯

讓 Claude Code 自行找出問題點

提供修正方向

8-4 完善專案各項功能

加入歷史紀錄功能

AI 翻譯 & AI 大綱功能

加入 AI 語音辨識字幕功能

第 9 章 自訂命令與 git 操作

9-1 前置作業

透過 SSH 設定本機與 GitHub 的連線

9-2 用自訂指令自動化 git 提交流程

專案初始設定

建立自訂指令

9-3 設計具備互動功能的自訂指令

互動式自訂指令的流程

提供互動功能的方法

動手實作

測試 /pack-zh 自訂指令

執行固定提交流程的自訂指令：/pack-direct

9-4 狀態讀取與階段性執行腳本設計

流程設計概述

/auto-fix 自定義指令實作

9-5 使用自然語言觸發自定義指令

第 10 章 在 GitHub 召喚 Claude Code 來協作

10-1 在 Github 上安裝 Claude Code

安裝 Github CLI 與帳號認證

安裝 Claude Code 到 GitHub 上

合併 Claude GitHub App 到儲存庫專案中

10-2 Claude Code 在 GitHub 上的協作方式

使用 Claude Code 處理 Issue

Claude Code 在 PR 下的操作行為

10-3 Github 上使用 Claude Code 自定指令

自定指令在 GitHub 上執行的限制與成因

重構指令邏輯，讓指令能在 GitHub 上正確運作

實際展示重構後的指令