UI Max
將產品易用性置於裝飾效果之上。選擇能滿足需求的最簡潔一致系統；請勿堆積元件庫。
從產品開始
在變更程式碼之前：
- 檢查框架、路由器、CSS 系統、元件庫、圖示與動畫庫、表單技術棧、設計 Token、深色模式以及既有的模式。
- 定義使用者的目標、主要工作流程、資訊層級、主要與次要操作、必備狀態、響應式表面以及鍵盤行為。
- 依此順序重用：本地元件、既有設計系統基礎元件、shadcn/ui、Radix UI、21st.dev、專用增強庫、自訂實作。
- 保持既有穩定的 UI 系統。切勿為了單一吸引人的元件引入一個相互競爭的完整系統。
選擇一個基礎
對於新的 React 產品介面，預設使用：
React + TypeScript + Tailwind CSS
shadcn/ui -> Radix UI 基礎元件
Lucide 圖示
Motion for React（僅在有用之處）
React Hook Form + Zod（用於大型表單）
TanStack Table（僅用於進階表格行為）
請勿將此技術棧強加於已有既有系統的專案，或是 Vue/Svelte 專案。在這些專案中應使用生態系原生函式庫。
在選擇附加元件前，先分類介面類型：
- 核心產品 UI：shadcn/ui + Radix UI + Tailwind CSS。
- AI 產品 UI：僅在真正需要 AI 工作流程模式時加入 Cult UI；使用 Motion Primitives 處理節制轉場。
- 行銷頁面：使用 21st.dev 建立結構，選擇性使用 Magic UI，並僅在真正高影響力的區塊使用 Aceternity。
- 資料密集應用：當排序、篩選、分頁、選取、可見性、虛擬化或複雜資料模型證明有必要時，加入 TanStack Table。
- 微互動：使用 Motion Primitives 或 Motion。僅在通過無障礙性與可維護性審查後使用 UIverse。
在選擇、安裝或取得函式庫/元件、比較替代方案或研究視覺模式時，請參閱 references/component-selection.md。
一致地實作
將每個重複使用或複製的元件正規化為專案的：
- 語意化色彩 Token
- 字體、間距、圓角與陰影比例
- 圖示家族
- 無障礙慣例
- 響應式行為
- 淺色與深色主題
使用語意化 Token，而非散落的硬編碼值。保持相關控制項靠近；分開不相關區塊；避免無根據的巢狀卡片；使用列表/表格進行比較，並使用卡片處理各自可操作的異質項目。保持主要操作明顯，並將破壞性操作遠離例行操作。
除非品牌要求，否則使用一種介面字型及一個圖示家族。僅使用動畫來傳達狀態、層級、連續性、因果、進度或焦點。尊重 prefers-reduced-motion。
在進行大規模視覺實作、響應式工作、狀態設計、表單、表格或無障礙工作之前，請參閱 references/design-standards.md。
涵蓋真實狀態
對於非同步或資料驅動的 UI，需考慮：
- 初始載入與背景重新整理
- 空白結果與無搜尋相符
- 成功、警告、錯誤與部分失敗
- 停用與離線狀態
- 缺少權限或整合
- 過期資料
在結構已知時，偏好使用骨架螢幕。錯誤訊息應說明發生什麼失敗、已知原因為何、已做的工作是否保留，以及解決方式。在完成的產品中，絕不使用無意義的模擬資料、假分析、虛構的代理活動或無功能的控制項。
清理既有 UI
審計重複、間距、顏色、字體、變體、圖示、巢狀版面、重複的工具類別、響應式、無障礙性、未使用的程式碼/依賴、動畫過度以及缺少的狀態。
整合重複或具有行為的基礎元件，例如按鈕、輸入框、狀態徽章、對話框、選單、標籤頁、頁面標題、空白/錯誤/載入狀態、側邊欄項目與專案列。不要為了抽象一次性使用的標記而增加複雜度，除非能帶來一致性、邏輯、重用或測試上的好處。
將重複的值 Token 化。移除不必要的包裝器、巢狀卡片、裝飾分隔線、重複標籤、冗餘操作/狀態、過度的描述以及無根據的動畫。
驗證渲染輸出
驗證：
- 語意化 HTML、無障礙名稱、標籤、邏輯的分頁順序、鍵盤操作、對話框焦點、可見焦點以及對比度
- 載入、空白、停用、錯誤、成功、長文字以及破壞確認狀態
- 窄版與寬版版面，無裁切、無法閱讀的表格、版面偏移或水平溢出
- 減少動畫行為、淺色/深色主題以及響應式導航
- 程式碼格式化、lint、TypeScript、測試、生產建置以及主控台輸出
在相關情況下，於 320、375、768、1024、1280 與 1440 px 進行測試。對於瀏覽器擴充功能，同時需測試約 320–420 px 的彈出視窗寬度，以及約 320–600 px 的側邊面板寬度。
在宣稱完成之前，務必檢查窄版及寬版下實際渲染的 UI。使用螢幕截圖循環或專案既有的視覺驗證工作流程；在真實目標上確認特定平台的介面。
報告 UI 工作
當被要求設計或重建頁面時，提供以下簡潔章節：
- 產品解讀：目標、主要工作流程、關鍵資訊、主要操作。
- 元件計畫：結構、可重用元件、基礎、專屬增強、響應式行為、重要狀態。
- 實作：在現有技術棧中的可運作程式碼。
- 驗證：無障礙性、響應式、狀態、鍵盤行為、設計 Token 一致性以及渲染視覺審查。
除非使用者要求選項，否則不要回傳函式庫目錄。