Design System Generator

Kullanım alanları

• Generating design token definitions from brand guidelines
• Creating React/Vue component specifications with props and variants
• Building accessibility-compliant component documentation
• Converting Figma screenshots to structured component APIs
• Producing theming configuration for dark/light modes

Create a design system specification for a Button component.

Brand context:
- Primary color: #2563EB (blue-600)
- Border radius: 8px
- Font: Inter, system-ui
- Focus visible ring style

Requirements:
1. Design tokens (colors, spacing, typography, shadows)
2. Component variants: primary, secondary, ghost, destructive
3. Sizes: sm, md, lg
4. States: default, hover, active, disabled, loading
5. Icon support (leading and trailing)
6. React component API with TypeScript types
7. Accessibility: WCAG 2.1 AA compliant, focus management, aria attributes
8. Usage guidelines with do's and don'ts

Output in both design token format (JSON) and React component code.

Önerilen modeller

Uyumlu araçlar

Modaliteler

İlgili Skills