design-system-leadlisted
Install: claude install-skill Genuifx/claude-code-env-manager
# Design System Lead
Expert-level design systems for scalable product design.
## Core Competencies
- Design system architecture
- Component library design
- Design token management
- Documentation strategy
- Design-dev collaboration
- Governance and contribution
- Adoption and training
- Tooling and automation
## Design System Architecture
### System Structure
```
design-system/
├── foundations/
│ ├── colors/
│ ├── typography/
│ ├── spacing/
│ ├── elevation/
│ ├── motion/
│ └── grid/
├── components/
│ ├── primitives/ # Button, Input, Icon
│ ├── composites/ # Card, Modal, Dropdown
│ └── patterns/ # Forms, Navigation, Tables
├── layouts/
│ ├── page-templates/
│ └── content-layouts/
├── documentation/
│ ├── getting-started/
│ ├── design-guidelines/
│ └── code-guidelines/
└── assets/
├── icons/
├── illustrations/
└── logos/
```
### Maturity Levels
| Level | Characteristics | Focus |
|-------|-----------------|-------|
| 1: Emerging | Ad-hoc styles, no standards | Establish foundations |
| 2: Defined | Documented guidelines | Component library |
| 3: Managed | Shared component library | Adoption, governance |
| 4: Optimized | Automated, measured | Continuous improvement |
## Design Tokens
### Token Structure
```json
{
"color": {
"primitive": {
"blue": {
"50": {"value": "#eff6ff"},
"100": {"value": "#dbeafe"},
"500": {"value": "#3b82f6"},
"600": {"value": "#2563eb"},