Professional UI Design Guide

About

The Professional UI Design Guide skill equips Claude with the expertise of a senior UI/UX designer to ensure every component follows high-end aesthetic standards. It enforces a strict 8px grid system, neutral color palettes with single-accent highlights, and clear typographic hierarchies while actively preventing common amateur mistakes like excessive gradients and cluttered layouts. By following these professional guidelines, the skill helps developers create interfaces that are not only visually appealing and modern but also mobile-responsive and highly functional across any device.

Key Features

• Comprehensive interactive states (hover, focus, active, disabled) for all components
• Typographic hierarchy standards with a 16px minimum body text for accessibility
• Subtle, purposeful shadow and border-radius scales for modern depth
• Strict 8px grid system enforcement for consistent layout and spacing
• 0 GitHub stars
• Professional color system based on neutral tones and functional accent colors

Use Cases

• Refactoring amateur or cluttered CSS into a clean, minimal SaaS aesthetic
• Building a new component library or standardized design system
• Developing mobile-first responsive layouts for dashboards and landing pages