Snapmark for VS Code

Snapmark for VS Code 是什麼？

Snapmark for VS Code 是一款 VS Code 擴充功能，專為幫助您在將截圖貼到 AI 聊天工具前進行標註而設計。主要工作流程專注明確：複製截圖、在擴充功能中標註，然後將標註後的影像貼到任何接受貼上影像的 AI 聊天中。

根據擴充功能的描述，Snapmark 透過您的剪貼簿運作，不碰觸代理視窗。這讓您能在聊天分享前模糊敏感區域、為 UI 流程新增編號步驟標記，並將大型截圖調整為更適合模型的尺寸。

主要功能

• 剪貼簿工作流程：Snapmark 駐留於您的剪貼簿—複製截圖後，使用擴充功能的快捷鍵開啟標註器，準備影像以供貼上。
• 模糊敏感區域：支援模糊截圖區域，讓 API 金鑰、權杖及 PII 等值在影像貼到 AI 聊天前隱藏。
• 編號步驟標記：可新增有序標記（例如 1、2、3）來依序描述 UI 流程，減少解釋多步驟畫面時的來回溝通。
• 複製時自動壓縮：Retina 截圖在複製時長邊調整為 1920px，旨在防止視覺模型處理未用像素。
• 貼到「任何接受貼上影像的工具」：擴充功能呈現為工具無關—可用於接受貼上影像的 AI 聊天（列出範例如 Claude Code、GitHub Copilot Chat 和 Cursor）。
• 無遙測 / 開源（頁面所述）：頁面表示專案為 免費、開源 且 無遙測。

如何使用 Snapmark for VS Code

1. 安裝擴充功能：從 VS Code Marketplace 安裝 Snapmark（或使用頁面顯示的 GitHub 連結）。
2. 複製截圖：使用 OS 截圖工具（列出範例如 macOS Ctrl+Shift+⌘4、Windows Win+Shift+S 或任何 Linux 截圖工具）。
3. 開啟標註器：複製後，Snapmark 偵測剪貼簿影像並啟用狀態列按鈕。按 ⌘⇧A（或 Ctrl+Shift+A）開啟標註器。
4. 標註並準備影像：使用可用工具模糊敏感區域並視需要新增編號步驟標記。擴充功能在複製時也會套用所述的調整尺寸行為。
5. 貼到 AI 聊天：使用擴充功能的「複製」動作，將標註影像貼到接受貼上影像的 AI 聊天（頁面列出範例如 Claude Code、Copilot Chat 和 Cursor）。

使用情境

• 分享 UI 前隱藏憑證：記錄包含 API 金鑰、權杖或個人資料的應用程式畫面時，先模糊那些區域，避免貼上截圖暴露敏感資訊。
• 解釋多步驟介面：如「設定參數 → 送出 → 確認結果」流程，新增編號標記（1、2、3）告知模型每個步驟對應的畫面區域。
• 為視覺模型準備截圖而不浪費額外像素：複製高解析度（例如 Retina）截圖時，依賴 Snapmark 自動調整尺寸，讓模型處理 1920px 長邊而非極大截圖。
• 使用相同工作流程於多個 AI 聊天工具：在不同 AI 聊天客戶端間切換（頁面列出 Claude Code、Copilot、Cursor 等）而不需變更截圖標註流程—將標註影像貼到任何接受處。

常見問題

Snapmark 是否與特定 AI 代理整合？

Snapmark 描述為適用於「任何其他接受貼上影像的工具」。頁面列出範例如 Claude Code、GitHub Copilot 和 Cursor，但關鍵需求是 AI 聊天客戶端接受貼上影像。

標註期間截圖會發生什麼？

頁面表示 Snapmark 駐留於您的剪貼簿，不碰觸任何代理視窗。您在 VS Code 中標註剪貼簿影像，然後將標註影像貼到 AI 聊天。

可以隱藏 API 金鑰和 PII 等敏感資訊嗎？

可以。Snapmark 包含模糊功能，專為敏感區域設計，頁面明確提及 API 金鑰、權杖和 PII。

Snapmark 會調整大型截圖尺寸嗎？

會。頁面表示 Retina 截圖在複製時長邊調整為 1920px。

替代方案

• 手動截圖編輯工具：使用圖像編輯器（或作業系統標註工具）來模糊並標記截圖後再貼上。這在編輯上更靈活，但需要切換工具，且無法提供 VS Code 內的剪貼簿到標註工作流程。
• 專用 UI/步驟標註工具：幫助標記截圖用於文件化的工具可達到類似目的，但可能未針對剪貼簿優先流程及「貼到 AI 聊天」步驟進行最佳化。
• 其他 VS Code 圖像/剪貼簿工具：開發工具領域的其他替代方案可能提供剪貼簿處理或圖像操作，但可能不包含 Snapmark 所述的內建模糊及編號步驟工作流程。
• 僅依賴 AI 聊天客戶端的圖像處理：如果你的 AI 聊天能直接接受貼上的截圖，你可以跳過標註。這在隱藏敏感內容及引導模型處理多步驟 UI 流程上可能較不可靠。