Astrale 前端設計 是做什麼的？
將領域構建成一個專注的產品介面，而非著陸頁。領域內嵌於 Astrale GUI 中，並繼承其周邊外殼。除非任務另有方向，否則請優先使用主應用程式的視覺語言與專案現有的基本元件。請勿添加英雄區、大型展示區、多餘的頁面標頭或無用內容前的空白空間。
搭配 astrale-domain 視圖指引一同使用此技能。
規劃資訊架構
在編寫 UI 程式碼之前，先在腦中或臨時筆記中繪製高層級的線框圖。辨識出：
- 使用者的主要任務；
- 主要章節與子章節；
- 它們之間的邏輯連結；
- 它們的相對重要性；
- 哪些資訊應放在一起；
- 每個子章節的正確上層結構。
讓每個章節成為一個連貫的邏輯單位。讓資訊架構和任務優先級驅動版面、順序、空間和視覺權重。將狀態和控制項放在它們所影響的內容附近。
保持介面克制
避免 AI 生成的雜亂美學。不要將每個元素都變成卡片，不要在沒有實際分組需求時嵌套容器，也不要讓卡片在懸停時浮起。僅在需要澄清互動時使用懸停效果，並為鍵盤和觸控使用者提供相同的清晰度。
偏好少量強烈的區域、清晰的層級、緊湊的間距和一致的控制項。預設不要添加裝飾性漸層、藥丸形狀、過大的指標、動畫或裝飾文案。每個視覺元素都必須傳達結構、狀態、優先級或操作暗示。
精準處理互動狀態
在認為流程完成之前，先建模相關的初始、載入、空、就緒、提交中、成功、失敗、未授權和停用狀態。
- 只在真正等待的範圍內顯示載入：在提交按鈕內顯示本地動作，或在初始頁面內容時使用頁面骨架。永遠不要為一個動作顯示多個載入器。
- 防止重複提交。在失敗時保留使用者輸入，並在受影響的控制項或內容旁提供可操作的反馈。
- 清晰地處理新增：顯示動作成功，在使用者預期的位置插入結果，並僅在有助於下個任務時移動焦點。
- 清晰地處理刪除：區分可逆移除與破壞性刪除，並僅在後果需要中斷時進行確認。
- 在結果可預測時使用樂觀清單更新。失敗時回滾，顯示失敗，並使介面與已提交的 Kernel 狀態協調。
- 當使用者點擊外部或按下 Escape 時關閉打開的下拉選單。支援鍵盤導航，暴露選中的項目，並在適當情況下將焦點返回觸發器。
- 將長標籤和值納入版面測試。當閱讀重要時使用換行；僅在真正固定的空間中截斷，並提供完整值的存取。切勿讓文字覆蓋相鄰動作。
- 讓對話框、選單、表單和內聯動作可透過鍵盤使用。使用可見的焦點、語義控制項、正確關聯的標籤以及可訪問的狀態或錯誤公告。
- 使懸停、停用、待處理、成功和錯誤狀態在視覺上可區分，而不僅依賴顏色。
刻意精簡文字
只保留有助於使用者理解狀態、做出決定或採取行動的文字。保留必要的標籤、反馈和無障礙文字。移除引言、重複、明顯的幫助、裝飾文案以及只是重述標題或控制項的描述。
實作完成後，進行專用的文字精簡檢查。在上下文中閱讀每個可見字串，並將其移除，除非這樣做會使介面更難理解、決策或操作。
驗證結果
使用代表性、空、長、載入和失敗的數據來練習真實的任務流程。檢查新增、刪除、回滾、外部點擊與 Escape 行為、鍵盤順序、窄版面以及可見反馈。然後再次檢視整個螢幕，並移除有用內容前的冗餘卡片、效果、文案和空間。