產生框架
將現有的螢幕截圖轉換為帶有框架的 PNG 圖片，使用 frame-kit 進行所有渲染。此技能會定位該工具、執行它、檢查結果並挑選封面。若要先為專案的頁面截圖，請使用 generate-project-frames。
1. 定位並檢查 frame-kit
將該資料夾稱為 <frame-kit>。使用第一個符合條件的：
$FRAME_KIT_DIRframe-kit命令所在路徑 (readlink -f "$(command -v frame-kit)"，其資料夾)- 在
~/projects ~/code ~/dev ~中搜尋，深度 ≤ 4，跳過node_modules（多個相符則詢問） - 詢問使用者；若他們沒有，建議
git clone https://github.com/CrziDev/frame-kit
然後：
- 缺少
node_modules→ 在<frame-kit>中執行npm install。 - 執行
node <frame-kit>/cli.mjs --help，僅從其列出的選項建立命令。如果缺少--resolution或--fit，表示安裝版本過舊：省略它們，並告知使用者git pull。 - 出現「Chromium not found」→ 在
<frame-kit>中執行npx playwright install chromium，或設定CHROME_PATH。
請勿將路徑寫入任何技能檔案中。
2. 框架化
node <frame-kit>/cli.mjs single <image|folder> --out <framed dir> [options]
--out：始終傳入。預設為<input dir>/framed/，這會巢狀在原始資料夾內。保持框架化圖片與原始檔案分離。--url "<host>/{name}"：網址列文字；{name}= 檔案名稱（不含其NN-前綴）。已知應用程式的真實主機和路徑時使用，否則省略。--style paper：收據、發票、列印輸出。資料夾執行使用一種樣式，因此僅針對那些檔案分別以--style paper和相同的--out重新執行。--resolution standard|high|max：預設max(3840×2400)。README 和快速預覽使用standard(1920×1200)，網頁和簡報使用high(2560×1600)。較大的輸出可獲得更清晰的框架和文字，而非螢幕截圖的更多細節。每批使用一種解析度。--fit auto|contain|cover：預設auto（整張螢幕截圖；非常長的頁面從頂部裁切）。僅在修正不良裁切時變更。
退出碼 1 表示某些檔案失敗；其他檔案仍會寫入，失敗項目會列在標準錯誤輸出中。修正原因（無法讀取或損壞的圖片、不支援的類型、超過 50 MB）並僅重新執行那些檔案。如果每個檔案都失敗，請懷疑 Chromium 問題。
3. 封面（僅限資料夾輸入）
檢視圖片，然後挑選兩張互補的圖片：
- 後景：產品概覽（儀表板、分析、首頁），橫向，縮圖尺寸可讀。
- 前景：顯示應用程式功能的畫面，包含真實內容，與後景不同的佈局。
- 絕不：登入頁面、空白狀態、錯誤頁面、非常長的整頁截圖、收據，或相同的畫面兩次。
node <frame-kit>/cli.mjs cover <back> <front> --back-url "…" --front-url "…" --out <framed dir>/00-cover.png（相同的 --resolution）。傳入原始螢幕截圖，而非框架化的。只有一張值得顯示的圖片，或使用者想要標題？使用 headline（請參閱 --help）。
4. 驗證並報告
node <this skill>/scripts/verify-frames.mjs <input> <framed dir> --resolution <preset>檢查每個輸入是否都有尺寸正確的有效 PNG，加上封面。它不判斷外觀。- 閱讀每個輸出的 PNG（以及封面）。尋找空白或部分載入的螢幕截圖、裁切掉的內容、小到無法閱讀的文字、錯誤的樣式（收據出現在瀏覽器視窗中）、錯誤的網址列。僅重新執行受影響的檔案並調整選項，然後重新驗證。如果您無法檢視圖片，請說明。
- 報告：框架化的資料夾、失敗或重做的檔案、封面配對，以及一句話說明兩者為何互補。