Design System Generator

使用场景

• 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.

推荐模型

兼容工具

模态

相关 Skills