build-design-system

build-design-system 技能是一種專門的代理工作流程，旨在幫助開發人員和設計師使用 Brent Jackson 的 Design Graph 方法論從零開始建構專業的元件庫。透過優先考慮基於約束的系統而非隨意的數值，此工具可確保您的 UI 在不同專案中保持可擴展性、數學上的連貫性以及視覺上的一致性。

• 實現 Design Graph 架構：將比例 (Scales)、元件 (Components)、變體 (Variants) 和主題 (Themes) 連接成一個互連的節點系統。
• 利用 2 的冪次與數學比例（例如 1.25 倍率）自動化排版比例的生成，確保一致的視覺節奏。
• 為語義化設計令牌提供結構，包括調色盤、間距陣列、字重和邊框半徑。
• 強制執行嚴格的樣式規則：元件必須引用主題令牌而非硬編碼值，從而防止技術債和樣式不一致。
• 生成全面的設計系統規範，包括淺色和深色模式的主題切換邏輯。
• 提供實作的實用模板，包括基於 TypeScript 的主題配置。

當您在 UI 開發的初期階段或建立元件庫時調用此技能，代理程式將扮演架構指南的角色。它協助首先定義核心約束原始碼，然後引導將這些原始碼轉化為可重用的 UI 元件和靈活的主題變體。當您尋求以系統化方法取代混亂的 CSS 時，此技能非常有效。輸入通常包括專案需求、設計目標或基礎樣式偏好。輸出包括結構化的設計規範、準備好用於 TypeScript 的主題物件，以及釐清比例與元件變體之間關係的文檔。請記得遵循 Design Graph 的規則：保持變體的可加性，將每個屬性的比例值限制在 6-7 個項目，並始終避免使用魔術數字，以維護系統的長期可維護性。