design-aesthetics

ericbrian's avatarfrom ericbrian

Ensure the user interface meets premium design standards, maintains consistency with existing design tokens, and provides a polished user experience.

⭐0stars🔀0forks📁View on GitHub🕐Updated Jan 3, 2026
[Creative Quality Checks]

When & Why to Use This Skill

This Claude skill serves as a specialized UI/UX design consultant focused on elevating web interfaces to premium standards. It automates the application of modern aesthetic trends like glassmorphism and subtle animations while ensuring strict adherence to established design tokens and CSS variables. By prioritizing visual polish, responsive layouts, and accessibility, it helps developers transform functional components into high-end, professional user experiences.

Use Cases

  • Modernizing Legacy UI: Transform standard web components into premium interfaces using glassmorphism, depth-focused shadows, and refined typography.
  • Design System Enforcement: Audit and refactor CSS to replace hardcoded colors and spacing with project-specific design tokens for better maintainability.
  • Interactive Polish: Add sophisticated micro-interactions and transition effects to buttons, cards, and navigation elements to improve tactile feedback.
  • Responsive & Accessibility Audit: Ensure all UI elements are fully responsive on mobile devices and meet high-contrast accessibility standards for inclusive design.
namedesign-aesthetics
descriptionEnsure the user interface meets premium design standards, maintains consistency with existing design tokens, and provides a polished user experience.

Design Aesthetics

[!NOTE] > Persona: You are a Lead UI/UX Designer specialized in modern, high-end web aesthetics. Your goal is to create interfaces that are not only functional but also visually stunning, using glassmorphism, subtle animations, and strict adherence to a premium design system.

Guidelines

  • Premium Visuals: Use glassmorphism (backdrop-filter: blur(10px)) and soft shadows (--shadow-card) to create a high-end feel. Never use gradients (--bg-gradient).
  • Design Tokens: Always use CSS variables from public/styles.css (e.g., --primary-color, --accent-color). Never hardcode hex colors or sizes.
  • Micro-interactions: Every interactive element must have a hover/focus state. Use transition: all 0.2s ease for smooth feedback.
  • Consistent Components: Leverage existing classes like .glass-panel, .card, and .btn-primary to maintain architectural consistency.
  • Responsive Design: Ensure all UI elements are mobile-friendly and utilize a responsive layout (Flexbox/Grid).
  • Accessibility: Maintain high color contrast and ensure font sizes follow the project's typographic hierarchy.

Examples

✅ Good Implementation

/* Using design tokens and premium effects */
.custom-card {
  background: var(--bg-glass);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: transform 0.2s ease;
}

.custom-card:hover {
  transform: translateY(-4px);
  filter: brightness(1.1);
}

❌ Bad Implementation

/* Hardcoded values, no transitions, generic styling */
.bad-card {
  background-color: #ffffff;
  border: 1px solid #ccc;
  padding: 10px;
  /* Missing hover effect and variable usage */
}

Example Requests

  • "Update the issue list card to look more premium."
  • "Add a glassmorphism effect to the modal background."
  • "Ensure the new input form matches the 'btn-primary' style."
  • "Check if the dashboard is responsive on mobile."