design-system-patterns

概覽

什麼是 design-system-patterns？

design-system-patterns 是一套實用技能，幫助打造可擴展且一致的設計系統。它提供設計代幣、主題基礎設施與元件架構的指引與範式，主要針對 UI 設計與基於 React 的專案。

誰適合使用這項技能？

• 希望建立可維護設計系統的 UI 設計師與前端工程師
• 建置元件庫或多品牌主題的團隊
• 實作主題切換或語意代幣階層的開發者

解決的問題

• 以代幣集中管理色彩、字型、間距等設計決策
• 支援強大的主題切換（淺色/深色、品牌主題）
• 支援可擴展的元件 API 與複合元件範式
• 串接設計到程式碼流程，包括 Figma 代幣整合

使用方式

安裝步驟

1. 透過 Agent Skills Finder 安裝 design-system-patterns：

   npx skills add https://github.com/wshobson/agents --skill design-system-patterns
   

2. 瀏覽主要檔案：
   • SKILL.md：技能概覽與使用說明
   • references/design-tokens.md：代幣結構與命名規範
   • references/theming-architecture.md：CSS 自訂屬性與主題切換
   • references/component-architecture.md：React 元件範式

設計代幣：入門指南

• 將代幣分類為原始、語意與元件代幣
• 使用 JSON 或 CSS 自訂屬性以跨平台產生代幣
• 範例色彩代幣結構：

  {
    "color": {
      "primitive": { "gray": { "100": { "value": "#f5f5f5" } } } }
  }
  

主題基礎設施

• 利用 CSS 自訂屬性與 [data-theme] 選擇器實作主題切換
• 使用 React context 提供動態主題管理
• 支援系統偏好設定（如 prefers-color-scheme）

元件架構範式

• 使用 React context 建構複合元件以共享狀態
• 採用多態範式（as 屬性）實現彈性渲染
• 定義變體與尺寸以擴展 API

適應指引

• 將參考資料視為範本，避免直接複製
• 將範式整合至自有程式庫，依技術棧與品牌調整

常見問題

哪裡可以找到詳細範例？

請查看 references/ 資料夾，深入了解設計代幣、主題與元件架構。

design-system-patterns 僅限 React 使用嗎？

雖然多數範式使用 React context，代幣與主題指引則是跨平台，可調整應用於其他框架。

如何預覽技能結構？

開啟 Files 分頁，檢視所有檔案，包括巢狀參考與輔助腳本。

什麼情況下不適合使用 design-system-patterns？

若專案不需可擴展主題、元件庫或設計代幣管理，較簡單的 UI 解決方案可能更合適。

可以用這項技能開發行動應用嗎？

可以，設計代幣與主題範式可調整應用於 iOS 與 Android 平台。