商店截圖 — 全景

從原始應用程式截圖製作一體成型的 App Store 截圖集，使所有截圖看起來像同一張表面。版面設計參考大型市集應用程式的截圖集測量而得；3D 物件與英雄畫面則來自應用程式本身的內容。詳細規範請參閱 references/style.md。在製作第一組截圖前，請完整閱讀該檔案：範本無法決定的部分（顏色、曲線、哪個部分往前、哪些符號變成 3D、Duo 版面配置）都由該檔案決定。

使用者要的是結果，不是過程。不要撰寫規劃、規格或測量檔案，也無需停下來請求批准。自行做出決定，產出截圖集，檢查後交付。僅當輸入確實缺失且無合理預設值時才提問，例如原始截圖寬度小於 1206px 時詢問較大的原始圖檔。

核心規則

UI 保持像素精確。 原始截圖及其裁切部分都是單純的圖層。不要重新繪製、使用 AI 重新生成、翻譯或變更螢幕上的任何文字。卡片僅透過 data-crop 從原始檔案裁切。商店截圖必須展示真實應用程式；虛構的 UI 會損害信任與 App Review 審查。
每個裝置都使用其專屬的原始截圖。 在 iPhone Duo 上，分頁列與狀態列位於側邊，分割視圖在內螢幕打開。將 iPhone 截圖放到 Duo 框架中會呈現錯誤的應用程式樣貌；不要這麼做。如果沒有 Duo 截圖，只製作 iPhone 截圖組，並告知使用者需要為 Duo 拍攝哪些畫面（style.md §10）。
調暗是獨立的圖層。 螢幕上只套用 .phone.dim 圖層；像素本身不變。
裝飾來自應用情境。 3D 物件重複應用的主題。不要借用購物應用中的促銷徽章、緞帶、折扣用語或隨機的加號與愛心；這會讓每個應用看起來像商店廣告。
AI 或 3D 生成僅限於物件與英雄符號，且絕不能包含手機或 UI。
未經驗證的硬體不繪製。 Duo 框架沒有相機、轉軸或按鈕；其位置尚未確認。
不含其他品牌的標誌或名稱。
優越性宣稱（「最佳」、「第一」）必須附上來源。若無來源，請撰寫效益，而非宣稱。
狀態列保持原始截圖中的樣貌。

輸入與預設值

輸入	預設值
iPhone 原始截圖	`raw/`（1206×2622 或更大），兩個主題皆使用。或 `raw-light/` 與 `raw-dark/`：應用程式的淺色與深色模式，相同檔名與尺寸；每個主題則使用各自的資料夾（`style.md` §9）。
Duo 原始截圖	`raw-duo-outer/`（外螢幕）與 `raw-duo-inner/`（內螢幕），相同順序與檔名；若依外觀區分則為 `raw-duo-outer-light/`、`raw-duo-outer-dark/` 等。若無 Duo 截圖，則不製作 Duo 截圖組。
輸出資料夾	`out/`
裝置尺寸組	iPhone 6.9 吋（1320×2868）與 6.3 吋（1206×2622）：兩者皆需（`style.md` §4）。若有 Duo 截圖，則包含 Duo 外螢幕（1398×2034）與內螢幕（2007×2853）。
語言	原始截圖的語言。標題依語言撰寫；裁切部分也從該語言的截圖測量。
主題	`both`：淺色與深色。若使用者指定其一，則只製作該主題。
顏色	從原始截圖推導（`style.md` §1、§9）
訊息與 3D 符號	由你從原始截圖推導（`style.md` §6、§8）

輸出：<out>/<lang>/<theme>/<device>/01.png … NN.png。主題為 light 或 dark；裝置為 iphone-6.9、iphone-6.3、duo-outer 或 duo-inner。原始 HTML 檔案與預覽圖保留在 <out>/.src/ 中；請勿刪除，以便使用者修改文案後重新渲染。若輸出資料夾已包含其他截圖組的檔案，請勿觸碰；若發生衝突，請選擇新的子資料夾並告知使用者。

檔案

references/style.md：顏色角色、背景、標題、裝置、突顯技術、源自情境的 3D 物件、英雄畫面、文案語氣、深色主題、iPhone Duo。
assets/panorama.html：範本。已準備好裝置框架（iPhone、Duo 外螢幕、Duo 內螢幕）、標題、裁切（彈出卡片、聚光燈、框架、晶片）、調暗、蓬鬆 3D 物件（.obj：新月、星星、閃光、泡泡、播放、音符、愛心、球體，或你自己的路徑）、英雄物件及各主題原始資料夾 (RAW)；佈局尺寸已固定。複製後僅編輯調色盤、背景形狀、圖片與 RAW。
scripts/render.mjs：將全景切片為 PNG。 node <skill>/scripts/render.mjs <panorama.html> --out <dir> --theme light|dark --device iphone|duo-outer|duo-inner [--size WxH] [--preview <png>] [--only 2,5] [--no-slices]。每個裝置的預設尺寸為 App Store Connect 可接受的尺寸；iPhone 預設為 6.9 吋，若需 6.3 吋請傳遞 --size 1206x2622。其 JSON 輸出的 warnings 欄位會列出尺寸、比例與 Alpha 問題、頁面錯誤，以及對比度與裁切警告 (WARN:)。
scripts/grid.mjs：在原始截圖上繪製標籤像素網格與試用方框，用於測量裁切。 node <skill>/scripts/grid.mjs raw/02.png --out <png> [--box x,y,w,h]。憑感覺猜測的裁切在縮放後會偏移，因此請在網格上測量每個裁切。

需要 Node 18+ 與 Chrome（或 Chromium、Edge、Brave）；若未找到請設定 CHROME_PATH。標題字型在 macOS 上為 SF Pro Display，其他平台為 Inter（Google Fonts）。

工作流程

檢查原始截圖。 檢查每個檔案的像素尺寸、每個畫面的用途及上面的文字。注意應用程式的主題與符號：圖示、分頁圖示、畫面上的插圖。從中挑選 3D 物件與英雄符號。挑選強調色 (A)：按鈕的顏色、選取的分頁或標誌的顏色。依照 style.md §1 從 A 推導調色盤。取樣顏色時可使用 magick <png> -format "%[hex:p{x,y}]" info: 或網格圖片。檢查 Duo 資料夾是否存在且尺寸正確（style.md §10）。檢查存在哪些原始資料夾，並為每個主題挑選資料夾（style.md §9）。若有淺色與深色資料夾，請確認它們包含相同檔名與像素尺寸，且顯示相同狀態（內容、滾動位置、時間）。
在心中規劃截圖組；不要寫下來。 順序：英雄畫面，然後按價值順序排列畫面。針對每張圖片決定：標題、標題區塊的顏色（A 或第二背景，以 2–3 張為一組）、主要突顯技術及要裁切的部分。能證明該畫面重點的部分即為主要突顯。然後將 3D 物件分散到接縫處。Duo 截圖組講述相同故事：相同順序、標題、調色盤與符號。
測量裁切。 對每個部分執行 grid.mjs，檢視圖片，使用 --box 嘗試方框，再次檢視。方框應緊貼元素但留些許空間，不切到文字，也不納入相鄰 UI。測量卡片的圓角半徑 (data-r)。Duo 的裁切需從其原始檔案分別測量。在淺色截圖上測量。若有深色資料夾，也對深色截圖嘗試相同方框 (grid.mjs raw-dark/02.png --box …)：裁切是共用的，因此必須在兩者中緊貼相同元素。
建立 iPhone 全景。 將 assets/panorama.html 複製到 <out>/.src/panorama.html：
- 修改 :root 中的調色盤。
- 在腳本中設定 RAW：{ light: 'raw-light', dark: 'raw-dark' }（兩個資料夾）或 { light: 'raw', dark: 'raw' }（一個資料夾）。所有路徑使用淺色資料夾；深色渲染時會自動切換。
- 為每張圖片撰寫 <section class="shot">。設定 data-raw 用於裁切；路徑相對於 .src 資料夾（輸出在 out/ 時為 ../../raw/…，輸出在 out/x/ 時為 ../../../raw/…）。範本中的裁切與顏色值僅為範例；請為此應用程式重新測量所有數值。
- 在 svg.bg 中以全景座標繪製背景形狀：先決定標題區塊的顏色順序，再安排形狀以符合該順序。
- 將 3D 物件放在 .pano 的直接子元素中，置於接縫處。將英雄物件放在第一個 section 中。
- 刪除範例的 section 與物件。
建立 Duo 全景（若有 Duo 截圖）。將 iPhone 全景複製到 .src/panorama-duo-outer.html 與 .src/panorama-duo-inner.html，並依照 style.md §10 改寫：相同標題、調色盤與符號；新的裁切；卡片、物件與背景形狀重新針對設計高度佈局；RAW 設定為 Duo 資料夾（例如 { light: 'raw-duo-outer-light', dark: 'raw-duo-outer-dark' }）。

渲染。 每個主題與裝置執行一次（深色主題使用 --theme dark 與 dark）：

R=<skill>/scripts/render.mjs; S=<out>/.src; O=<out>/<lang>/light
node $R $S/panorama.html          --theme light --device iphone    --out $O/iphone-6.9 --preview $S/preview-light.png
node $R $S/panorama.html          --theme light --device iphone    --out $O/iphone-6.3 --size 1206x2622
node $R $S/panorama-duo-outer.html --theme light --device duo-outer --out $O/duo-outer --preview $S/preview-light-duo-outer.png
node $R $S/panorama-duo-inner.html --theme light --device duo-inner --out $O/duo-inner --preview $S/preview-light-duo-inner.png

修正每個警告；對比度警告請調整調色盤。每張圖片是獨立的 Chrome 執行（約 10 秒）。修正時可使用 --only 2,5 只渲染變更的圖片，或使用 --no-slices --preview … 只渲染預覽；交付前請從頭開始重新渲染所有內容。

檢視並修正。 先看預覽圖，再看每張圖片，並逐項檢查清單。修正後重新渲染。不要交付未檢視過的圖片：偏移的裁切、標題後的曲線或遮蓋卡片的物件只有在圖片中才會顯現。6.3 吋組是 6.9 吋組縮小版；檢視一組即可，但需檢查兩組的檔案數量與尺寸。
交付。 簡短說明資料夾、裝置組、圖片數量、每張圖片的標題及每個主題使用的原始資料夾。若深色截圖顯示不同狀態，請指出需要重新拍攝的畫面。若未製作 Duo 組，請說明原因及需要補拍的內容。提醒使用者修改文案僅需編輯 .src/ 中的 HTML 並執行步驟 6 的命令。

若提供參考截圖組

若使用者提供其他應用的商店截圖作為參考，請將 style.md 中的佈局值替換為該組的測量值：

逐張檢視圖片，再並排比較，並以全解析度測量：背景與連續性、標題、裝置、突顯技術、裝飾、特殊圖片、節奏與語氣。
不要添加參考組中沒有的內容。
若參考組的長寬比與輸出不同，請相對於寬度進行測量轉換。將頂部元素固定在頂部，底部被裁切的元素固定在底部。
僅從參考組取得風格與佈局。切勿複製其標誌、品牌名稱、吉祥物、照片或文字。將其裝飾轉換為應用程式自身的情境。
同樣不要撰寫測量結果的檔案。

檢查清單

每個主題與裝置的 warnings 是否為空？每個檔案是否為正確尺寸且無 Alpha 色版？每個裝置組的圖片數量是否相同？
在預覽圖中，背景形狀與接縫物件是否在每個接縫處連續？
標題區域（y 0–650）是否有曲線？標題顏色是否與背景相符，並以 2–3 張為一組變換？
每張圖片的標題大小是否相同？除英雄標題外，是否有任何標題超過 2 行？
裝置是否在每張圖片的相同位置？UI 的重要部分是否在圓角或動態島下方？
每個裁切是否精確顯示應有的內容？是否有文字被切斷，或邊緣有相鄰 UI 的碎片？卡片是否銳利？
彈出卡片的邊緣是否將調暗螢幕中的文字行切成兩半？文字是否從卡片網格的間隙中透出？
若英雄物件延伸到圖片 2，是否觸碰到那裡的卡片或文字？英雄的卡片是否收在邊緣後方，或看起來像在溶解？
3D 物件是否來自應用程式的主題？它們是否遮蓋了標題、卡片或重要的 UI 文字？每張圖片最多 2 個物件？
英雄上的符號是否可辨識？卡片位於符號內部還是前方？
深色主題是否為深色主導（無大面積平坦的 A 區域；A 僅用於標題、物件與框架）？裝置邊框、卡片與物件是否與背景有對比？兩個主題的佈局是否相同？
使用深色模式截圖時：深色組是否在裝置與每個裁切中顯示深色 UI，淺色組顯示淺色 UI？每個共用的裁切在兩者中是否顯示相同元素？
在 Duo 組中，每個畫面是否都來自 Duo 原始截圖？卡片、物件與背景形狀是否適合較短的 Duo 畫布；裝置底部或任何卡片是否被裁切？側邊分頁與狀態列在裁切後是否正確保留？
語言特定字元是否正確（例如土耳其語 İ、ı、ş、ğ）？（<html lang> 必須與語言相符。）

Store Screenshots Panorama：像一條長卷的 App Store 截圖組