elegant-design

Designing Elegant Interfaces

Philosophy

World-class design is intentional, accessible, and delightful. Every element serves a purpose, every interaction feels natural, and the experience adapts gracefully across contexts.

Core Principles:

• Clarity over cleverness - Users should never wonder what to do next
• Consistency over novelty - Patterns should repeat predictably
• Performance over features - Fast, smooth interactions trump visual complexity
• Accessibility always - Design for all users from the start
• Progressive disclosure - Reveal complexity only when needed
• Intentional friction - Make destructive actions harder, constructive actions effortless

When to Use This Skill

Use this skill when:

• Building web applications with React/Next.js/similar frameworks
• Creating developer tools or technical interfaces
• Designing interfaces with chat, terminals, or code display
• Implementing real-time or streaming features
• Ensuring accessibility and responsive design
• Working with shadcn/ui, daisyUI, or HeroUI design systems

Design Process Workflow

Follow this workflow for optimal results:

1. Discovery & Planning (15-30 min)

Map User Experience:

# Create flow diagrams with Graphviz
cat > user-flow.dot << 'EOF'
digraph UserFlow {
  Start -> "Observe State"
  "Observe State" -> "Orient Understanding"
  "Orient Understanding" -> "Decide Action"
  "Decide Action" -> "Act Execute"
  "Act Execute" -> "Observe State" [label="OODA loop"]
}
EOF

dot -Tpng user-flow.dot -o user-flow.png

OODA Loop Mapping: For each major user goal, optimize the cycle:

1. Observe - What information does the user need?
2. Orient - How do they make sense of it?
3. Decide - What choices are available?
4. Act - How do they execute?

Document States:

• Entry points (how users arrive)
• Core loops (repeated actions)
• Success states (goals achieved)
• Failure states (errors, recovery paths)
• Edge cases (empty, loading, error, extreme data)