ui-ux-design-system

Create design tokens, typography scales, and reusable UI components.

Updated May 23, 2024
One-click install
npx skills add https://github.com/thependalorian/porfolio --skill ui-ux-design-system
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui-ux-design-system
Source: https://github.com/thependalorian/porfolio/tree/main/.claude/skills/ui-ux-design-system
Command: npx skills add https://github.com/thependalorian/porfolio --skill ui-ux-design-system

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill provides comprehensive guidance on creating beautiful, psychology-driven UI/UX designs based on proven psychological principles and design best practices.

Core Features & Use Cases

  • Guidance on psychology laws (Fitt's Law, Hick's Law, Miller's Law, Jakob's Law, Gestalt Principles, and the Doherty Threshold) to inform interface behavior and layout.
  • Design tokens, typography scaling, color systems, spacing, and component patterns for scalable design.
  • Accessibility and mobile-first best practices, with checklists and practical implementation guidance.

Quick Start

Create a starter design token set and a minimal component library for a new UI project.

Frequently Asked Questions about ui-ux-design-system

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a UI design system that meets WCAG AA accessibility standards?

To create a UI design system meeting WCAG AA accessibility standards, apply modular design patterns, mobile-first best practices, and practical checklists to ensure accessible color systems, typography scaling, and component behavior across web interfaces.

What psychology principles should I apply to UI design for better user experience?

Psychology principles to apply to UI design include Fitt's Law, Hick's Law, Miller's Law, Jakob's Law, Gestalt Principles, and the Doherty Threshold, which inform interface behavior, layout decisions, and interaction timing to create beautiful, psychology-driven UX designs.

How do I set up design tokens and typography scales for a scalable component library?

Setting up design tokens and typography scales for a scalable component library involves defining modular design patterns for spacing, color systems, and typography that enable consistent, reusable components across responsive web interfaces.

What's the best way to structure a responsive design system for mobile-first interfaces?

The best way to structure a responsive design system for mobile-first interfaces is to utilize modular design patterns, scalable design tokens, and accessibility checklists that ensure consistent UI components and layout behavior across varying screen sizes.

Can I use psychology laws to improve UI component behavior and layout?

Yes, you can use psychology laws like Fitt's Law and Hick's Law to improve UI component behavior and layout by informing interaction target sizing, decision time reduction, and cognitive load management based on proven psychological principles.

Why does my UI design system lack consistency across different web interfaces?

Your UI design system lacks consistency across web interfaces if it lacks standardized design tokens, a unified typography scale, defined color systems, and modular component patterns that enforce scalable, psychology-driven design best practices.