screenshots

此技能利用 Playwright 以程式化方式捕捉您的網頁應用程式的高解析度行銷截圖。專為開發人員、產品經理和行銷人員設計，無需手動干預即可為 Product Hunt 發布、社交媒體行銷活動、登陸頁面首屏或技術文件製作一致的視覺資產。透過自動化瀏覽器狀態（包括身份驗證、視窗大小調整和元素聚焦），此技能確保截圖在整個視覺系列中保持統一、專業的「Retina」品質。

• 自動偵測並配置 Playwright，設定 deviceScaleFactor: 2 以實現真正的 HiDPI/Retina 輸出。
• 智慧地爬取路由配置（Next.js、Rails、React Router、Vite 等）以映射和發現可截圖的功能頁面。
• 支援多步驟身份驗證工作流，以捕捉「登入」狀態視圖，包括敏感的儀表板和特定使用者設定。
• 提供可配置的截圖數量和針對社交媒體、產品發布和文件的特定使用情境預設。
• 與代碼庫整合，識別關鍵 UI 組件（如資料視覺化、表單、模態視窗和登陸頁面區塊）以進行針對性快照。
• 提供結構化的規劃階段，AI 在開始生成前會呈現發現的功能以供使用者確認。

使用注意事項與限制：

• 需要在環境中安裝 Playwright；技能會使用 npm 或 npx 指令進行預檢。
• 最適合具有明確路由結構的應用程式；若路由高度動態或過度依賴第三方整合，可能需要手動調整選擇器。
• 捕捉身份驗證狀態時，請確保測試憑證或模擬資料可用，以避免未經授權的存取錯誤。
• 輸出檔案會儲存至本機 /screenshots 目錄；請確保您的環境具有必要的寫入權限。
• 預設視窗大小為 1440x900，但可視需要調整以適應手機或平板電腦的響應式要求。