# Wearable Design

> Designing for smartwatches and wearable devices, glanceable UX, and small screen constraints.

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

---


# Wearable Design

## Constraints
- Screen: ~40mm, round or square
- Interaction: taps, swipe, crown/bezel, voice
- Session: 3-5 seconds (glance, not browse)
- Context: active, on-the-go, hands may be occupied

## Design Principles
1. **Glanceable:** Information in 2-3 seconds
2. **Actionable:** One tap to the most common action
3. **Minimal:** One piece of information per screen
4. **Timely:** Show what's relevant NOW

## UI Patterns
- **Notification:** Title + 1 line body + 1-2 action buttons
- **Complication:** Single metric on watch face (step count, weather)
- **List:** Short scrollable list (5-10 items max)
- **Detail:** Headline + key info + action

## Typography
- System font (SF Compact for Apple Watch)
- Large: 20-34pt for primary info
- Body: 15-17pt minimum
- No more than 2 font sizes per screen

## Don'ts
- Don't replicate the phone app
- Don't require typing (use voice or preset responses)
- Don't show more than 3-5 items in a list
- Don't use light colors on bright outdoor screens