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

0•

デザインツール

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

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.

主な機能

01Structured design system tokens for color, typography, and spacing

02WCAG-compliant accessibility standards with multi-indicator error states

03Context-driven discovery phase to align design with strategic product goals

04Diverse visual exploration across opposite ends of design spectrums

050 GitHub stars

06Full documentation of all interactive states (hover, focus, disabled, loading)

ユースケース

01Ensuring accessibility and keyboard navigation compliance in frontend projects

02Building a distinctive design system for a new SaaS or developer tool

03Creating implementation-ready specifications for complex UI components

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add jagreehal/jagreehal-claude-skills ui-design-principles

For use in Claude.ai and ChatGPT

Download Skill