UI/UX Design

Guide user interface and user experience design principles, patterns, and best practices.

7|1|Updated Jan 14, 2026
One-click install
npx skills add https://github.com/eyadsibai/ltk --skill ui-ux-design-eyadsibai
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: UI/UX Design
Source: https://github.com/eyadsibai/ltk/tree/main/plugins/ltk-design/skills/ui-ux
Command: npx skills add https://github.com/eyadsibai/ltk --skill ui-ux-design-eyadsibai

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides comprehensive guidance on designing user interfaces and experiences, ensuring products are intuitive, accessible, and visually appealing.

Core Features & Use Cases

  • Design Principles: Covers visual hierarchy, consistency, and feedback mechanisms.
  • Layout Patterns: Offers examples for cards, lists, and dashboards.
  • Component Design: Details best practices for buttons, forms, and navigation.
  • Responsive Design: Outlines strategies for adapting interfaces across devices.
  • Color & Typography: Provides guidelines for semantic color usage and typographic scales.
  • UX Patterns: Addresses empty states, loading states, and error handling.

Quick Start

Use the UI/UX Design skill to get guidance on creating a consistent visual hierarchy for a new web application.

Frequently Asked Questions about UI/UX Design

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

FAQPage Schema
What are the best practices for designing responsive layouts and dashboards?

Responsive layouts and dashboards require consistent visual hierarchy, strategic use of cards and lists, and adapting interface components across devices to ensure intuitive user experiences. Following established layout patterns ensures content scales effectively on any screen size.

How do I design effective empty states, loading states, and error handling?

Effective empty states, loading states, and error handling rely on clear feedback mechanisms and consistent UX patterns. Designing these states involves providing semantic color usage and typographic guidance to communicate system status and guide user actions.

How do I create a consistent visual hierarchy for a new web application?

To create a consistent visual hierarchy, apply design principles like visual consistency, clear feedback, and defined typographic scales. Structuring components such as buttons, forms, and navigation ensures users can easily scan and interact with the interface.

What guidelines should I follow for component design like buttons and forms?

Component design for buttons and forms should follow best practices for visual hierarchy, consistency, and user feedback. Detailing navigation and form components ensures the interface remains accessible, intuitive, and visually appealing across the application.

When do I need to establish a formal design system for wireframes and mockups?

You need a formal design system for wireframes and mockups when aiming to standardize component design, color usage, and typography. Establishing these principles ensures consistent visual hierarchy and cohesive user experiences across multiple interface layouts.