[Claude Code] 六段 prompt 做出自己的資源儀表板:Claude Code mods 實作

更新（2026-10-06）：這篇的做法我整理成開源 repo cc-dash-kit。不想自己貼六段 prompt 的話，把這句貼給 Claude Code 就會裝好：幫我安裝這個 Claude Code 看板：https://github.com/coolthor/cc-dash-kit，之後再請它照你的使用習慣客製。

前言

開進停車場，入口的看板寫著 B1 已滿、B2 剩 3 格，你不會每層繞一圈找位子，會直奔 B2。

我手上有幾台跑 AI 模型的機器，還有幾個 AI 訂閱。叫 Claude 把工作分配出去的時候(這篇叫它「派工」)，它可能工單都寫好了，送出去才發現額度滿了、機器正在忙，或機器根本掛了，只好重新派一次。這就是每層繞一圈找車位，我的 Claude Code 缺的正是入口那塊看板。

我先問 Claude Code 我平常反覆在問哪些事，請它給我一些想法，再做出自己的面板。這篇把做法拆成六段 prompt 是為了方便理解，你可以照順序貼完，再挑剔一下它好不好看，就有自己的面板(中間我還多講了一句請它修換行，後面會講):

這篇不教你抄我的程式碼。我的面板接的是我家的機器，對你沒用；照這些 prompt 做，Claude 會做出連到你自己機器的版本。

---

mods 是什麼:一支能改 Claude Code 畫面與行為的小程式

把它想成 Claude Code 的外掛：裝上去以後，終端機裡會多出你自己設計的畫面和按鈕。程式碼都由 Claude 寫，你不需要懂。一個 mod 主要能做這幾件事:

• 畫畫面:在終端機開一個面板，放文字、進度條、按鈕。
• 給 Claude 新工具:Claude 可以自己呼叫它查東西，就像它平常跑指令一樣。
• 在 Claude 動手前先檢查:Claude 每次要執行動作之前，mod 可以先看一眼，必要時擋下來。
• 加斜線指令:例如打 /my-dash 重新打開面板。

官方文件裡 mod 還能改寫你送出的 prompt、重試或直接接手工具呼叫、在每次呼叫模型前換模型，連 Claude Code 內建訊息怎麼顯示都能改。

官方的介紹在 Claude Code mods 公告，完整 API 在 mods 文件。

有一件事要先知道:mod 跟 Claude Code 同權限，沒有沙箱。它讀得到你的環境變數、看得到整段對話。它也能替你核准工具、消耗你的訂閱額度，或花掉 API 帳戶(按用量計費)的錢，開的 process 不受 Bash 沙箱限制。所以裝來路不明的 mod 前一定要讀過程式碼，官方也建議只從信得過的作者或 marketplace 安裝 mod。這篇每段 prompt 我都叫 Claude 跑 claude plugin validate，一方面檢查語法，一方面你也看得到它掛了哪些事件。

開始前:確認版本、準備一個資料夾

mods 要 Claude Code v2.1.287 以上:

claude --version
# 2.1.289 (Claude Code)

版本不夠就 claude update。然後開一個空資料夾當工作區，在裡面啟動 Claude Code:

mkdir ~/my-dash-work && cd ~/my-dash-work
claude

接下來的六段 prompt 直接在這個 session 裡連續貼就好。這些 prompt 寫得比較細，是為了讓你照著做，也能做出跟我差不多的東西；你自己做的時候不用照抄，講清楚想要什麼就好，細節讓 Claude 自己發揮，寫太多反而容易出錯。我實測時每段都開新的 session(claude -p)，只是為了確認 prompt 本身就夠清楚，不靠前一段的對話記憶。

第一段:3 分 41 秒做出 GPU 與硬碟面板

幫我做一個 Claude Code mod:在右邊開一個面板,顯示這台電腦的 GPU 顯示卡記憶體用量(有 NVIDIA 卡就用 nvidia-smi,沒有就顯示「沒有 NVIDIA 顯卡」)和家目錄所在硬碟還剩多少空間,每一項都畫一條用量條,每 10 秒自動更新一次。
mod 放在目前資料夾的 my-dash/ 底下。做完用 claude plugin validate 檢查到通過為止,最後告訴我怎麼讓 Claude Code 載入它。

我這次實測花 3 分 41 秒。Claude 做出來的資料夾長這樣:

my-dash/
├── .claude-plugin/plugin.json   名稱、版本、說明
├── hooks/hooks.json             指向 register.tsx
├── hooks/register.tsx           面板、/my-dash 指令、每 10 秒更新
├── hooks/parse.ts               解析 nvidia-smi 和 df 的輸出、畫用量條
├── hooks/my-dash.test.ts        測試
└── types/index.d.ts             面板讀的資料格式

它還順手寫了測試，終端機和 Desktop app 兩種介面各測一次。測試不是我要的，是 Claude Code 內建的 mod 寫作指引本來就要它寫。之後改 mod 可以自己跑 claude plugin test，它會執行 mod 裡的測試檔，測試可以真的觸發 hook，也可以在終端機和 Desktop 兩種介面各 mount 一次畫面;validate 只做靜態檢查。不過畫面最後長怎樣，跑測試看不出來，還是要開 session 看。

載入方式它也會告訴你:

claude --plugin-dir ~/my-dash-work/my-dash

打開後面板就出現在對話上方，有兩欄:GPU 和家目錄硬碟，底下寫最後更新時間。我的 MacBook 沒有 NVIDIA 卡，所以 GPU 那欄顯示「沒有 NVIDIA 顯卡」，我截圖時硬碟那欄是「剩 232.0 GiB / 共 926.4 GiB」。

面板沒自己出現的話，打 /my-dash 就會打開。Claude 回報裡寫終端機要 144 欄以上才會在啟動時自動開，比較窄就要手動叫。

第二段:加 Claude 額度卡，每張卡都能收合

在 my-dash 面板加一張「Claude 額度」卡:顯示 5 小時和每週額度各用了幾 %、多久後重置(mod 可以從 session 的用量資訊讀到)。每張卡的標題都要能點一下就收合、再點一下展開。改完用 claude plugin validate 檢查到通過。

實測 136 秒。額度不用自己打 API 抓，mod 可以直接讀 Claude Code 狀態列用的那份用量資料。額度數字要等你用訂閱帳號送出第一則訊息之後才有，在那之前卡片會顯示「尚無額度資料(送出第一則訊息後才有)」。用 API key 的帳號一直都是這個狀態。

第三段:接上你的本地模型

這段就是請它連上你的地端模型，每 10 秒更新一次。

在 my-dash 再加一張「地端模型」卡:每 10 秒打一次 http://localhost:8080/v1/models(我的本地模型服務是 OpenAI 相容 API),列出現在提供哪些模型;連不上就顯示「沒在跑」。網址寫成檔案開頭的一個常數,方便我改。validate 到通過。

實測 119 秒。/v1/models 是模型服務用來回報「我現在有哪些模型」的網址，格式跟 OpenAI 的一樣，所以叫 OpenAI 相容。網址換成你自己的服務就好，llama.cpp、vLLM、LM Studio、Ollama 都有 OpenAI 相容的 /v1/models，只是預設 port 不同。我把另一台機器的模型服務轉到本機 8080，Claude 做完還自己打了一次，確認回應格式對得上，卡片會列出 qwen38-27b-ud。

它還補了幾種例外處理:服務 3 秒沒回應也算「沒在跑」，免得整個面板等它;回錯誤碼時用紅字寫出原因，例如「讀取失敗：HTTP 503」;服務在跑但沒有模型時，顯示「服務在跑，但沒有提供模型」。

第四段:讓 Claude 自己也讀得到

現在面板看起來很棒，你能掌握所有資源了，但 Claude Code 其實還是不知道現況。所以再請 Claude 做一個小工具，讓它派工之前先掌握狀況。

讓 Claude 自己也讀得到這個面板:在 my-dash 註冊一個 Claude 可以呼叫的工具,叫 my_resources,回傳一段很短的文字,只講「能不能用」:Claude 額度還夠不夠、GPU 和硬碟還剩多少、地端模型有沒有在跑。validate 到通過,最後告訴我這個工具的完整名稱,以及我該怎麼請 Claude 在派工前先查它。

實測 196 秒。Claude 做完會告訴你工具的完整名稱 mcp__my-dash__my_resources。這是 Claude Code 內部辨認工具用的名字，格式固定是 mcp__<mod 名稱>__<工具名>，寫指示給 Claude 時就用這個名字。我開一個新 session，叫 Claude 呼叫它、原文貼回來，拿到的是:

✓ Claude 額度：夠用（已用 5 小時 51%、每週 7%）
— GPU：這台沒有 NVIDIA 顯卡
✓ 硬碟 /System/Volumes/Data：剩 232.0 GiB（26%）
✓ 地端模型：在跑（qwen38-27b-ud）

要 Claude 派工前先查，把這句寫進專案的 CLAUDE.md(專案資料夾裡的說明檔，Claude Code 每次開工都會先讀):「派工前先呼叫 mcp__my-dash__my_resources,它標成不能用的資源不要派。」工具的說明裡已經寫了用途，但寫進 CLAUDE.md 比較穩。

這個工具只要回答「可不可以派工」:沒額度就不派，沒空閒就不派，回得太詳細只是浪費 token。我的面板一開始把所有細節都塞給 Claude，後來改成只回三塊:額度、地端模型，和我另外接的生圖服務 ComfyUI。

第五段:加按鈕，讓機器可以暫停派工

為什麼要加按鈕？我面板上的按鈕有兩種用途:

1. 訂閱服務:我想知道現在預設派工用的是哪個模型，也能手動換。
2. 地端服務(本地模型、ComfyUI):機器有時要拿來測新模型或調參數，需要一個旗標告訴 Claude 這台先別派工。

這段先做第二種，順便加一個立即更新:

在 my-dash 的「地端模型」卡加一個「暫停派工」按鈕:按下去在 my-dash/ 底下建立一個 paused 旗標檔,卡片標題旁顯示「暫停中」,再按一次就刪掉旗標、恢復正常;my_resources 工具看到旗標時,要回報地端模型「暫停中,不要派工」。面板最下面再加一個「立即更新」按鈕,按下去馬上重新讀一次所有資料。validate 到通過。

實測 151 秒。暫停中時按鈕會變成「恢復派工」，這是 Claude 自己加的。我開新的 session 叫 Claude 呼叫工具，旗標在的時候，地端模型那行變成:

✗ 地端模型：暫停中，不要派工

旗標刪掉就恢復原本的狀態。按鈕按下去會在你電腦上執行動作，所以除了寫旗標，也可以是開網頁或跑一支腳本。

第六段:Desktop app 也要好看

my-dash 也要在 Claude Desktop app 裡好看:Desktop 用比例字型,用字元畫的進度條會溢出欄位、蓋住後面的數字。請在 Desktop 上改用 SVG 畫進度條,終端機維持原樣。validate 到通過。

實測 185 秒。Claude 中途踩到一個坑、自己修掉了:它一開始用「元件表裡有沒有 Svg」判斷能不能畫 SVG，但在測試環境裡，終端機的元件表也有 Svg，結果終端機上的進度條直接消失。它改成看畫面類型是不是 terminal 才過。官方元件表也把 Svg 列為 Desktop 專用。

同一個 mod 在 Desktop app 的 Claude Code 分頁也會畫出來，而且大部分排版不用改。會壞的只有用字元畫的進度條:終端機是等寬字型，每個 █ 剛好佔一格;Desktop 是比例字型，同樣一排字元會變寬，蓋到後面的數字。這一段我是看到自己面板在 Desktop 上壞掉才加的。

加碼:一段 prompt 讓面板變好看

六段做完，功能都有了，但卡片只有灰色長條，看久了很單調。這段可以不貼，想要開頭那張圖的樣子再貼:

把 my-dash 面板美化:每張卡加圓角外框,標題用不同顏色(額度藍、GPU 綠、硬碟黃、地端模型紫);用量條依使用率變色,70% 以下綠、70–90% 黃、90% 以上紅,長度跟著面板寬度伸縮;百分比靠右對齊;最下面的更新時間改成暗色字。終端機和 Desktop 都要套用。validate 到通過。

實測 176 秒，validate 通過，Claude 自己寫的 31 個測試全過。

在 150 欄寬的終端機打開，兩條額度條和硬碟條的最後 4 格都掉到了下一行。我照畫面上看到的問題，再補一句:

用量條太長了，最後幾格會掉到下一行。請讓用量條和右邊的百分比剛好擠在同一行，視窗變窄或變寬都不會換行。

81 秒修好。它改成用面板自己回報的欄寬去算用量條長度。我把視窗切成 150 欄和 120 欄各開一次，三條用量條都和百分比待在同一行。看到畫面哪裡怪，直接描述你看到的樣子就好，不用知道是哪一行程式出錯。Desktop 版這次沒有截圖確認。

讓它每次都自動載入

最簡單的做法是直接跟 Claude Code 說「把 my-dash 設成每次開 Claude Code 都自動載入」，不用自己改設定檔。想自己設定，或看看 Claude 改了哪裡，就打開 ~/.claude/settings.json，內容是這段:

{
  "env": {
    "CLAUDE_CODE_PLUGIN_DIRS": "/Users/你/my-dash-work/my-dash"
  }
}

多個 mod 用冒號隔開。Desktop app 沒辦法加 --plugin-dir 參數，也是靠這個環境變數。之後每次改 mod:

• 終端機裡開著的 session 會盯著 mod 資料夾，存檔就重新載入。
• Desktop app 開著的 session 不會。開新的 session，或在同一個 env 加 "CLAUDE_CODE_PLUGIN_DIR_WATCH": "1"。

---

進階:我的面板怎麼長出來的

不讀這節不影響使用。這裡是一天下來踩到的坑，給想往下做的人和 AI 參考。

踩到的坑

中文對不齊。 第一版用 padEnd 補空白對齊欄位，中文一個字佔兩格，整欄歪掉。改成每一欄放進固定寬度的 Box，讓排版引擎算寬度。

面板寬度不要自己算。 我一開始用事件裡的 viewport.columns 決定寬度，結果那是整個視窗的寬度，不是面板的。拿掉寬度設定、讓 flex 自己貼合，面板就會跟著你拖的寬度走。真要精確算，可以用 e.props.bodyColumns，那才是面板內容區的寬度。

validate 會擋的三種寫法。 同一個事件掛兩個沒有篩選條件的 hook 會被拒，要併成一個;用到 $ 的函式要寫在檔案最外層;用 atom 存的狀態要在型別檔裡宣告，不然會報 is not declared。

一個變數名讓整個面板消失。 機器卡的 hosts.map(h => …) 用了 h 當參數名，剛好遮住 JSX 編譯後用的 h。只要有機器快照，整個面板就直接報錯、什麼都不畫。測試沒餵快照所以全過，是在真終端機上才發現。

Desktop 的進度條。 前面第六段講過:比例字型讓 ━ 溢出，改用 SVG。判斷畫在哪裡用事件的 e.surface,terminal 以外才換。

三個 session 改同一支檔。 那天我同時開了三個 session 在調面板，其中一個把卡框統一改成灰色，另一個在它的版本上繼續改，第三個又改回彩色。mod 只有一支 register.tsx，後存檔的會蓋掉前面的。改 mod 最好固定在一個 session 做，改完 commit。

Claude Code 自己升級了。 mods 的 API 標著 early access，版本之間可能會變。我在 ~/.claude.json 設了 autoUpdates: false，當天還是從 2.1.288 升到 2.1.289。最後在 settings.json 的 env 加 DISABLE_AUTOUPDATER=1 才停住，要升級時手動 claude update。