← ClaudeAtlas

interface-designlisted

UI/UX design patterns for software. Trigger: When designing user interfaces, planning UX flows, or evaluating UI decisions.
joabgonzalez/ai-agents-skills · ★ 6 · AI & Automation · score 69
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