design-system-patterns - Build scalable design systems
Build scalable design systems with design tokens, theming infrastructure, and component architecture patterns
Tags
Updated: 2026-06-15Capabilities
Typical Inputs
Typical Outputs
What this skill does
- create design tokens
- implement theme switching
- build component libraries
- generate multi-platform tokens
- synchronize Figma to code
- configure style dictionary
- setup theme providers
- detect system preferences
- store theme preferences
- transform token formats
- create token hierarchies
- integrate with CI/CD
Inputs
- Figma design tokens
- style dictionary configuration
- CI/CD pipeline
- local storage preferences
- component design specifications
Outputs
- CSS custom properties
- design token files
- theme provider components
- multi-platform token outputs
- style dictionary outputs
Requirements
- React environment
- Figma access
- Tokens Studio
- Style Dictionary
- multi-platform support