interface-design

本技能為實用型軟體（如內部工具、分析儀表板及數據密集型管理面板）提供系統化的設計框架。旨在協助 AI 代理在前端開發過程中保持視覺與結構的一致性。本技能強調「組件庫優先」的哲學，利用 shadcn/ui、Skeleton、Flowbite 與 Ant Design 等工業標準工具，並在之上定義簡潔的自定義層。透過確保所有 UI 決策皆記錄於項目特定的 'interface-design.md' 文件中，代理能可靠地管理佈局、字體、配色與間距規則，避免設計偏移。

• 標準化儀表板、管理面板及數據密集型應用的 UI 模式。

• 自動化項目設計文檔的建立與維護，確保視覺一致性。

• 與熱門組件庫（如 shadcn/ui、Skeleton、Ant Design）無縫整合。

• 提供收集項目背景、用戶角色與設計意圖的結構化工作流程。

• 確立佈局模式、數據表格、篩選欄與加載狀態的明確準則。

• 提倡透過對比與字體層級建立視覺結構，而非過度使用裝飾性元素。

• 在啟動新項目、新增主要 UI 組件或進行定期設計審查時使用此技能。

• 除非 'interface-design.md' 中有特定覆蓋說明，否則應優先使用組件庫的默認行為。

• 遵循定義的文字層級與表面浮起規則（例如：使用細微邊框而非陰影）。

• 約束：不適用於營銷登錄頁面或裝飾性創意網站。

• 關鍵字：UI 設計, 設計系統, 組件庫, 儀表板, 數據表格, 管理面板, 前端一致性, shadcn/ui, Skeleton, Ant Design, UX 模式, 間距, 字體, 實用型介面。