build-design-system

The build-design-system skill is a specialized agent workflow designed to help developers and designers architect a professional component library from the ground up using Brent Jackson's Design Graph methodology. By prioritizing constraint-based systems over magic numbers, this tool ensures that your UI remains scalable, mathematically coherent, and visually consistent across diverse projects.

• Implements the Design Graph architecture: connecting scales, components, variants, and themes into a single interconnected node system.
• Automates typography scale generation using powers of 2 and mathematical ratios (e.g., 1.25 base), ensuring consistent visual rhythm.
• Provides structure for semantic design tokens, including color palettes, spacing arrays, font weights, and border radii.
• Enforces strict styling rules: components must reference theme tokens rather than hard-coded values, preventing technical debt and style inconsistencies.
• Generates comprehensive design system specifications, including theme-swapping logic for light and dark modes.
• Offers practical templates for implementation, including TypeScript-based theme configurations.

When you invoke this skill during the initial phases of UI development or component library creation, the agent acts as an architectural guide. It assists in defining the core constraint primitives first, then guides the translation of those primitives into reusable UI components and flexible theme variations. The skill is highly effective when you are looking to replace chaotic CSS with a systematic approach. Inputs typically include project requirements, design goals, or base style preferences. Outputs include structured design specifications, TypeScript-ready theme objects, and documentation that clarifies the relationship between scales and component variations. Remember to follow the rules of the Design Graph: keep variants additive, limit scale values to 6-7 items per property, and always avoid magic numbers to maintain long-term system maintainability.