mobile

ultrahand: mobile

以互動式 Claude 成果展示設計手機螢幕，可在直向與橫向模式中切換三種手機尺寸。你所應用的每一條規則皆源於 references/principles.md，且每條規則均引用 references/sources.md。尺寸與安全區域定義於 references/presets.md。

1. 收集需求

僅詢問你無法推斷的資訊。在開始繪製前，先確定以下事項：

• 平台： iOS、Android 或兩者兼顧。若為兩者，使用 48 單位觸控目標及平台中立模式。
• 範圍： 單一畫面或一個流程。若是流程，列出所有畫面及使用者如何在畫面間移動：分頁、推入、工作表或全螢幕模態。
• 主要任務： 每個畫面要達成的唯一目的。該操作應置於拇指可及範圍內。
• 真實內容： 名稱、長度、計數以及最長的可能字串。不要使用虛擬文字（lorem ipsum）進行設計。
• 資料狀態： 哪些內容會載入、哪些可能為空、哪些可能失敗或離線。
• 限制條件： 品牌顏色、字型、現有設計系統，以及是原生應用程式還是網頁。
• 主題： 在選擇任何顏色、尺寸或間距前，先尋找專案的主題（design/THEME.md、*.tokens.json；請參閱 shared/theme/README.md）。若有主題，請依其設計：執行 node "${CLAUDE_PLUGIN_ROOT}/shared/theme/css.mjs" <tokens.json> --style --out theme.html，傳遞 --head theme.html 給建置腳本，僅使用其自訂屬性（var(--color-surface)、var(--space-gap-group)），並重複使用其庫存中的元件。當設計所需元素在主題中不存在時，使用最接近的代幣，並在待解決問題下列出新增項目；不要自行發明數值。若無主題，請遵循 shared/theme/rules.md 中的強制規則，並提供 theme 技能。

2. 閱讀參考資料

在設計之前，閱讀 references/principles.md 與 references/presets.md。使用該平台自身模式（分頁列、導覽堆疊、工作表），而非發明新模式。

3. 組合畫面

每個元件即使通過各自的檢查，組合起來仍可能造成畫面混亂。在建立之前，規劃它們如何形成區塊，以及區塊如何組成畫面，使用外掛程式的組合規則 shared/composition/principles.md：

• 撰寫區塊地圖。 針對每個畫面，列出其區塊（導覽列、內容區、主要操作、分頁列）、每個區塊的單一職責、其成員按使用頻率排序、以及一個強調重點。說明哪些是主要內容、哪些是裝飾元素：內容應佔主導地位，裝飾元素應退居其次。
• 用空間進行分組。 群組內部的間距明顯小於群組之間的間距；僅在空間無法清楚顯示群組時才加入容器。
• 每個角色一種樣式，每個區塊一個強調重點。 相同角色使用相同樣式；狀態和標籤絕不能看起來像按鈕；強烈的強調色僅用於每個區塊中的一個元素，選中狀態則使用較為低調的處理方式。
• 保持簡潔。 大約使用三種字型大小，一個事實只出現在一處，常用成員保持在視野內，不常用者則收納於選單中。當變更需要新增內容時，先重新組織，僅新增那些真正值得佔有一席之地的項目。

4. 建置畫布成果展示

使用外掛程式的共享可調整大小畫布（shared/canvas/；其 README.md 包含完整規範）。將畫面撰寫為 screen.html，並將設計本身的設定存放於工作目錄中的 config.json，然後進行建置：

node "${CLAUDE_PLUGIN_ROOT}/shared/canvas/build.mjs" \
  --presets "${CLAUDE_PLUGIN_ROOT}/skills/mobile/references/presets.md" \
  --config config.json --screen screen.html \
  --title "<design name>" --out index.html

將 index.html 發布為成果展示。預設值為 small 360（Android）、medium 393 與 large 430（iOS）；旋轉會以橫向模式呈現每一種尺寸，而 320 寬度的回流檢查則位於「檢查」之下。

• config.json 設定 title 與 states（例如 default、loading、empty、error）。若僅設計 iOS，設定 "initialPreset": "medium"；若同時設計 iOS 與 Android，設定 "minTarget": 48，以便每個預設值都針對更嚴格的目標進行檢查。
• 畫面規範： 一個 <template id="uh-screen">，內含 [data-screen] 區塊，以及用於點擊的 data-nav、data-nav-replace（分頁）、data-nav-back 與 data-show-state。邊緣使用 var(--uh-safe-top|right|bottom|left) 填充，這些變數會根據預設值及其旋轉狀態而變化；在 [data-screen] 上宣告使用它們的代幣，因為 :host 無法看到它們。使用 @container screen (width >= …) 響應尺寸，而非 @media。文字使用 rem；點擊區域、圖示與邊距使用 px，這樣 200% 的文字只會放大文字，而非控制項。顏色使用 light-dark()。行為定義在 window.ultrahandSetup = function (canvas) { … } 中。
• 固定部分： 將所有固定在底部的元素（分頁列、FAB、Snackbar）堆疊在一個 Dock 中，以免任何元素重疊，並在 [data-screen] 上設定 scroll-padding，使焦點滾動時能避開固定列 [WCAG-2.4.11]。在高度緊湊或 200% 文字時，讓頁首變為靜態 [WCAG-1.4.4]。
• 依預設值決定平台： small 為 Android，medium 與 large 為 iOS。根據 canvas.size.platform 遵循不同的慣例，例如返回控制項、標題對齊方式與觸控目標大小。
• 內建切換開關： 明/暗模式、200% 文字、狀態選擇器與顯示觸控目標（44 pt，或 Android 預設值為 48 dp）。請勿自行建置。在開啟工作表後呼叫 canvas.refresh()，以便目標疊加層能正確顯示。
• 使用彈性單位與安全邊距進行佈局，而非固定的裝置數值，這樣一個設計就能適應所有預設值。
• 讓主要流程可點擊：分頁可切換，行可推入，工作表可開關。在工作表中繪製工作表與對話框；切勿使用 alert、confirm 或 prompt。

5. 為每個預設值進行設計

針對每個畫面，依序處理 small、medium，再處理 large，然後每個尺寸的橫向模式。在問題出現的當下尺寸解決它：

• small (360)： 文字和按鈕仍能容納，不會截斷關鍵資訊。
• large (430)： 內容不會拉伸成過長的行或留下空白區域。
• landscape： 在短高度下，焦點欄位仍需顯示在鍵盤上方，並尊重側邊安全區域。同時以 200% 文字檢查：固定頁首與 Dock 合計必須為內容保留大部分螢幕空間。

然後快速檢查 320 寬度的回流。

6. 在展示前進行自我檢查

逐項檢查。修正任何失敗項目，或指出該項目並說明為何可以接受。

組合（執行組合審計，node "${CLAUDE_PLUGIN_ROOT}/shared/input/drive.mjs" do "${CLAUDE_PLUGIN_ROOT}/shared/composition/audit.mjs"，在最大與最小尺寸下進行，或目視檢查）：

• 模糊化後，畫面顯示預期的區塊，且主要內容首先吸引視線。無意外的亮點。
• 每個區塊只有一個職責，其成員按功能和頻率分組，群組間間距明顯大於群組內部間距。
• 每個區塊最多有一個強烈強調的元素；選中狀態表現低調。
• 每個角色一種樣式：計算每個區塊的控制項樣式數量，並為每個額外樣式提供理由。無標籤或狀態看起來像按鈕。
• 行與區塊對齊共享邊緣；畫面上約有三種字型大小。
• 無重複顯示的事實，螢幕上無任何對當前任務無幫助的元素。
• 經過一輪變更後：列出新增的內容；畫面不會比所需更繁忙。
• 僅使用主題值：無原始顏色，無偏離 8 點網格的間距，無超出級別範圍的字型大小，且重複使用庫存元件而非重新建置（shared/theme/rules.md NN-1, NN-2, NN-6, EV-4）。

元件與平台：

• 觸控目標至少為 44 × 44 pt（iOS）或 48 × 48 dp（Android），包含間距，且絕不小於 24 × 24。
• 主要操作可用單根拇指觸及；破壞性操作遠離拇指自然放置處。
• 任何互動元素皆不位於狀態列、瀏海屏或主畫面指示器下方，無論何種方向。
• 頂層分頁數量為 3-5 個，每個皆有文字標籤，且無單獨的漢堡選單按鈕。
• 每個工作表都有可見的關閉或取消按鈕與明確的卡槽，且工作表永不疊加。開啟工作表時，焦點移入其中，Esc 鍵關閉它，關閉後焦點返回開啟者 [NNG-SHEET]。
• 選中的分頁以多於顏色方式標記，例如指示器藥丸或粗細 [WCAG-1.4] [M3-NAVBAR]，且移除某項目時提供可點擊的復原功能。
• 每個欄位上方都有標籤（非佔位符）、正確的鍵盤與自動完成類型，且在鍵盤彈出時仍保持可見。
• 錯誤訊息內嵌顯示，位於對應欄位旁，並說明如何解決問題；已輸入的內容予以保留。
• 每個手勢都有可見的替代方案，且不與系統邊緣手勢衝突。
• 正文文字大小為 16-17 或更大，佈局在 200% 文字下仍能存活而不遺失資訊。
• 對比度在明與暗模式下，文字至少為 4.5:1，UI 至少為 3:1，且顏色絕非唯一信號。
• 已設計載入中、空白與錯誤狀態，且載入指示器符合其持續時間。
• 設計在 320 寬度下無水平滾動即可正常運作，且在橫向模式下亦然。

7. 呈現

分享成果展示連結。用簡短幾行說明區塊地圖（每個區塊的職責與強調重點）、關鍵決策及其背後原則（引用來源鍵）、任何你接受並附有理由的自我檢查項目、任何建議的主題新增項目（供 theme 技能使用），以及任何待解決的問題。