interface-designlisted
Install: claude install-skill joabgonzalez/ai-agents-skills
# Interface Design
Plan UI with intentional aesthetic direction, user flows, component hierarchy, and visual system. Design decisions before implementation.
## When to Use
- Planning UI for a new feature or page
- Designing user flows and interactions
- Evaluating UI/UX decisions
- Building wireframes or component hierarchies
- User asks "how should this look?" or "what's the best UX for X?"
Don't use for:
- Implementation (react, mui, css skills)
- Accessibility (a11y)
- Backend APIs (architecture-patterns)
---
## Critical Patterns
### ✅ REQUIRED: Commit to a Bold Aesthetic Direction
Before writing any UI code, define a clear conceptual direction and commit to it.
```markdown
## Aesthetic Direction
**Purpose**: What problem does this interface solve? Who uses it?
**Domain**: 5+ concepts, metaphors, or vocabulary from this product's world
**Color world**: 5+ colors that exist naturally in this domain's physical space
**Tone**: Pick ONE — brutally minimal, maximalist, editorial, luxury, brutalist,
retro-futuristic, soft/pastel, industrial, organic... commit to an extreme.
**Differentiation**: What's the one element that could only exist for THIS product?
**Defaults rejected**: Three obvious patterns you're explicitly not doing.
```
"Bold maximalism and refined minimalism both work — the key is intentionality, not intensity."
**Typography**: choose distinctive, characterful faces over generic defaults.
**Color**: a palette that feels like it came FROM the