# UI Design

> Create user interfaces that are visually appealing, intuitive, and functional. Use when this capability is needed.

- Skill: `tomevault-io/ui-design-9` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/ui-design-9`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/ui-design-9/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/ui-design-9

---


# UI Design Skill

## Purpose
Create user interfaces that are visually appealing, intuitive, and functional.

## Design Principles

### 1. Hierarchy
Guide users through content with visual importance.
- Size: Larger = more important
- Color: Bold/saturated = more important
- Space: More whitespace = more important

### 2. Consistency
Use consistent patterns throughout.
- Same colors mean same things
- Same components behave the same
- Predictable layouts

### 3. Feedback
Respond to user actions.
- Hover states on interactive elements
- Loading indicators for async operations
- Success/error messages for actions

### 4. Simplicity
Remove unnecessary elements.
- Every element should serve a purpose
- Reduce cognitive load
- Progressive disclosure for complexity

## Color Usage

| Color | Typical Use |
|-------|-------------|
| Primary | Main actions, branding |
| Secondary | Supporting actions |
| Success | Positive feedback (green) |
| Warning | Caution (yellow/orange) |
| Error | Problems (red) |
| Neutral | Text, backgrounds, borders |

## Typography

- **Headlines** - Large, bold, limited use
- **Body** - Readable, 16px minimum
- **Captions** - Small, secondary information
- **Line Height** - 1.5 for body text

## Spacing System

Use consistent spacing scale:
`4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px`

## Component Checklist

- [ ] Has visible focus state
- [ ] Has hover state (if interactive)
- [ ] Has disabled state
- [ ] Works with keyboard
- [ ] Has appropriate contrast

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/hffmnnj) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-11 -->