design-excellence

Design Excellence 作為 Toh Framework 的核心美學引擎，提供一套嚴謹的設計系統，防止常見的「AI 生成」視覺缺陷。其主要任務是確保由 AI 代理構建的介面具備人類手工開發的細膩度、克制與專業質感。透過標準化色彩哲學、排版刻度、間距標記與細膩的動作模式，此技能使 Design Reviewer 子代理能夠系統性地審核並提升 UI 元件，以達到企業級標準。該系統明確拒絕過度漸層、不一致的邊距與過大的字體等「AI 預設值」，轉而推崇平衡的佈局與原生的系統字體。

• 實作基於 Tailwind slate 色階與單一強調色規則的嚴格色彩系統，以維持視覺一致性。

• 強制執行專業的排版階層，包含針對頁面標題、區塊標題與內文的精確字級設定，確保易讀性。

• 提供基於標準 Tailwind 間距的健全佈局系統，防止常見自動化佈局中擁擠或分散的感覺。

• 包含基於 Framer Motion 的完整動態函式庫，強調功能性回饋而非浮誇的過度動畫。

• 定義明確的設計反模式，主動避免純黑文字、過度的字體粗細與不當的漸層使用。

• 作為 Design Reviewer 子代理的權威風格指南，支援自動化的視覺潤飾與美學優化。

• 使用者應在介面感到太過通用或「AI 味」過重時，透過 /toh-design 或 'polish UI' 等指令觸發此技能。

• 輸入依賴當前元件樹或頁面佈局的上下文；代理會根據定義的邊距、間距與色彩標記進行評估。

• 輸出內容包含重構後的 Tailwind class、修正後的元件結構，以及設定在 150-500ms 間的精準動畫時長。

• 約束條件包含保持背景顏色接近白色或中性色以維護易讀性，確保懸停狀態使用原生的 transition-colors，並將每個應用程式的強調色限制為單一主色。此技能專為 Toh 框架生態系統優化，特別適用於需要高度信任感與專業外觀的 SaaS 應用程式、管理儀表板與登陸頁面。