design-system-patterns

此技能為工程師、UI 架構師與設計系統維護者提供了一套完整的框架，用於構建健壯且可擴展的設計系統。它專注於彌合 Figma 設計資產與生產級程式碼之間的差距，透過標記導向開發（Token-driven development），協助團隊在大型網頁與行動應用中維持視覺一致性，並透過標準化元件架構顯著降低技術債。

本技能涵蓋了設計系統的整個生命週期，從原始設計標記（Primitive tokens）的定義到複雜的多主題切換基礎設施實作。它整合了業界標準（如 Style Dictionary）以進行多平台標記生成，並利用 React 的複合元件（Compound components）與 Headless UI 模式，確保元件既靈活又具備無障礙性。無論是從零構建系統，還是重構既有元件庫以支援深色模式與動態主題，本技能均提供了必要的架構模式。

• 原始、語義與元件級標記定義策略，實現細粒度的視覺控制

• 利用 CSS 自定義屬性、系統偏好檢測與持久化存儲實現動態主題切換

• 元件庫架構模式，包含多型元件（Polymorphic components）、插槽組合與 Headless UI 設計

• 自動化設計轉代碼工作流程，利用 Figma 同步與 CI/CD 整合

• 進階主題功能，如多品牌支援、減少動態效果與高對比度無障礙模式

• 使用 class-variance-authority (CVA) 與現代 CSS 架構來管理複雜的變體與尺寸系統

• 適合需要跨平台（iOS、Android、Web）視覺一致性的專案

• 提供標記層級、主題 Context Provider 與元件變體管理的範本

• 推薦給正在建立設計轉代碼工作流程或遷移至標記化樣式系統的團隊

• 有助於實作設計系統文件與維護開發者體驗（DX）

• 限制：最適合在擁有現代建構工具（Vite、Webpack）與 CSS-in-JS 或 CSS-module 工作流程的環境中使用