ui-mobile

ui-mobile 技能概覽

ui-mobile 技能是做什麼的

ui-mobile 技能是一份實用指南，幫你打造能在真實 App 中運作的行動端 UI，特別適合 React Native 以及相鄰的行動程式碼庫。它主要面向需要在 UI Design 上更快、更安全地做出決策的貢獻者，重點放在觸控目標、對比度與行動互動模式，而不只是視覺修飾。

誰適合使用

如果你正在設計或調整 iOS/Android 畫面、審查行動元件庫，或把粗略的產品想法轉成可用於行動裝置的 UI，就很適合使用 ui-mobile 技能。當你需要一個可提示、可重複使用的標準，來處理在一般設計提示裡很容易漏掉的無障礙與互動細節時，它特別有用。

它有什麼不同

這個 repo 在重要處會採取明確立場：最小觸控尺寸、WCAG 對比度預期，以及可見的互動規則，都被視為限制條件，而不是建議。當你的主要風險是把好看但不能用的行動 UI 上線時，ui-mobile 在安裝決策上就特別值得考慮。

如何使用 ui-mobile 技能

安裝並啟用

先用專案的 skill manager 安裝 ui-mobile 技能，然後把它指向你要完成的行動 UI 任務。典型的 ui-mobile 安裝，在任務很具體時最有價值，例如「把這個表單重設計成更適合拇指操作」或「檢查這些按鈕的無障礙性」。

提供正確的輸入格式

最好的輸入會描述平台、畫面情境、元件類型與限制條件。例如，不要只說「把這個行動 UI 做得更好」，而是說：「改善這個 React Native 結帳畫面，讓單手操作更順手，在對比度允許的前提下保留目前品牌色，並修正任何觸控目標或可視性問題。」這種細節程度能幫助 ui-mobile 技能產出可用的 UI Design 指引，而不是泛泛的建議。

先讀對檔案

先從 SKILL.md 開始，了解強制規則，再檢視這個 repo 使用的任何專案提示或相關指引。就這個 repository 而言，檔案樹很精簡，所以 SKILL.md 是 ui-mobile 使用方式的主要依據；沒有可依賴的支援腳本或參考資料夾。

在工作流程中落實這些限制

在做版面細修之前，先把觸控目標大小與對比度當成門檻檢查。如果你要請模型產生程式碼，請寫明平台與元件類型，然後要求它驗證最小可點擊區域、文字可讀性與可見狀態變化。對 ui-mobile 而言，一個有力的提示應該同時要求 UI 本身，以及每一項行動端限制是如何被滿足的原因。

ui-mobile 技能常見問答

ui-mobile 只適用於 React Native 嗎？

不是。這個技能以 React Native 為核心，但相關規則也適用於更廣泛的 iOS/Android UI 工作。如果你的技術棧是 Flutter 或其他行動框架，ui-mobile 技能仍然能幫助你處理無障礙與互動決策，只是要把輸出調整成符合你的框架。

什麼情況下不該用這個技能？

如果你的任務是以桌面端為主、只處理內容，或與互動式行動 UI 無關，就不要使用 ui-mobile。如果你想做純品牌探索，卻不打算強制執行行動裝置的可用性限制，它也不是理想選擇。

這比一般提示詞更好嗎？

通常是的，尤其當你的風險是行動端可用性退化時。一般提示詞可能產出外觀尚可的結果，但 ui-mobile 技能會把模型推向那些在產品環境中真正重要的限制：按得到的控制項、可讀的文字，以及行動裝置特有的可視性規則。

對新手友善嗎？

是，只要你能描述畫面和問題就可以。新手在一次只要求一個元件或一個畫面的情況下，並且附上目前 UI、目標裝置行為，以及任何已鎖定的設計 tokens，通常最能得到實際幫助。

如何改進 ui-mobile 技能

先講最難滿足的要求

最大的提升通常來自於直接指出最容易失敗的地方。對 ui-mobile 來說，常見的高風險點是觸控目標大小、對比度，或版面過於擁擠。如果你說「保留設計，但讓每個點按目標至少 44x44，並確保文字符合 WCAG AA」，輸出通常會更可執行。

提供平台特定脈絡

iOS 和 Android 的行動 UI 行為並不相同，而這個技能在你明確說出目標平台時表現更好。像「iOS 的帳號操作底部抽屜」這種提示，比「mobile modal」更能得到好的 ui-mobile 結果，因為間距、安全區與互動預期都更清楚。

要求檢查，不只是結果

最好的 ui-mobile 結果會包含自我檢查步驟。你可以要求一份簡短的驗證清單，例如：「確認每個可互動元素都符合最小觸控尺寸、指出任何對比度風險，並標示可能被鍵盤或系統 UI 遮住的元素。」這能降低你接受到外觀精美但脆弱設計的機率。

針對具體失敗點迭代

如果第一輪已經接近但還不夠好，就用具體缺陷回覆：例如「次要按鈕太小」、「圖示標籤對比太低」，或「這個表單單手操作很吃力」。這會比再次要求 ui-mobile 技能「提升行動可用性」更能提供正確的修正方向。