arndvs/ux-get-inspired

UX Step 6.1 — Get Inspired from UI Patterns

Output "Read UX Get Inspired skill." to chat to acknowledge you read this file.

Phase: /ux-interface-design → Step 1 of 3

"Good artists copy, great artists steal."

Before sketching, gather inspiration from established products and UI pattern libraries. Create an "inspiration wall" of references for each screen type.

Process

1. For each screen in the flow, identify the screen type:

   • Landing/marketing page
   • List/directory/browse page
   • Detail/profile page
   • Form/creation page
   • Dashboard/overview page
   • Settings/admin page

2. Research relevant patterns:

   • What do admired products (competitors, best-in-class) do for this screen type?
   • What UI patterns are standard for this interaction? (filters, cards, tables, modals)
   • What component patterns apply? (navigation, search, forms, data display)

3. Generate inspiration reference:

## Inspiration Reference

### [Screen Name] — [Screen Type]

**Reference Products:**
- [Product 1] — [what to borrow: e.g., "card-based layout for browse"]
- [Product 2] — [what to borrow: e.g., "sidebar filter pattern"]

**Relevant UI Patterns:**
- [Pattern name] — [when to use: e.g., "faceted search for directory"]
- [Pattern name] — [when to use: e.g., "infinite scroll for content feed"]

**Key Components Needed:**
- [e.g., "Filter bar with pills/tags"]
- [e.g., "Member card snippet: avatar + name + skills"]

Rules

• Research before drawing — don't reinvent patterns that already work
• Focus on STRUCTURAL patterns, not visual styling
• Reference products users already know (reduces learning curve)
• Identify the component types before sketching layouts
• Don't copy whole pages — borrow individual components and patterns

Output

Start interface-design.md with Inspiration Reference section.