design-system-patterns

此技能為構建可擴展、可維護且一致的設計系統提供了結構化框架，適用於網頁與行動應用程式。它專為需要橋接設計意圖與生產環境程式碼的前端工程師、UI 架構師及設計系統負責人所設計。透過分層的標記化 (tokenization) 方法，團隊能從原始基礎值 (primitives) 過渡到語義化標記 (semantic)，最終定義特定組件標記，確保核心值的變更能在不需手動介入的情況下自動反映至應用程式各處。

• 多層級標記架構，支援基礎、語義及組件特定的標記層級。

• 進階主題基礎設施，包含 CSS 自訂屬性、系統層級配色方案偵測，以及基於 React 的持久化主題切換供應器。

• 組件構成策略，運用複合模式、多態 (polymorphic) 'as' 屬性以及無頭 (headless) UI 結構以實現最大彈性。

• 自動化標記管線，透過 Style Dictionary 等工具協助實現 Figma 到程式碼的同步。

• 使用 CVA (class-variance-authority) 等現代函式庫進行變體管理與響應式樣式協調。

• 支援多品牌與跨平台主題系統，確保不同產品線之間的一致使用者體驗。

• 當您需要從零開始建立設計系統或重構現有碎片化的 UI 函式庫時，請使用此技能。

• 非常適合實作亮色與暗色模式切換、高對比無障礙模式以及動態間距系統。

• 有效提升組件庫開發效率，透過統一的 API、減小的套件大小並優化開發者體驗 (DX)。

• 透過定義色彩、排版、陰影與間距的明確約束，標準化您的設計轉程式碼流程。

• 預期輸出包含 JSON 或基於 CSS 的標記定義、用於主題管理的主題 Context 包裝器，以及模組化、由變體驅動的組件架構。

• 限制條件包括在系統更新期間維持向後相容性，並確保標記層級保持適當深度，以防止 CSS 效能下降。