What resources does the skill use for its advice?

The skill utilizes dedicated resources for design principles and a comprehensive UI checklist to ensure every recommendation is grounded in industry best practices.

Can it help me learn design theory while I code?

Yes, it uses an 'Analytic & Constructive' style that explains the 'why' behind design decisions using principles like Contrast, Repetition, Alignment, and Proximity.

Does it support specific CSS frameworks?

While it understands general CSS, it is highly optimized for Tailwind CSS, providing specific classes and implementation patterns for modern web development.

How does this skill help with web accessibility?

The skill references WCAG contrast ratios and accessibility checklists to ensure that color palettes and typography are legible and inclusive for all users.

Graphic Design & UI Expert

Name: Graphic Design & UI Expert
Author: Beerspitnight

byBeerspitnight

Design Tools

Empowers developers with professional UI/UX guidance, typography strategies, and design-to-code implementation patterns.

About

This skill transforms Claude into a Senior Product Designer capable of auditing layouts, generating accessible color palettes, and optimizing typography. It is particularly useful for developers who need to translate complex visual concepts into production-ready CSS or Tailwind code while adhering to established design principles like CRAP (Contrast, Repetition, Alignment, Proximity) and WCAG accessibility standards. By bridging the gap between design theory and technical implementation, it ensures that every UI component is both aesthetically pleasing and functional.

Key Features

0 GitHub stars
Design audits based on industry-standard UI checklists
Layout strategy guidance using professional design axioms
Typography and visual hierarchy optimization
WCAG-compliant color palette generation
Direct conversion of design concepts to Tailwind CSS or React

Use Cases

Generating a cohesive and accessible color scheme for a new web application
Critiquing an existing UI component for improved usability and balance
Translating a descriptive layout concept into responsive, production-ready code

About

Key Features

0 GitHub stars
Design audits based on industry-standard UI checklists
Layout strategy guidance using professional design axioms
Typography and visual hierarchy optimization
WCAG-compliant color palette generation
Direct conversion of design concepts to Tailwind CSS or React

Use Cases

Generating a cohesive and accessible color scheme for a new web application
Critiquing an existing UI component for improved usability and balance
Translating a descriptive layout concept into responsive, production-ready code