ux-design-systemslisted
Install: claude install-skill Makiya1202/ai-agents-skills
# UX Design Systems
Build consistent, maintainable design systems with tokens, components, and theming.
## Design Tokens
### CSS Variables
```css
:root {
/* Colors */
--color-primary-50: #eff6ff;
--color-primary-500: #3b82f6;
--color-primary-900: #1e3a8a;
/* Typography */
--font-sans: 'Inter', system-ui, sans-serif;
--font-size-sm: 0.875rem;
--font-size-base: 1rem;
--font-size-lg: 1.125rem;
/* Spacing */
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-4: 1rem;
--space-8: 2rem;
/* Border Radius */
--radius-sm: 0.25rem;
--radius-md: 0.375rem;
--radius-lg: 0.5rem;
--radius-full: 9999px;
/* Shadows */
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}
```
### TypeScript Token System
```typescript
export const tokens = {
colors: {
primary: {
50: '#eff6ff',
500: '#3b82f6',
900: '#1e3a8a',
},
gray: {
50: '#f9fafb',
500: '#6b7280',
900: '#111827',
},
},
spacing: {
1: '0.25rem',
2: '0.5rem',
4: '1rem',
8: '2rem',
},
fontSize: {
sm: '0.875rem',
base: '1rem',
lg: '1.125rem',
xl: '1.25rem',
},
} as const;
type ColorToken = keyof typeof tokens.colors;
type SpaceToken = keyof typeof tokens.spacing;
```
## Component Patterns
### Button Component
```tsx
import { cva, type VariantProps } from 'class-variance-authority';
const buttonVariants = cva(
'inline-flex items-center justify-center rounde