AI Skills
napkin

napkin

熱門

Copilot CLI 的視覺化白板協作工具。會在瀏覽器中開啟互動式白板，讓您隨意塗鴉、繪製草圖與新增便條紙，接著將所有內容分享回 Copilot。Copilot 能讀取您的手繪圖稿與文字，並提供分析、建議與靈感發想。

3.7萬星標
4711分支
更新於 2026/8/5
獲取技能源代碼

相關技能

store-data-structures8.2萬frontend-dev-guidelines4.6萬pymoo4.2萬
SKILL.md
唯讀
名稱
napkin
描述

Copilot CLI 的視覺化白板協作工具。會在瀏覽器中開啟互動式白板，讓您隨意塗鴉、繪製草圖與新增便條紙，接著將所有內容分享回 Copilot。Copilot 能讀取您的手繪圖稿與文字，並提供分析、建議與靈感發想。

Napkin — Copilot CLI 的視覺化白板

Napkin 為使用者提供基於瀏覽器的視覺白板，方便透過塗鴉、繪製草圖或貼上便條紙來整理與呈現靈感。Agent 會讀取白板內容（透過 PNG 截圖快照及可選的 JSON 資料），並以對話方式提供分析、建議與後續執行步驟。

本工具的目標受眾為律師、PM（產品經理）及企業利害關係人，而非軟體開發人員。請保持整體風格平易近人，避免使用任何專業術語。

啟動方式

當使用者呼叫此 Skill 時 — 例如說出「let's napkin」、「open a napkin」、「start a whiteboard」或使用斜線指令 — 請執行以下步驟：

  1. 將隨附的 HTML 範本複製到使用者的桌面：

    • 範本部位於相對於此 SKILL.md 檔案的 assets/napkin.html。
    • 將其複製至 ~/Desktop/napkin.html。
    • 若 ~/Desktop/napkin.html 已存在，在覆寫前請先詢問使用者要開啟現有檔案還是重新開始。

  2. 在預設瀏覽器中開啟：

    • macOS：open ~/Desktop/napkin.html
    • Linux：xdg-open ~/Desktop/napkin.html
    • Windows：start ~/Desktop/napkin.html

  3. 提示使用者下一步該怎麼做。請使用親切且簡單的語氣說明：

    您的 Napkin 白板已在瀏覽器中開啟！

您可以隨意塗鴉、繪製草圖或新增便條紙 — 任何有助於梳理靈感的方式都可以。

當您準備好聽聽我的想法時，請點擊白板上的綠色「Share with Copilot」按鈕，然後回到這裡跟我說「check the napkin」。

讀取 Napkin 內容

當使用者說出「check the napkin」、「look at the napkin」、「what do you think」、「read my napkin」或類似表達時，請依照下列步驟操作：

步驟 1 — 讀取 PNG 截圖快照（主要來源）

尋找名為 napkin-snapshot.png 的 PNG 檔案。請依序檢查下列位置（瀏覽器會將其儲存至使用者的預設下載資料夾，可能因設定而異）：

  1. ~/Downloads/napkin-snapshot.png
  2. ~/Desktop/napkin-snapshot.png

使用 view 工具讀取該 PNG 檔案。這會將影像以 Base64 編碼資料傳送給模型進行視覺理解。PNG 快照是 Agent 了解使用者繪製內容的主要方式 — 它能擷取手繪草圖、箭號、空間配置、標註、圈選或劃掉的項目，以及畫布上的任何內容。

若在上述兩個位置皆未找到 PNG 檔案，切勿默不作聲地跳過。請告知使用者：

我還沒看到您的 Napkin 快照。請依照以下步驟操作：

1. 切換至瀏覽器中的白板畫面
2. 點擊綠色的「Share with Copilot」按鈕
3. 回到這裡再次跟我說「check the napkin」

該按鈕會儲存一張螢幕截圖供我檢視。

步驟 2 — 從剪貼簿讀取結構化 JSON（補充來源）

同時嘗試從系統剪貼簿擷取結構化 JSON 資料。白板在儲存 PNG 的同時會自動將資料複製到剪貼簿。

  • macOS：pbpaste
  • Linux：xclip -selection clipboard -o
  • Windows：powershell -command "Get-Clipboard"

JSON 包含便條紙與文字標籤的精確文字內容、位置及顏色。這能補充 PNG 的不足，提供可能難以從截圖中清晰辨識的精確文字。

若剪貼簿中沒有包含 JSON 資料也無妨 — 單靠 PNG 快照就足以提供模型豐富的資訊。請勿將缺少剪貼簿資料視為錯誤。

步驟 3 — 綜合解讀兩種資料源

結合視覺快照與結構化文字，融合成對使用者思維或規劃的完整理解：

  • 來自 PNG：描述您所看到的內容 — 草圖、圖表、流程圖、分組、箭號、空間配置、標註、圈選項目、劃掉項目、強調標記。
  • 來自 JSON：讀取便條紙與標籤的精確文字內容，並留意其位置與顏色。
  • 將兩者結合，整理成單一且自然流暢的口語化解讀。

步驟 4 — 以對話方式回應

請勿直接輸出原始資料或技術摘要。請扮演一位剛看完對方白板草圖的協作者來回應。例如：

  • 「我看到您畫出了一個三階段的流程 — 看起來您正在考慮將 [X] 導入 [Y]，最後進入 [Z]。角落的便條紙寫著 '[text]' — 這是您希望我協助處理的疑慮嗎？」
  • 「看起來您把這四個想法集中在左側，並與右側的兩個項目分開。您是把它們視為兩種不同的類別嗎？」
  • 「我看到您畫了箭號連接 [A] 到 [B] 再到 [C] — 這是您構想的工作流程嗎？」

步驟 5 — 詢問後續步驟

結尾時務必提供後續步驟供選擇：

  • 「需要我基於這個構想繼續延伸嗎？」
  • 「要我把它整理成結構化的文件嗎？」
  • 「需要我把我的建議新增到 Napkin 上嗎？」

在 Napkin 上回應

當使用者希望 Agent 將內容新增回白板時：

  • Agent 無法直接修改 HTML 檔案的畫布狀態 — 該狀態由瀏覽器中執行的 JavaScript 管理。
  • 請改為提供切合實際的替代方案：
    • 直接在 CLI 中提供回應，並建議使用者手動新增至 Napkin。
    • 提議根據從 Napkin 解讀出的內容，建立一份獨立文件（如 Markdown、備忘錄、檢核表等）。
    • 若情境合適，可建立一份預先載入更新內容的 napkin.html 新副本。

語氣與風格

  • 使用與 noob-mode skill 相同的親切、非技術性語氣。
  • 絕不使用開發者專業術語；若必須使用，須以通俗白話進行解釋。
  • 將 Napkin 視為創意協作空間，而非正式的資料輸入工具。
  • 無論使用者的繪圖技巧如何，都請保持鼓勵與肯定的態度。
  • 將回應定位為「基於您的想法共同發想」，而非「分析您的輸入」。

錯誤處理

未找到 PNG 快照：

我還沒看到您的 Napkin 快照。請依照以下步驟操作：

1. 切換至瀏覽器中的白板畫面
2. 點擊綠色的「Share with Copilot」按鈕
3. 回到這裡再次跟我說「check the napkin」

該按鈕會儲存一張螢幕截圖供我檢視。

桌面上不存在白板檔案：

我們似乎還沒開啟 Napkin 白板。需要我為您開啟一個嗎？

重要注意事項

  • 解讀 PNG 是主要管道。多模態模型能讀取並理解 view 工具傳回的 Base64 影像資料。
  • 剪貼簿中的 JSON 資料為補充性質 — 它提供精確文字，但無法擷取手繪圖稿。
  • 務必先檢查是否有 PNG 檔案。若未找到，請提示使用者點擊「Share with Copilot」。
  • 若剪貼簿中沒有 JSON 資料，僅憑 PNG 即可繼續執行。
  • HTML 範本部位於相對於此 SKILL.md 檔案的 assets/napkin.html。
  • 若同時啟用了 noob-mode skill，在要求檔案或 Bash 權限時，請使用其風險指示燈格式（綠/黃/紅）。