S claudeskill.wiki
creative-design

ui-design-system

Kit de herramientas del sistema de diseño de UI para Diseñador UI Senior que incluye generación de tokens de diseño, documentación de componentes, cálculos de diseño responsivo y herramientas para la entrega a desarrolladores. Úselo para crear sistemas de diseño, mantener la consistencia visual y facilitar la colaboración entre diseño y desarrollo.

7954

Instalación

npx claude-code-templates@latest --skill creative-design/ui-design-system

UI Design System

Professional toolkit for creating and maintaining scalable design systems.

Core Capabilities

  • Design token generation (colors, typography, spacing)
  • Component system architecture
  • Responsive design calculations
  • Accessibility compliance
  • Developer handoff documentation

Key Scripts

design_token_generator.py

Generates complete design system tokens from brand colors.

Usage: python scripts/design_token_generator.py [brand_color] [style] [format]

  • Styles: modern, classic, playful
  • Formats: json, css, scss

Features:

  • Complete color palette generation
  • Modular typography scale
  • 8pt spacing grid system
  • Shadow and animation tokens
  • Responsive breakpoints
  • Multiple export formats