Community程式設計與開發github.com

MrNhoiBong/WhiteBoard

建立並提供「Claude 草稿本」,一個本機白板(使用 Python 標準函式庫的伺服器,在 venv 中執行),讓使用者可以繪圖或撰寫 LaTeX、框選區域後提問;終端機中的 Claude 會讀取該區域並回答或繪製到白板上。當使用者要求建立、開啟、啟動或使用白板伺服器(whiteboard、草稿本、共同繪圖板、scratch board)與 Claude 交換資訊時使用。

WhiteBoard 是什麼?

這項技能建立一個本機白板伺服器,作為 Claude 與使用者之間的視覺協作空間。使用者可以在瀏覽器中繪製圖表、撰寫 LaTeX 數學公式、框選區域並附加問題。Claude 能夠讀取框選區域的內容(文字與 PNG 影像),在本地執行計算或讀取檔案,然後以文字回覆並直接在白板上繪製回應(筆記、LaTeX、SVG 圖表)。 伺服器完全使用 Python 標準函式庫實作,在自動建立的虛擬環境中執行,無需安裝任何第三方套件。啟動後,Claude 使用 `wb wait` 指令等待使用者輸入,並在背景持續輪詢。此技能支援 Claude Code 與任何可執行 shell 指令的 AI 終端機環境(如 Cursor、Codex)。 主要優勢在於:支援透過 SVG 生成圖表以節省 token、所有數學公式皆以實際渲染的 LaTeX 呈現、以及提供一套完整的繪圖指令(`wb note`、`wb tex`、`wb svg`、`wb rect`、`wb arrow`),讓 Claude 能夠以結構化且節省 token 的方式與使用者進行視覺化溝通。

相容平台✓Claude Code~Codex CLI~Cursor
npx skills add MrNhoiBong/WhiteBorad

Installed? Explore more 程式設計與開發 skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

Claude 草稿本 (whiteboard)

本機白板,作為共同草稿本:使用者繪製想法,Claude 在本機分析後回答並繪製到白板上。 程式碼位於此技能目錄中;以下 WB 為包含此檔案之目錄的路徑。

啟動

export WB_DATA="$PWD/.whiteboard"   # 可選:為目前專案設定專屬白板(預設:WB/data)
WB/wb start [--port 8765]           # 自動建立 .venv (python3 -m venv --without-pip),無需外部套件
  • 提供使用者 URL (http://127.0.0.1:8765),然後在背景執行 WB/wb wait --timeout 3300 (run_in_background)。
  • 若設定了 WB_DATA,則對所有後續的 wb 指令都必須設定相同的值(直接在指令中設定:WB_DATA=... WB/wb ...)。
  • 若在 git 儲存庫內使用 WB_DATA,請將 .whiteboard/ 加入 .gitignore。

服務循環

  1. 當 wait 以回傳碼 0 結束時:讀取輸出。輸出包含問題、框選的區域、區域內的項目(含足夠的文字內容)以及 PNG 路徑(如有)。
  2. 僅在輸出列出 PNG 時才開啟該 PNG(僅當區域包含手繪線條、框架、箭頭或形狀時才有 PNG)。不要讀取整個白板;如需更多上下文,請使用 wb look X Y W H 或 wb item ID。
  3. 必要時在本機進行處理:讀取檔案、執行腳本、計算。
  4. 使用 wb reply --file F --done 回覆,並在有益的情況下在白板上繪圖(請參閱下方說明)。
  5. 在背景再次執行 wait。回傳碼 2 表示逾時,無要求:只需重新執行 wait,無需通知使用者。

當使用者想要停止時:WB/wb stop。

回覆規則

  • 所有數學公式必須使用 LaTeX ($…$ 行內, $$…$$ 展示),無論是在對話中還是在白板上。頁面使用 MathJax 渲染,預設巨集:\Adv。
  • 多行文字或包含 $ 的文字,請寫入暫存目錄中的檔案,然後透過 --file 傳遞,以避免 shell 的 quoting 錯誤。
  • 內容為輕量 Markdown:**粗體**、*斜體*、`程式碼`、列表、表格 |…|。
  • Claude 建立的項目預設為紫色,並自動放置在正在處理的區域旁;使用 --at x,y 放置在其他位置。

繪圖指令

指令用途
wb note [TEXT|--file F] [--color C] [--at x,y] [--w W]卡片式筆記 (Markdown + LaTeX)
wb tex [TEXT|--file F] [--size N]無邊框文字或公式
wb svg --file F --title T [--w W --h H]圖表、圖形、插圖 (SVG)
wb rect X Y W H, wb arrow X Y DX DY白板原生框架、箭頭
wb patch ID [--text|--file|--svgfile|--at|--color], wb rm ID…修改、刪除
wb show [RID] [--pending], wb done [RID]檢視或關閉要求

筆記顏色:yellow, pink, sky, mint, violet。線條顏色 (rect, arrow):ink, red, blue, green, amber, violet。

節省 token 的 SVG 繪圖

  • SVG 圖形透過 <img> 顯示(安全,不執行腳本),因此 SVG 內部的 LaTeX 不會被渲染。如需公式,請使用 SVG 繪製框架和箭頭,然後在上面放置 tex 項目。
  • 圖表或多點圖形:使用簡短的 Python 腳本產生 SVG,不要手動編寫座標。此時成本僅為腳本長度,與點數無關。
  • 使用 <style>、<defs> 和 <marker>,對座標進行四捨五入。如果只需要幾個框架和箭頭,請使用 rect/arrow。
  • 讀取 SVG 幾乎免費:wait 僅為每個 SVG 圖形輸出一行描述,不會輸出原始碼。

架構與 API 詳細資訊:WB/docs/。

相關技能