Design System Generator

AvanzadacreativeContexto mínimo: 64K

Creates comprehensive design system documentation and component specifications from existing UI patterns or requirements. Generates design tokens, component APIs, usage guidelines, and accessibility specifications. Supports Figma-to-code workflows and produces consistent theming across platforms.

design-systemuicomponentstokensaccessibilityfigmatheming

Casos de uso

  • 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

Prompt de ejemplo

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.

Modelos recomendados

claude-opus-4-6gpt-5gemini-2-5-pro

Herramientas compatibles

cursorkirogithub-copilotany

Modalidades

Entrada: text, image
→
Salida: code, text

Skills relacionadas

react-component-generatorfrontend-designaccessibility-review

Autor

OpenModels Community

@openmodelsrun