遊戲 UI 畫面
讓每個畫面都感覺像同一款遊戲的一部分。從遊戲本身最出色的畫面出發，而非依賴通用的網頁風格；保持導航的遊戲感，並在玩家實際使用的尺寸下檢查每個畫面。適應 UI 技術（DOM over Canvas、引擎 UI 或場景內 UI）。若 game-foundation 可用，則用它來處理畫面流程；此技能涵蓋畫面的外觀與行為。
1. 盤點
列出所有畫面與覆蓋層，包括那些容易遺忘的：標題、主選單、各模式選單、車庫或裝備、設定、大廳或房間畫面、加入與邀請流程、載入、暫停、結果、錯誤、空白狀態、HUD 以及僅供開發者使用的畫面。針對每個畫面，記錄其檔案、進入方式、離開方式，以及是否需要伺服器或已儲存資料才能顯示。需要遊戲伺服器的畫面必須在伺服器運行時測試，否則回報為未驗證。
2. 提取樣式合約
選定錨點：已經最像遊戲的畫面（通常是標題或主選單）。在觸及其他畫面之前，記錄其規則：字型與標題處理、色彩 token、背景（即時 3D 場景、模糊背景、美術圖）、面板形狀、按鈕狀態（閒置、懸停、聚焦、按下、停用）、間距比例、動畫與音效提示。將共用部分放入 token 或共用類別中，讓畫面無法偏離。參考 style-contract.md 模板與遊戲內慣例。
3. 套用
- 全螢幕遊戲佈局，非網頁卡片。 桌面環境無文件滾動；彈窗適合視口；長列表在自身面板內滾動。
- 遊戲導航。 Esc 或返回控制項離開每個畫面；鍵盤與手把焦點可預測地移動，並有可見的焦點狀態；主要操作顯而易見。
- 引導流程作為一個流程。 如果某些模式需要名稱或個人資料，在一個簡短的起始步驟（名稱欄位 + 開始遊戲）中要求，而不是顯示一個充滿鎖定按鈕的選單。在設定中保持相同的驗證，以便後續編輯不會破壞它。
- 一條路徑足矣，不必多餘。 不要要求玩家在最終導向相同地方的選項之間做選擇（例如同一張地圖上的三個重生點）；提供一個主要操作，並在遊戲內部提供變體。
- HUD 層級。 參考 hud-and-loading.md。每個數字都有標籤，沒有像除錯輸出的內容，僅在相關時顯示情境元素。
- 載入畫面 包含與遊戲匹配的動畫、若可行則顯示真實進度，且短時間載入時不閃爍。
- 間距隨視口高度縮放（使用
clamp()或視口單位），使高選單在大螢幕上既不擁擠也不分散。
4. 重新命名面向玩家的名稱
當重新命名遊戲、模式、地點或物品時：搜尋所有拼字變體（大小寫、空格、連字號、打字錯誤），包括 UI 字串、HTML 標題、manifest、文件、套件名稱與儲存金鑰。當儲存金鑰變更時，遷移已儲存的資料，以便現有玩家保留其個人檔案。保持內部 ID 穩定，除非任務要求變更它們。
5. 驗證
在 1440×900、1280×720、1024×600 及手機尺寸（375×812）下檢查每個觸及的畫面，並加上專案自訂的目標。使用截圖，並使用 playtest 中的 __pt.layout()（或等效的邊界框檢查）來檢查頁面滾動、螢幕外控制項及重疊。走過每個畫面的進入與退出。回報你無法開啟的畫面及其原因。