Can it generate design tokens for my project?

Yes, it provides structured CSS/design tokens for colors, typography scales, spacing units, and border radii to ensure systemic consistency.

Does this skill support accessibility standards?

Yes, it enforces WCAG AA contrast ratios, keyboard-visible focus indicators, and ensures that status information is never conveyed by color alone.

How does this skill help with developer handoff?

It ensures every UI component is documented with all interactive states, design tokens, and spacing rules, removing implementation ambiguity for developers.

How does it avoid the 'generic AI look' in designs?

The skill mandates a discovery phase and explores diverse design spectrums—such as varying density, era, and weight—rather than simple color variations.

UI Design Principles

Name: UI Design Principles
Author: jagreehal

byjagreehal

Herramientas de Diseño

Generates distinctive, production-ready user interfaces by applying rigorous design system principles and documented interactive states.

Acerca de

This skill empowers Claude to move beyond generic UI templates by enforcing a research-driven approach to design. It guides the creation of distinctive visual identities, ensures all component states like hover, focus, and loading are fully documented for developers, and embeds accessibility requirements directly into the design process. By prioritizing context before design and 'showing rather than telling,' it provides comprehensive, implementation-ready specifications that reduce friction between design and development.

Características Principales

Structured design system tokens for color, typography, and spacing
WCAG-compliant accessibility standards with multi-indicator error states
Context-driven discovery phase to align design with strategic product goals
Diverse visual exploration across opposite ends of design spectrums
0 GitHub stars
Full documentation of all interactive states (hover, focus, disabled, loading)

Casos de Uso

Ensuring accessibility and keyboard navigation compliance in frontend projects
Building a distinctive design system for a new SaaS or developer tool
Creating implementation-ready specifications for complex UI components

Acerca de

Características Principales

Structured design system tokens for color, typography, and spacing
WCAG-compliant accessibility standards with multi-indicator error states
Context-driven discovery phase to align design with strategic product goals
Diverse visual exploration across opposite ends of design spectrums
0 GitHub stars
Full documentation of all interactive states (hover, focus, disabled, loading)

Casos de Uso

Ensuring accessibility and keyboard navigation compliance in frontend projects
Building a distinctive design system for a new SaaS or developer tool
Creating implementation-ready specifications for complex UI components