UI Research
Research before you design. Every time.
This skill ensures UI work is informed by real-world inspiration, modern patterns, and human-centered design - not generic AI output.
Essential Reference: See UI Inspiration Sources
When to Use This Skill
ALWAYS use before:
- Creating new UI components
- Designing landing pages
- Building dashboards or admin UIs
- Developing mobile app screens
- Any visual/frontend work
This skill is MANDATORY for quality UI work.
Research Workflow
Phase 1: Define (5 min)
Before searching, answer:
1. What am I building? (component, page, flow)
2. What platform? (web, iOS, Android, desktop)
3. What industry? (SaaS, e-commerce, fintech, etc.)
4. What feeling? (professional, playful, minimal, bold)
5. What constraints? (existing brand, tech stack, timeline)
Phase 2: Research (15-30 min)
Search Strategy:
# For each UI task, search at least 3 sources:
# 1. Real products (MOST IMPORTANT)
Search: Mobbin, UI Sources, Refero
Why: See how real companies solved this problem
# 2. Curated galleries
Search: Land-book, Awwwards, Godly
Why: High-quality, vetted designs
# 3. Component patterns
Search: shadcn/ui, Collect UI, Dribbble
Why: Specific UI element inspiration
Search Queries by Task:
| Building | Search Terms | | ------------ | --------------------------------------------------------- | | Dashboard | "analytics dashboard", "admin panel", "SaaS dashboard" | | Landing page | "[industry] landing page", "hero section", "pricing page" | | Mobile app | "[app type] iOS", "mobile [feature]", "[competitor] app" | | E-commerce | "product page", "checkout flow", "cart design" | | Auth flows | "login screen", "onboarding", "signup form" | | Settings | "settings page", "profile settings", "preferences" |
Phase 3: Collect (10 min)
Save 5-10 examples that resonate. For each, note:
URL/Source: [where you found it]
What works: [specific elements you like]
Patterns: [repeating solutions across examples]
Unique: [what makes this stand out]
Adapt: [how to apply to our project]
Phase 4: Analyze (10 min)
Pattern Recognition:
Common patterns across examples:
- Layout: [grid, spacing, hierarchy]
- Colors: [palette trends, contrast]
- Typography: [fonts, scale, weights]
- Components: [buttons, cards, forms]
- Interactions: [hover, transitions, feedback]
Quality Checklist:
- [ ] Found 3+ real shipped products (not concepts)
- [ ] Identified repeating patterns
- [ ] Noted unique differentiators
- [ ] Considered accessibility
- [ ] Checked mobile responsiveness
Phase 5: Design Brief (5 min)
Before implementing, document:
## UI Research Brief
### Inspiration Sources
- [Link 1]: [What to adopt]
- [Link 2]: [What to adopt]
- [Link 3]: [What to adopt]
### Key Patterns to Follow
- Layout: [specific approach]
- Color: [palette direction]
- Typography: [font choices]
- Components: [style decisions]
### Differentiation
- [What makes ours unique]
- [Brand personality elements]
### Technical Approach
- Component library: [shadcn/ui, etc.]
- Animation approach: [Framer Motion, CSS]
- Responsive strategy: [mobile-first, etc.]
Source Selection Guide
By Project Type
| Project | Primary Sources | Secondary | | ---------------- | ----------------------- | ----------------------- | | SaaS App | Mobbin, UI Sources | Land-book, shadcn/ui | | Landing Page | Land-book, Godly | Awwwards, One Page Love | | Mobile App | Mobbin, Screenlane | Pttrns, Apple HIG | | E-commerce | Baymard, Awwwards | Mobbin, UI Sources | | Dashboard | Dribbble, UI Sources | Ant Design, Tremor | | Portfolio | Awwwards, One Page Love | Godly, personal sites |
By Platform
| Platform | Required Research | | ------------------ | ------------------------------------ | | iOS | Apple HIG, Mobbin (iOS filter) | | Android | Material 3, Mobbin (Android filter) | | Web | Awwwards, Land-book, shadcn/ui | | Desktop | Fluent 2, platform-specific apps | | Cross-platform | All of the above, find common ground |
Avoiding the "AI Look"
Red Flags to Avoid
GENERIC AI PATTERNS (Don't do these):
- Blue/purple gradient backgrounds
- Perfectly symmetrical everything
- Generic blob/wave decorations
- Undraw-style illustrations
- "Hero with laptop mockup" layouts
- Default color schemes unchanged
- Cookie-cutter card grids
- Overused glassmorphism
Human Touch Elements
WHAT MAKES DESIGN FEEL HUMAN:
- Custom color palette with personality
- Intentional asymmetry
- Unique typography combinations
- Real photography or custom illustration
- Micro-interactions with character
- Subtle organic shapes
- Brand-specific details
- Thoughtful empty states
- Personality in copywriting
Quality Signals
| Aspect | Generic AI | Human-Polished | | ------------- | -------------- | -------------------------------- | | Color | Default blue | Custom brand palette | | Layout | Perfect grid | Intentional variation | | Images | Stock photos | Custom/curated imagery | | Copy | Lorem ipsum | Real, personality-rich text | | Animation | Standard fades | Purposeful, branded motion | | Details | None | Hover states, micro-interactions |
Research Tools
Browser Extensions
- Muzli - Design inspiration feed
- Panda - News and inspiration dashboard
- Stylify Me - Extract site colors/fonts
Screenshot Tools
- Full Page Screen Capture - Capture entire pages
- Awesome Screenshot - Annotate and save
Organization
- Figma - Create mood boards
- Notion - Document research
- Eagle - Visual bookmark manager
- Pinterest - Quick collection
Research Output Template
# UI Research: [Component/Page Name]
## Context
- **Building:** [what]
- **Platform:** [where]
- **Constraints:** [limitations]
## Inspiration (5-10 sources)
### 1. [Company/Site Name]
- **URL:** [link]
- **Screenshot:** [attached]
- **What works:** [specific elements]
- **Adopt:** [what to use]
### 2. [Company/Site Name]
...
## Pattern Analysis
### Layout
- [Common layout patterns observed]
### Color
- [Palette trends]
### Typography
- [Font and scale patterns]
### Components
- [UI element patterns]
## Design Direction
### Must Have
- [Non-negotiable elements]
### Nice to Have
- [Enhancement opportunities]
### Avoid
- [Anti-patterns to skip]
## Technical Stack
- **Components:** [library choice]
- **Styling:** [approach]
- **Animation:** [library/method]
Integration with Other Skills
After research, proceed to:
| Next Step | Skill to Use |
| --------------------- | ----------------------- |
| Visual implementation | frontend-enhancer |
| Design system setup | generic-design-system |
| UX flow design | generic-ux-designer |
| Animation work | ui-animation |
| Brand alignment | brand-identity |
Quick Start Checklist
Before ANY UI work:
- [ ] Defined what I'm building
- [ ] Searched 3+ inspiration sources
- [ ] Collected 5+ relevant examples
- [ ] Identified repeating patterns
- [ ] Noted unique differentiators
- [ ] Created brief design direction
- [ ] Checked for "AI look" red flags
- [ ] Planned human touch elements
See Also
- UI Inspiration Sources - Full source list with URLs
- Design Patterns - Visual design tokens
frontend-enhancer- For implementation after researchgeneric-design-system- For design system workgraphic-design- For visual design principles
Research is not optional. It's the difference between generic and exceptional.