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

•

Design Tools

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.

Key Features

01Scalable Spacing Systems: Implements consistent 4px/8px grids to ensure vertical rhythm and harmony.

0214 GitHub stars

03Color Theory & Accessibility: Creates balanced neutral palettes with functional accent colors and high contrast.

04Visual Hierarchy Optimization: Establishes clear focal points using weight, size, and proximity rules.

05Typography Frameworks: Defines intentional font scales and letter-spacing for maximum readability.

06Polished Component Design: Refines buttons, forms, and icons with consistent radii, shadows, and elevation.

Use Cases

01Refining a rough CSS layout to look more professional and intentional during development.

02Establishing a consistent design system and style guide for a new web application.

03Improving UI accessibility and readability through expert color and typography adjustments.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add mintuz/claude-plugins web-design

For use in Claude.ai and ChatGPT

Download Skill