Claude Code 初上手：Plugin、MCP、Skill 該裝什麼、怎麼用最順

雖然 Claude 有好幾個方式可以使用：「網頁」、「Desktop App」、「外掛」、「Cli」，其中用習慣 Claude CLI 後也是覺得很方便好用，而且用來串接 MCP 也能做其他很多的事情。

另外剛開始用的時候，最容易卡住的不是指令，而是一堆名詞：Plugin、MCP、Skill、Context7……每個看起來都是「擴充功能」，到底差在哪、該裝哪個？這篇把我自己的用法整理一次，也當作給同事的入門。

安裝與啟動

在 Claude 官方網站有安裝 Claude CLI 的指令，macOS、Linux、WSL，開啟終端機貼上以下指令：

curl -fsSL https://claude.ai/install.sh | bash

安裝成功後輸入以下確認是否安裝成功：

claude --version

開始使用的方式，官方文件寫到：

#cd 的意思是到指定資料夾，所以 cd 然後把資料夾拖到終端機 cd /path/to/your/project
claude

這非常重要。即便只是用來問問題或是分析網頁，不是針對某一個專案，也建議建一個資料夾做為操作範圍。我之前不小心在電腦根目錄啟動 Claude，它一不小心讀到太多檔案，就會狂燒 token。

啟動的資料夾還決定了兩件事：

• 讀哪一份 CLAUDE.md：專案的常駐規則（例如「這個專案用 pnpm」）寫在這裡，每次對話都會載入。第一次進專案可以打 /init 讓 Claude 幫你產一份。
• 對話紀錄存在哪：後面會講到的 /resume 是依資料夾找之前的對話，同一個專案固定從同一個資料夾啟動才找得到，如果隨便弄一個資料夾，之後就找不到。

切換模型：/model

/model

切換模型。如果用基本方案，建議平常還是以 Sonnet 5.5 為主，其實大部分的情況夠用了，真的遇到比較難的問題要解決再切換到 Opus 5.5 就好；當然如果是 Max 方案，可以直接切成 Opus 5.5，不然也用不完。

選好的模型會變成之後新對話的預設值。如果只是想「這一段對話」換個模型，在清單上按 s 就只套用到目前這段對話，不會改到預設值。

Plugin 是什麼：/plugin

/plugin

最基本常用到的東西，可以直接去 Plugin 市集（Marketplace）安裝。除了內建的官方市集，也可以加入別人在 GitHub 上分享的市集：

裝好之後，在 Installed 分頁可以看到自己裝了哪些。從我的安裝清單就看得出來：figma 這個 Plugin 底下同時有一個 MCP，還附了 16 個 Skill；playwright 底下有 MCP；skill-creator 則只有 1 個 Skill，沒有 MCP。

所以 Plugin 就是一個「套裝包」：把 MCP、Skill，再加上自訂指令、Hook（事件發生時自動執行的腳本）、Subagent（專門處理某類工作的子代理）打包起來，從市集一行就能裝好。

那 Plugin 裡面的 MCP 和 Skill 又是什麼？下面分開講。

MCP 是什麼：/mcp

/mcp

AI 模型本身只會接受和回覆內容，Claude 是也能讀取檔案等，但它仍然看不到其他的軟體如 Figma 設計稿、不能開瀏覽器點按鈕，也讀不到 Notion 裡的規格，因此需要透過 MCP 讓 Claude 與外部軟體串聯再一起互相提供功能服務

MCP（Model Context Protocol） 是 Anthropic 推出的開放標準，任何支援 MCP 的 AI 工具（Claude Code、Claude Desktop、Cursor……）都能直接接上，不用每個工具各寫一套整合。

接上之後，Claude 就多了一組可以呼叫的「工具」。接上 Figma MCP，它就可以讀設計稿；接了 Playwright MCP，它就可以點網頁上的按鈕。

在 Claude Code 裡輸入 /mcp 可以：

• 看到目前有接上哪些 MCP Server、有沒有連線成功
• 對需要登入的服務（Figma、Notion……）做 OAuth 授權
• 連線失敗時重新連線（通常斷線 AI 會自己跟你說要 reconnet）

也可以用指令手動新增：

# 遠端型（通常會跳出瀏覽器登入）
claude mcp add --transport http notion https://mcp.notion.com/mcp

# 本機執行型
claude mcp add playwright -- npx @playwright/mcp@latest

用了一陣子後的兩個心得：

• MCP 不是裝越多越好。每個 MCP 的工具說明都會佔用 context，裝太多會讓 Claude 變慢，也比較容易選錯工具。只裝真的會用的，反正要裝很方便！
• MCP 用的是你的帳號權限。來路不明的 MCP Server 不要裝，我基本上大部分是裝 market 有的。

Skill 是什麼

Skill 就是一個資料夾，裡面放一份 SKILL.md 說明書手冊（可以再附範本、腳本），教 Claude 某類任務「我們的做法」。

.claude/skills/sso-binding/
├── SKILL.md ← 名稱、描述、步驟
├── templates/ ← 選用：程式範本
└── scripts/ ← 選用：腳本

---
name: seo-work
description: 平常工作專案常用 seo 檢測表準、處理方式...
---

# 步驟
1. 檢查 html 結構
2. 檢測每一頁的....

Skill 最聰明的地方是用到才載入：

1. 平常 Claude 只看得到每個 Skill 的名稱和一句描述，非常省空間。
2. 你的需求跟某個描述對上（例如「幫這個新專案接 SSO 登入」），它才把整份 SKILL.md 讀進來。
3. 真的需要時，才再去讀附帶的範本或執行腳本。

所以 Skill 可以裝幾十個也不太影響效能，這點跟 MCP 剛好相反。也可以用 /skill名稱 直接叫出來，例如 /wp-optimize。

什麼適合寫成 Skill？凡是你會一直重複跟 Claude 解釋的事：公司專案的標準做法（SSO 串接、WordPress Docker 優化）、檢查清單（無障礙、上線前檢查），或做過一次之後還會再做的特殊效果。

整理：Plugin、MCP、Skill 差在哪

三個都認識之後，一句話分別：

• Plugin 是「套裝包」：把 MCP、Skill，再加上自訂指令、Hook、Subagent 打包起來。
• MCP 給的是「能力」：Claude 現在能讀 Figma 了。
• Skill 給的是「知識、手冊」：Claude 知道「把 Figma 設計轉成程式」該照什麼流程做。

如果只裝 Figma MCP，Claude 有工具，但不一定知道最好的用法；裝 Figma Plugin，等於「工具加上說明書」一起給它。

最後整理一個判斷法：

• 每次對話都要知道的規則：寫在專案的 CLAUDE.md
• 某類任務才需要的流程：寫成 Skill
• 需要碰外部系統：裝 MCP
• 想把上面這些打包給同事一鍵安裝：做成 Plugin

推薦最少裝這四個

以下是我安裝的，也推薦最少可以裝這幾個。

context7：讓 Claude 查最新文件

AI 的知識有截止日。 模型是用某個時間點以前的資料訓練的，所以常常會：

• 給你舊版的寫法
• 用了已經被移除或改名的 API
• 捏造一個看起來很合理、但根本不存在的參數

最麻煩的是這些程式碼看起來都很對，跑下去才出問題。

舉個實際例子：請它「用 Tailwind 4 設定品牌色」，憑記憶很容易寫出 v3 的 tailwind.config.js；但 v4 改成在 CSS 裡用 @theme 設定，舊寫法放進 v4 專案不會自動生效。

Context7 是一個 MCP，背後持續收錄大量開源套件的最新官方文件和程式範例，還可以指定版本。裝了之後，Claude 寫程式前會先用 resolve-library-id 找到正確的套件，再抓那個版本的文件，照著真的文件寫，而不是憑記憶，如果某些套件你懶得讀文件，可以根據 SKILL 所獲取的最新官方文件（GSAP、Three.js、各家 SDK），再交給 claude 看。

用法很簡單，提問時加一句 use context7：

用 Tailwind 4 的方式設定自訂主題色，use context7

懶得每次講的話，就在專案的 CLAUDE.md 寫一句「使用第三方套件 API 時，先用 Context7 查最新文件」。

另外注意：從前面的安裝清單可以看到 context7 標著 Needs attention・1 to sign in，裝完之後要記得到 /plugin 或 /mcp 完成登入授權，不然工具不會動。

skill-creator：把經驗變成 Skill

這是一個幫你製作 Skill 的 Skill。

跟 Claude 花了一段時間把某件事做順之後（例如終於把某個專案的 SEO 資料接好了），直接說：

把剛剛這整套流程做成一個 skill

它會整理成標準的 SKILL.md 格式，還能幫你測試這個 Skill 會不會在對的時機被觸發。下次自己或同事遇到同樣的事，Claude 就直接照這套做法，不用重講一遍。

這是把個人經驗變成團隊資產最快的方法。

playwright：讓 Claude 自己操作瀏覽器

Playwright MCP 讓 Claude 可以開網頁、點按鈕、輸入文字、截圖、讀 console 錯誤、看網路請求。實際可以用來：

• 開後台登入上資料：例如 WordPress 後台要建一批文章、上一批商品，交給它一筆一筆填。
• 改完自己驗證：改完前端讓它開頁面看看有沒有壞、console 有沒有噴錯，不用每次自己切到瀏覽器。
• 寫測試：我也會透過 playwright 讓 AI 操作過一遍流程，再透過 AI 寫不同使用流程腳本做驗證。
• 重現 bug：「照這幾個步驟操作會出錯，幫我重現並找原因。」
• 搭配 Figma MCP 比對版面：這個最好用，下面詳細講。

Figma MCP 提供「應該長怎樣」，Playwright MCP 提供「實際長怎樣」。兩個一起用，Claude 可以讀設計稿的間距、字級、顏色，開測試站量實際的數值，列出差異之後自己修，修完再截一次，直到跟設計稿一致。

⚠️ 涉及正式站後台、刪除、付款這類操作時，記得盯著它做，或先在測試站跑。

figma：直接讀設計稿

在 Figma 對版面按右鍵 Copy link to selection，把連結貼給 Claude，第一次使用授權後，它就能抓到這塊設計稿的資訊。

拿到的不只是一張截圖，而是結構化的設計資料：圖層結構、Auto Layout、顏色變數、字體設定、間距。照這些資料切版，比看截圖猜準很多。

前面提過 figma Plugin 附帶了 16 個 Skill，其中就有「設計轉程式」的標準流程，所以它會盡量沿用專案裡現有的元件和顏色變數，而不是每次都重寫一份。

對話管理：/resume 與 /new

/resume
/new

/resume：接回之前的對話

一段對話裡，Claude 會累積很多你沒寫下來的脈絡：讀過哪些檔、試過哪些方法失敗、你說過的偏好、做到第幾步。關掉終端機，這些就沒了嗎？

其實對話紀錄都存在你的電腦裡，/resume 就是把之前的對話叫回來繼續：

/resume # 在 Claude Code 裡，跳出清單選要接哪段對話
claude -c # 從終端機啟動時，直接接回這個資料夾最近一次的對話
claude -r # 從終端機啟動時，跳出清單選

適合的情境：

• 跨天的任務：昨天做到一半的功能，今天接著做。
• 不小心關掉終端機、電腦當機。
• 插隊的急件：A 做到一半跑去修 bug，修完再 /resume 回到 A。
• 回頭查：「上禮拜那個問題當時怎麼解的？」翻出那段對話。

/new：開一段乾淨的新對話

/new 和 /clear、/reset 是同一個指令，都是清空目前的對話、重新開始（CLAUDE.md 等專案記憶不受影響）。

對話不是越長越好。 舊的對話內容會一直佔著 context，換到不相關的任務時還留著，會浪費 token（每次回覆都帶著前面全部內容），也會讓 Claude 被上一個任務干擾。

所以我的習慣是：同一件事要延續就 /resume，換一件新的事就 /new。 清掉的對話不會不見，之後一樣能從 /resume 找回來。

順帶兩個相關指令：

• /compact：對話太長、但任務還沒做完時，把前面的內容壓縮成摘要，保留重點、釋放空間。
• /rewind：倒回之前某個時間點，連改過的程式碼一起倒回。Claude 改壞了的時候特別好用。

先規劃再動手：/plan

/plan

也可以按 Shift + Tab 切換模式，切到 Plan Mode。

進入 Plan Mode 後，Claude 只能看、不能改：可以讀檔、搜尋、分析，但不能修改檔案，也不能執行會改東西的指令。它調查完會交出一份計畫，你確認之後才開始動手。/plan 後面也可以直接接任務，例如 /plan 做會員登入頁並接 SSO。

好處有這幾個：

1. 先對齊方向，避免白做工。 直接開工的話，可能改了十幾個檔案才發現它理解錯需求。Plan Mode 讓你在動手前就看到它打算怎麼做，這時候改方向的成本最低。
2. 逼它先把專案讀懂。 它只能調查，就會更完整地看相關檔案，找到專案裡現有的寫法和可以重用的元件，而不是一上來就自己寫一套新的。
3. 可以直接改計畫。 「第 3 步不要動 API，前端處理就好」「這裡用我們現有的 useAuth」——在計畫上改一句話，比事後改 10 個檔案省太多。
4. 大改動更好掌控。 重構、跨很多檔案的功能，有計畫就知道每一步會動到哪裡。
5. 比較安全。 探索不熟的專案、或是跟正式環境有關的東西時，可以確定它不會手滑改到東西。
6. 計畫本身就是文件。 可以拿給同事看、貼到 PR 描述、拆成任務。

然後通常我會等他把計畫寫好後，請 claude 把計畫寫成 md 檔案放在專案的 docs 資料夾，並且當某步驟完成後就要及時更新 md 檔案，確保萬一 session 丟失或是不同電腦帳號可以根據 md 接力完成工作。

串起來：一個實際的工作流程

假設任務是「照 Figma 做一個新的會員登入頁，要接 SSO」：

1. 在專案資料夾啟動 claude（昨天做到一半的話就 /resume）。
2. /plan 貼上 Figma 連結：「幫我做這頁，並且要確保 SEO 的結構正確、套用我們過去的檢視流程。」
   • figma 讀設計稿
   • 團隊的 SEO Skill 自動觸發，帶入標準流程
   • context7 查目前框架版本的正確寫法
3. 看計畫、調整、同意。
4. Claude 開始實作，用 playwright 開測試站截圖，跟 Figma 比對差異再修正。
5. 做完換下一件事，/new。

結語

Plugin、MCP、Skill 聽起來都像「擴充功能」，但分工其實很清楚：

• Plugin 把下面這些打包起來，一行安裝（套裝包）
• MCP 讓 Claude 碰得到外部系統（能力）
• Skill 告訴 Claude 某類事情該怎麼做（知識）
• context7 讓它查最新文件，而不是憑記憶
• /resume、/new 管理對話，讓脈絡保持乾淨
• /plan 先對齊方向再動手

先從 context7、skill-creator、playwright、figma 這四個開始裝，再把團隊常做的事慢慢寫成 Skill，Claude Code 就會越用越順手。

指令速查

• /init：幫專案產生 CLAUDE.md
• /model：切換模型（按 s 只套用目前對話）
• /plugin：安裝、管理 Plugin
• /mcp：查看、授權、重新連線 MCP
• /skill名稱：手動叫出某個 Skill
• /resume、claude -c、claude -r：接回之前的對話
• /new（同 /clear）：開新對話
• /compact：壓縮長對話
• /rewind：倒回之前的狀態（含程式碼）
• /plan、Shift + Tab：進入 Plan Mode
• 提問加「use context7」：先查最新文件