Is this compatible with Tailwind CSS or Bootstrap?

Absolutely. The design principles regarding hierarchy, spacing, and color are framework-agnostic and can be applied to any CSS implementation.

What spacing system does this skill recommend?

It advocates for a consistent 4px or 8px mathematical scale to create a predictable and harmonious vertical rhythm across the entire interface.

Can it help with mobile-first web design?

Yes, it includes specific guidelines for touch targets, padding, and layout constraints that ensure interfaces perform well on mobile devices.

Does this skill write full CSS code implementation?

The skill provides concise principles and snippets for design refinement rather than bulk code generation, focusing on the intentional 'why' behind UI choices.

How does it handle accessibility?

It enforces WCAG-friendly contrast ratios and ensures that meaning is conveyed through icons and text, not just color, to support color-blind users.

Web Design System Expert

Name: Web Design System Expert
Author: mintuz

bymintuz

•

디자인 도구

Refines UI layouts and visual aesthetics using professional design principles for hierarchy, typography, and spacing.

소개

This skill acts as a specialized design consultant for Claude, providing a rigorous framework for intentional and legible user interface design. It focuses on establishing clear visual hierarchy, consistent spacing scales, and restrained styling to transform basic UI into polished, production-grade products. By applying specific principles for typography contrast, color harmony, and interactive component states, the skill ensures that interfaces are not just functional, but professional, accessible, and aesthetically balanced.

주요 기능

Scalable Spacing Systems: Implements consistent 4px/8px grids to ensure vertical rhythm and harmony.
14 GitHub stars
Color Theory & Accessibility: Creates balanced neutral palettes with functional accent colors and high contrast.
Visual Hierarchy Optimization: Establishes clear focal points using weight, size, and proximity rules.
Typography Frameworks: Defines intentional font scales and letter-spacing for maximum readability.
Polished Component Design: Refines buttons, forms, and icons with consistent radii, shadows, and elevation.

사용 사례

Refining a rough CSS layout to look more professional and intentional during development.
Establishing a consistent design system and style guide for a new web application.
Improving UI accessibility and readability through expert color and typography adjustments.

소개

주요 기능

Scalable Spacing Systems: Implements consistent 4px/8px grids to ensure vertical rhythm and harmony.
14 GitHub stars
Color Theory & Accessibility: Creates balanced neutral palettes with functional accent colors and high contrast.
Visual Hierarchy Optimization: Establishes clear focal points using weight, size, and proximity rules.
Typography Frameworks: Defines intentional font scales and letter-spacing for maximum readability.
Polished Component Design: Refines buttons, forms, and icons with consistent radii, shadows, and elevation.

사용 사례

Refining a rough CSS layout to look more professional and intentional during development.
Establishing a consistent design system and style guide for a new web application.
Improving UI accessibility and readability through expert color and typography adjustments.