| 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
- Grid System: Adhere to a systematic spacing grid (e.g., 4pt/8pt) for consistency and rhythm.
- Modular Typography: Use a defined scale (e.g., Perfect Fourth) for harmonious text sizing.
- Semantic Tokens: Define colors and spacing by their purpose (e.g.,
surface-primary, action-hover) rather than static values.
- 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.
