Why does the guide prohibit gradients and rainbow colors?

The guide prioritizes a high-end, professional look often found in premium SaaS products, where solid colors and single accents provide better clarity and visual hierarchy than complex gradients.

What design style does this skill enforce?

It enforces a modern, professional, and minimal aesthetic characterized by plenty of white space, neutral color palettes, and functional simplicity, avoiding cluttered or 'rainbow' designs.

How does this skill improve mobile development?

It implements a mobile-first philosophy, ensuring touch targets are at least 44px and layouts scale gracefully from 320px screens up to desktop.

Does it work with existing CSS frameworks?

Yes, the principles of the 8px grid, typography scales, and interactive states can be applied to Tailwind CSS, Bootstrap, or custom CSS implementations.

Can this skill help with accessibility?

Yes, by enforcing 16px minimum font sizes, clear focus states for keyboard navigation, and high-contrast text colors, it significantly improves the accessibility of your UI.

Professional UI Design Guide

Name: Professional UI Design Guide
Author: bearhedge

bybearhedge

0•

디자인 도구

Enforces modern, minimal design standards and professional UI patterns to ensure clean, consistent, and production-grade frontend interfaces.

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.

주요 기능

01Comprehensive interactive states (hover, focus, active, disabled) for all components

02Typographic hierarchy standards with a 16px minimum body text for accessibility

03Subtle, purposeful shadow and border-radius scales for modern depth

04Strict 8px grid system enforcement for consistent layout and spacing

050 GitHub stars

06Professional color system based on neutral tones and functional accent colors

사용 사례

01Refactoring amateur or cluttered CSS into a clean, minimal SaaS aesthetic

02Building a new component library or standardized design system

03Developing mobile-first responsive layouts for dashboards and landing pages

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add bearhedge/apeyolo design-guide

For use in Claude.ai and ChatGPT

Download Skill