vscode-playwright

vscode-playwright 技能提供了一套自動化流程，用於產生專業級的 VS Code 編輯器螢幕截圖。此工具專為開發人員、技術作家與產品團隊設計，簡化了將即時編輯器視圖嵌入簡報、專案文件與行銷素材的過程。透過利用 Playwright MCP (模型上下文協定) 工具與 serve-web 代理伺服器，它建立了一個暫時且隔離的環境，確保每次產出的視覺資產皆保持一致、整潔且無干擾。此工具處理完整生命週期，從啟動具有特定工作區設定的 VS Code 伺服器，到微調編輯器 UI 外觀以實現最佳可讀性。

• 自動化 VS Code 伺服器實例的生命週期管理，包括建立暫時性的資料目錄以防止狀態污染。

• 程式化 UI 清理功能，透過命令面板整合關閉標籤頁、通知、側邊欄與面板。

• 精確的視口配置，以符合簡報範本與文件排版所需的特定長寬比與解析度。

• 增強的可讀性設定，例如應用全域縮放 (1.5x–1.75x)，以在縮小影像時保持字體清晰度。

• 支援標準 VS Code CLI 變體，包括核心 VS Code 與 VS Code Insiders，並具備自動環境偵測功能。

• 使用無頭瀏覽器自動化進行靈活的檔案導航與編輯器互動。

• 在啟動流程前，請確保已設定並可存取 Playwright MCP 工具 (mcp_microsoft_pla_browser_*)。

• 使用提供的 Bash 偵測邏輯，根據環境選擇正確的 code 或 code-insiders CLI。

• 務必設定特定的寬度與高度像素值以符合目標簡報佔位符，而非預設為通用螢幕解析度。

• 透過 page.keyboard.press 命令利用命令面板模式，與 VS Code 內部功能 (如「移至檔案」或「切換勿擾模式」) 進行互動。

• 本工具需要使用 curl 進行伺服器就緒檢查；在發送瀏覽器指令前，請確認 serve-web 服務已在 localhost:8765 上回應。

• 為達最佳效果，請使用設定預載入功能來強制執行一致的主題 (如 Default Dark Modern)，並停用可能會產生視覺雜訊的遙測或自動還原功能。