# UI Design

> Design clear, usable, and visually coherent user interfaces that support user goals and product quality. Use when creating or refining screens, layouts, component compositions, or visual hierarchy in digital products.

- Skill: `itsual/ui-design` (Agent Skill)
- Install (CLI): `npx skillmds@latest add itsual/ui-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/itsual/ui-design/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: itsual (https://skillmd.com/u/itsual)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/itsual/ui-design

---


# UI Design

## Overview

UI design turns requirements and flows into interfaces people can understand and use. Strong UI balances clarity, consistency, aesthetics, and efficiency.

## When to Use

- Designing new screens or features
- Improving existing interface quality
- Applying or extending a design system
- Preparing high-fidelity mockups for handoff

## Core Practices

- Establish clear visual hierarchy
- Use layout, spacing, and alignment deliberately
- Maintain consistency with the design system
- Design for the primary tasks first
- Consider states (empty, loading, error, success)
- Ensure interactive elements are obvious and accessible

## Principles

- Clarity over decoration
- Reduce cognitive load — don’t make users think unnecessarily
- Design for real content, not perfect placeholder text
- Support scanning; most users don’t read every word
- Align with platform conventions unless breaking them adds clear value

## Verification

- [ ] Primary actions are obvious
- [ ] Hierarchy guides the eye to what matters
- [ ] States and edge cases are designed, not only the happy path