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
- define design tokens
- configure theme infrastructure
- build component libraries
- create multi-brand themes
- establish design-to-code workflows
- implement theme switching
- generate platform tokens
- configure token transformations
- set up theme providers
- detect system preferences
- store theme preferences
Inputs
- Figma tokens
- brand guidelines
- design specifications
- Style Dictionary configuration
Outputs
- CSS variable files
- SCSS variable files
- Swift code files
- XML resource files
- component library
Requirements
- React environment
- Style Dictionary
- build system
- Figma integration
- design-to-code workflow