Design System Generator

advancedcreativeMin 64K context

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

Use Cases

  • 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

Example Prompt

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.

Recommended Models

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

Compatible Tools

cursorkirogithub-copilotany

Modalities

Input: text, image
→
Output: code, text

Related Skills

react-component-generatorfrontend-designaccessibility-review

Author

OpenModels Community

@openmodelsrun