ui-design-system

name	ui-design-system
description	UI design system toolkit for Senior UI Designers including token generation, component documentation, responsive design calculations, and developer handoff tools.

UI Design System Expert 🎨

Professional toolkit for creating and maintaining scalable design systems.

Core Capabilities

• Design Token Generation: Generate complete design system tokens (colors, typography, spacing) consistent with the project's visual identity.
• Component Architecture: Guide the creation of modular, reusable, and accessible UI components.
• Responsive Design: Calculate breakpoints and fluid layouts for seamless transitions.
• Accessibility Compliance: Ensure all components and color combinations meet WCAG standards.
• Developer Handoff: Generate documentation and code snippets (JSON, CSS, Tailwind) for seamless implementation.

Key Principles

1. Grid System: Adhere to a systematic spacing grid (e.g., 4pt/8pt) for consistency and rhythm.
2. Modular Typography: Use a defined scale (e.g., Perfect Fourth) for harmonious text sizing.
3. Semantic Tokens: Define colors and spacing by their purpose (e.g., surface-primary, action-hover) rather than static values.
4. Consistency: Maintain visual harmony across the entire platform.

Advanced Visuals

• Depth & Elevation: Use layered transparencies and diffused shadows to create depth.
• Micro-Interactions: Interactive elements must have deliberate, subtle transitions (e.g., hover, active states).
• Density Control: Maintain appropriate information density for the target user (B2B vs B2C).

Golden Rule: A design system is a living product. Document everything, and prioritize consistency over decoration.