---
description: Design inspiration resources - 60+ curated tools for mobile, web, and email UI/UX reference
mode: subagent
tools:
  read: true
  bash: true
  webfetch: true
  task: true
---

<!-- SPDX-License-Identifier: MIT -->
<!-- SPDX-FileCopyrightText: 2025-2026 Marcus Quinn -->

# Design Inspiration - UI/UX Reference Library

<!-- AI-CONTEXT-START -->

## Quick Reference

- **Purpose**: Find UI/UX design inspiration for mobile apps, web apps, browser extensions, and emails
- **DESIGN.md library**: `tools/design/library/` -- 54 brand DESIGN.md examples + 12 style archetypes (use directly or as starting points)
- **Usage**: Browse by category, use case, or platform to find reference designs
- **Workflow**: Search resources -> capture screenshots -> create mood board -> inform design decisions -> generate DESIGN.md
- **DESIGN.md format**: `tools/design/design-md.md` (create AI-readable design systems from inspiration)
- **Browser tools**: Use crawl4ai or Playwright to capture screenshots from these resources

**Quick picks by task**:

| Building... | Start With |
|-------------|-----------|
| Mobile app | Mobbin, Screenlane, Lookup Design |
| Web app / SaaS | Webframe, Refero Design, Godly |
| Landing page | Lapa Ninja, Land-book, One Page Love |
| Browser extension | Webframe (popup/sidebar patterns), Dribbble |
| Email templates | Really Good Emails, Email Love |
| Paywall / monetisation | PaywallPro, Mobbin (filter: paywall) |
| Onboarding flow | Mobbin (filter: onboarding), Page Flows |
| Dark mode | Dark Mode Design, Mobbin (filter: dark) |
| DESIGN.md examples | `tools/design/library/brands/` (54 real brands), `tools/design/library/styles/` (12 archetypes) |
| "Make it like X" | Copy from `library/brands/{brand}/DESIGN.md`, customise colours and typography |

<!-- AI-CONTEXT-END -->

## Mobile App Screenshot Libraries

| Resource | URL | Description | Pricing | Platform |
|----------|-----|-------------|---------|----------|
| **Mobbin** | https://mobbin.com | Largest searchable library of mobile and web app screenshots with flow context | Freemium ($14/mo) | Both |
| **Screenlane** | https://screenlane.com | Curated mobile app UI screenshot inspiration organised by UI element | Free | Mobile |
| **Page Flows** | https://pageflows.com | Recorded user flows with annotations from 2,000+ real products | Paid ($8-13/mo) | Both |
| **Pttrns** | https://pttrns.com | iPhone and iPad UI patterns organised by design pattern category | Freemium | Mobile |
| **UI Sources** | https://uisources.com | Real app interactions and animated UI flows for mobile design reference | Paid ($49 one-time) | Mobile |
| **Refero Design** | https://refero.design | Large collection of UX patterns and UI elements from great apps | Freemium ($15/mo) | Both |
| **ScreensDesign** | https://screensdesign.com | Screen-by-screen breakdowns of 1,500+ top iPhone apps | Freemium ($15/mo) | Mobile |
| **AppShots** | https://appshots.design | Screen recordings of app UX flows showing transitions and timing | Free | Mobile |
| **Scrnshts** | https://scrnshts.club | Hand-picked App Store and Play Store screenshots | Free | Mobile |
| **UX Archive** | https://uxarchive.com | Mobile UX pattern library with animated user flows by task | Free | Mobile |
| **Lookup Design** | https://lookup.design | Searchable library of mobile app UI components and screenshots | Free | Mobile |
| **UI Garage** | https://uigarage.net | Daily UI inspiration and patterns for mobile and web | Free | Both |
| **Collect UI** | https://collectui.com | Daily UI inspiration collection organised by component type | Free | Both |
| **Really Good UX** | https://reallygoodux.io | Annotated screenshots of great UX moments from real apps | Free | Mobile |
| **Calltoidea** | https://calltoidea.com | Searchable mobile and web UI design patterns by component | Free | Both |
| **Pablooo.club** | https://pablooo.club | Community-updated library of iOS, Android, and web app screenshots | Free | Both |
| **DesignVault** | https://designvault.io | UI interaction patterns from the world's best digital products | Freemium | Both |
| **PaywallPro** | https://paywallpro.app | 46,000+ iOS paywall screenshots and monetisation patterns | Paid ($47/mo) | Mobile |

## Web Design Galleries

| Resource | URL | Description | Pricing |
|----------|-----|-------------|---------|
| **Awwwards** | https://awwwards.com | Award-winning website design judged by professionals | Freemium |
| **Godly** | https://godly.website | Exceptional web design inspiration with motion previews | Free |
| **Siteinspire** | https://siteinspire.com | Curated showcase of fine web and interactive design | Free |
| **CSS Design Awards** | https://cssdesignawards.com | Website awards for exceptional CSS, UX, and UI | Free |
| **Httpster** | https://httpster.net | Radical, trendsetting website design showcase | Free |
| **Minimal Gallery** | https://minimal.gallery | Clean, minimal website design showcase | Free |
| **Webframe** | https://webframe.xyz | 800+ real web app screenshots by screen type (dashboards, settings, login) | Free |
| **Good Web Design** | https://goodweb.design | Modern web design patterns and page sections | Free |
| **Page Collective** | https://pagecollective.com | Beautifully designed web pages organised by section | Free |
| **Curated Design** | https://curated.design | Weekly curated gallery of the best web design | Free |
| **Nicely Done** | https://nicelydone.club | Hand-picked digital product and UI design inspiration | Freemium |
| **Dark Mode Design** | https://darkmodedesign.com | Beautiful dark mode app and website interfaces | Free |
| **Navbar Gallery** | https://navbar.gallery | Website navigation bar designs for reference | Free |

## Landing Page and SaaS Inspiration

| Resource | URL | Description | Pricing |
|----------|-----|-------------|---------|
| **Lapa Ninja** | https://lapa.ninja | 3,100+ landing page design examples updated daily | Free |
| **Land-book** | https://land-book.com | Best website and landing page designs across industries | Free |
| **One Page Love** | https://onepagelove.com | Ultimate one-page website design gallery and templates | Freemium |
| **SaaS Pages** | https://saaspages.xyz | 900+ best SaaS landing page designs with PNG exports | Free |
| **SaaS Landing Page** | https://saaslandingpage.com | 500+ SaaS landing page examples | Free |
| **Commerce Cream** | https://commercecream.com | Beautiful ecommerce website designs | Free |

## Email Design Inspiration

| Resource | URL | Description | Pricing |
|----------|-----|-------------|---------|
| **Really Good Emails** | https://reallygoodemails.com | Largest curated email design inspiration collection | Free |
| **Email Love** | https://emaillove.com | Email newsletter and marketing email design gallery | Free |

## General Design Platforms

| Resource | URL | Description | Pricing | Platform |
|----------|-----|-------------|---------|----------|
| **Dribbble** | https://dribbble.com | Global designer community for UI/UX shots and hiring | Freemium ($5/mo) | Both |
| **Behance** | https://behance.net | Adobe's creative portfolio platform | Free | Both |
| **Pinterest** | https://pinterest.com | Visual discovery engine for design inspiration boards | Free | Both |
| **Muzli** | https://muz.li | Browser new-tab extension aggregating design news daily | Free | Both |
| **Designspiration** | https://designspiration.com | Colour-searchable visual design inspiration | Freemium | Both |
| **Savee** | https://savee.it | Visual inspiration bookmarking for creatives | Free | Both |
| **UI Jar** | https://uijar.com | Hand-picked UI design inspiration for real projects | Free | Both |
| **UI Movement** | https://uimovement.com | UI animation and interaction design inspiration | Free | Both |
| **UISwipe** | https://uiswipe.com | Tinder-style swiping for web design inspiration | Free | Web |
| **uncoverLAB** | https://uncoverlab.co | Website components, app flows, and colour palettes | Freemium | Both |

## UX Education and Pattern Libraries

| Resource | URL | Description | Pricing |
|----------|-----|-------------|---------|
| **Growth.Design** | https://growth.design | UX case study teardowns in interactive comic-book format | Freemium ($39/mo) |
| **UI Patterns** | https://ui-patterns.com | Proven solutions to common UX problems | Free |
| **Apple HIG** | https://developer.apple.com/design/human-interface-guidelines | Official Apple design standards and components | Free |
| **Material Design** | https://m3.material.io | Google's design system with components and patterns | Free |
| **Refactoring UI** | https://refactoringui.com | Practical design knowledge for developers | Paid ($99+) |
| **Checklist Design** | https://checklistdesign.com | UX/UI best practices as checklists for common page types | Free |
| **Toools.design** | https://toools.design | Directory of 1,500+ design tools and resources | Free |

## Logo & Brand Identity Tools

| Resource | URL | Description | Pricing |
|----------|-----|-------------|---------|
| **Brandmark** | https://brandmark.io/ | AI logo maker -- generates logo, typography, and colour schemes from keywords | Freemium |
| **Looka** | https://looka.com/ | AI logo and brand kit generator with business card, social, and stationery mockups | Freemium |
| **Huemint** | https://huemint.com/ | AI colour for brand identity, logos, and web mockups | Free |

## Colour & Typography Tools

Interactive tools for generating palettes and font pairings. See also `tools/design/colour-palette.md` for the full palette workflow and CLI helper.

| Resource | URL | Description | Pricing |
|----------|-----|-------------|---------|
| **Colormind** | http://colormind.io/ | AI palette generation using deep learning trained on photos, film, and art | Free |
| **Colormind Bootstrap** | http://colormind.io/bootstrap/ | Live Bootstrap theme preview with AI-generated palettes | Free |
| **Colormind Dashboard** | http://colormind.io/template/paper-dashboard/ | Live dashboard template preview with AI palettes | Free |
| **Huemint** | https://huemint.com/ | AI colour for brand identity, logos, and web mockups | Free |
| **Fontjoy** | https://fontjoy.com/ | AI font pairing generator -- finds heading + body + accent combos | Free |
| **Poolors** | https://poolors.com/ | Discover unique colour combinations that stand out | Free |
| **Coolors** | https://coolors.co/ | Interactive palette generator with lock, shuffle, and export | Freemium |
| **Realtime Colors** | https://realtimecolors.com/ | See your palette applied to a live UI mockup instantly | Free |
| **Adobe Color** | https://color.adobe.com/ | Colour wheel, harmony rules, accessibility checker | Free |
| **Colour Hunt** | https://colorhunt.co/ | Community-curated palette collections | Free |
| **Happy Hues** | https://www.happyhues.co/ | Palettes shown in realistic UI context | Free |

## Design Resource Tools

| Resource | URL | Description | Pricing |
|----------|-----|-------------|---------|
| **UIHut** | https://uihut.com | 26,000+ premium UI design resources via Figma plugin | Freemium |
| **Figma Community** | https://figma.com/community | Shared design files, plugins, UI kits, and templates | Free |
| **Flowbase** | https://flowbase.co | Curated Webflow assets, templates, and components | Freemium |

## Research Workflow

### For Mobile App Design

1. **Search Mobbin** for your app category (e.g., "habit tracker", "finance")
2. **Study onboarding flows** of top-rated apps (Mobbin, Page Flows, AppShots)
3. **Analyse paywall designs** that convert (PaywallPro, Mobbin paywall filter)
4. **Capture screenshots** of patterns you like using browser tools
5. **Check Apple HIG / Material Design** for platform-specific guidelines
6. **Create a mood board** on Pinterest or Savee with collected references

### For Web App / Extension Design

1. **Search Webframe** for your screen type (dashboard, settings, login)
2. **Browse Godly / Awwwards** for cutting-edge design trends
3. **Check Dribbble** for specific component designs (modals, cards, navigation)
4. **Study SaaS Pages** for landing page patterns
5. **Review Dark Mode Design** if supporting dark theme

### For Email Design

1. **Browse Really Good Emails** filtered by email type (welcome, transactional, newsletter)
2. **Check Email Love** for newsletter design trends
3. **Use React Email** components to implement (see `tools/ui/react-email.md`)

## AI-Readable Design Systems (DESIGN.md)

For design systems that coding agents can read directly, see the **DESIGN.md library**:

- `tools/design/design-md.md` -- Format specification, creation workflows, usage guide
- `tools/design/library/brands/` -- 54 DESIGN.md files extracted from real websites (Stripe, Vercel, Linear, Apple, etc.)
- `tools/design/library/styles/` -- 12 original style archetypes (corporate, agency, startup, developer, editorial, luxury, playful)
- `tools/design/colour-palette.md` -- Palette generation and spinning for DESIGN.md files

Source: [VoltAgent/awesome-design-md](https://github.com/VoltAgent/awesome-design-md) (MIT License). Format: [Google Stitch DESIGN.md](https://stitch.withgoogle.com/docs/design-md/overview).

## Related

- `tools/design/design-md.md` - DESIGN.md format and generation workflows
- `tools/design/library/` - Design example library (brands + styles)
- `tools/design/colour-palette.md` - Palette generation and spinning
- `tools/design/brand-identity.md` - Strategic brand profile
- `tools/design/ui-ux-inspiration.md` - URL study and brand identity interview
- `product/ui-design.md` - Product design standards and principles
- `product/onboarding.md` - Onboarding flow design
- `product/monetisation.md` - Paywall design
- `tools/mobile/app-dev-assets.md` - Mobile asset generation (icons, screenshots, videos)
- `tools/browser/extension-dev.md` - Extension UI design considerations
- `tools/vision/overview.md` - AI image generation for custom assets
- `tools/browser/remotion-best-practices-skill.md` - Animated preview videos
- `tools/ui/tailwind-css.md` - Styling implementation
- `tools/ui/shadcn.md` - Component library
