design-inspiration
Curated collection of top-tier website designs organized by category, style, and pattern. Includes SaaS, marketing, e-commerce, and portfolio sites with analysis of what makes them effective. Use when looking for design inspiration or examples of specific patterns.
When & Why to Use This Skill
The Design Inspiration skill is a comprehensive resource for UI/UX designers and web developers, offering a curated collection of top-tier website designs across SaaS, e-commerce, and marketing sectors. It provides deep insights into effective design patterns—such as hero sections, pricing tables, and navigation—alongside technical specifications like CSS color palettes and typography scales to streamline the creative and development workflow.
Use Cases
- Competitor Design Analysis: Research and compare the visual strategies of industry leaders like Stripe, Linear, and Apple to identify high-performing design trends.
- UI Pattern Implementation: Access a library of proven layouts for complex components like multi-tier pricing tables, mega menus, and social proof grids.
- Rapid Prototyping: Use pre-defined modular typography scales and 8pt spacing systems to quickly establish a professional visual hierarchy for new projects.
- Landing Page Optimization: Reference curated examples of high-converting SaaS and marketing sites to improve call-to-action placement and hero section impact.
- Brand Style Development: Explore diverse color palettes (Dark Mode, Light SaaS, Warm & Friendly) to define the visual identity of a digital product.
| name | design-inspiration |
|---|---|
| description | Curated collection of top-tier website designs organized by category, style, and pattern. Includes SaaS, marketing, e-commerce, and portfolio sites with analysis of what makes them effective. Use when looking for design inspiration or examples of specific patterns. |
| allowed-tools | Read, Write, Edit, Grep, Glob, mcp__playwright |
Design Inspiration
Purpose: Provide curated design inspiration and patterns from top-tier websites to inform design decisions.
Activation Triggers:
- Looking for design inspiration
- Researching competitors
- Finding examples of specific patterns
- Building landing pages
- Designing SaaS dashboards
- Creating marketing sites
Curated Site Collections
🚀 SaaS & Product Sites
Minimal & Clean
| Site | Why It's Great | Key Patterns |
|---|---|---|
| linear.app | Dark mode, smooth animations, developer-focused | Sticky nav, product screenshots, keyboard shortcuts showcase |
| raycast.com | macOS-native feel, premium aesthetic | Command palette hero, extension gallery, dark theme |
| arc.net | Bold typography, playful illustrations | Split hero, waitlist CTA, feature cards |
| height.app | Gradient mesh backgrounds, clean UI | Animated hero, timeline feature display |
Enterprise & Trust
| Site | Why It's Great | Key Patterns |
|---|---|---|
| stripe.com | Premium feel, gradient accents, developer trust | API code samples, globe animation, pricing table |
| vercel.com | Speed-focused messaging, dark mode | Edge network visualization, framework logos, deploy button |
| planetscale.com | Database-specific messaging, technical credibility | Schema visualization, branching explanation |
| supabase.com | Open source trust, feature comparison | GitHub stats, pricing comparison, real-time demo |
Friendly & Approachable
| Site | Why It's Great | Key Patterns |
|---|---|---|
| notion.so | Warm, template-focused, community | Template gallery, use case tabs, team testimonials |
| slack.com | Playful illustrations, channel demos | Product demo GIFs, enterprise logos, integration grid |
| airtable.com | Colorful, template gallery | Universe showcase, formula builder, view switcher |
| figma.com | Creative, collaborative focus | Real-time cursor demo, plugin showcase, community |
💼 Marketing & Agency Sites
Bold & Creative
| Site | Why It's Great | Key Patterns |
|---|---|---|
| apple.com | Minimal, product-focused, premium | Large product photography, scroll animations, comparison tables |
| spotify.com | Duotone colors, music-focused | Artist features, playlist cards, year-wrapped style |
| airbnb.com | Photography-driven, human warmth | Search hero, experience cards, host stories |
| mailchimp.com | Quirky illustrations, yellow brand | Freddie mascot, feature illustrations, pricing clarity |
Professional & Corporate
| Site | Why It's Great | Key Patterns |
|---|---|---|
| hubspot.com | Orange accent, clear value prop | Product suite tabs, ROI calculator, case studies |
| salesforce.com | Enterprise trust, cloud imagery | Trailhead learning, industry solutions, character mascots |
| zendesk.com | Green accent, support-focused | Product demos, customer logos, pricing tiers |
🛒 E-commerce & Marketplace
| Site | Why It's Great | Key Patterns |
|---|---|---|
| shopify.com | Merchant success focus, green brand | Store examples, pricing clarity, 14-day trial |
| gumroad.com | Creator-focused, simple pricing | Fee transparency, creator testimonials, product cards |
| lemonsqueezy.com | Modern e-commerce, yellow brand | Dashboard preview, global payments, tax handling |
🎨 Design Tools & Resources
| Site | Why It's Great | Key Patterns |
|---|---|---|
| ui.shadcn.com | Component documentation, copy-paste | Code previews, theme customizer, installation steps |
| tailwindui.com | Premium components, preview grid | Category organization, responsive previews, code tabs |
| framer.com | Motion-focused, template gallery | Site builder demo, animation examples, pricing |
| webflow.com | Visual builder, template showcase | Interactions demo, CMS explanation, university |
📊 Analytics & Data
| Site | Why It's Great | Key Patterns |
|---|---|---|
| plausible.io | Privacy-focused, simple dashboard | Live demo, GDPR compliance, open source |
| posthog.com | All-in-one analytics, hedgehog brand | Product suite, self-host option, pricing calculator |
| mixpanel.com | Event analytics, funnel visualization | Dashboard demos, integration logos, case studies |
Design Patterns Library
Hero Section Patterns
1. Split Hero (Text + Image)
┌─────────────────────────────────────────┐
│ ┌──────────────┐ ┌──────────────────┐ │
│ │ Badge │ │ │ │
│ │ Headline │ │ Product Image │ │
│ │ Subheadline │ │ or Screenshot │ │
│ │ [CTA] [CTA] │ │ │ │
│ │ Trust text │ │ │ │
│ └──────────────┘ └──────────────────┘ │
└─────────────────────────────────────────┘
Used by: Notion, Slack, Airtable
2. Centered Hero
┌─────────────────────────────────────────┐
│ Badge │
│ Headline │
│ Subheadline │
│ [CTA] [CTA] │
│ Trust logos │
│ │
│ ┌─────────────────┐ │
│ │ Product Preview │ │
│ └─────────────────┘ │
└─────────────────────────────────────────┘
Used by: Linear, Vercel, Stripe
3. Full-Width Hero with Video
┌─────────────────────────────────────────┐
│ ╔═══════════════════════════════════════╗
│ ║ Background Video/Animation ║
│ ║ ║
│ ║ Headline ║
│ ║ Subheadline ║
│ ║ [CTA] ║
│ ╚═══════════════════════════════════════╝
└─────────────────────────────────────────┘
Used by: Apple, Spotify, Tesla
Navigation Patterns
1. Minimal Nav
┌─────────────────────────────────────────┐
│ Logo Links [CTA] │
└─────────────────────────────────────────┘
2. Mega Menu Nav
┌─────────────────────────────────────────┐
│ Logo Products ▼ Resources ▼ [CTA] │
├─────────────────────────────────────────┤
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │ Feature 1│ │ Feature 2│ │ Feature 3│ │
│ │ Desc │ │ Desc │ │ Desc │ │
│ └──────────┘ └──────────┘ └──────────┘ │
└─────────────────────────────────────────┘
Pricing Patterns
1. Three-Tier Pricing
┌────────────┐ ┌────────────┐ ┌────────────┐
│ Starter │ │ Pro │ │ Enterprise │
│ │ │ POPULAR │ │ │
│ $29/mo │ │ $79/mo │ │ Contact │
│ │ │ │ │ │
│ ✓ Feature │ │ ✓ Feature │ │ ✓ Feature │
│ ✓ Feature │ │ ✓ Feature │ │ ✓ Feature │
│ │ │ ✓ Feature │ │ ✓ Feature │
│ │ │ │ │ ✓ Feature │
│ [Start] │ │ [Start] │ │ [Contact] │
└────────────┘ └────────────┘ └────────────┘
2. Usage-Based Pricing
┌─────────────────────────────────────────┐
│ Monthly API Calls │
│ ──────────●──────────────── │
│ 10,000 calls │
│ │
│ Estimated: $49/month │
│ [Get Started] │
└─────────────────────────────────────────┘
Social Proof Patterns
1. Logo Cloud
Trusted by teams at:
[Logo] [Logo] [Logo] [Logo] [Logo]
2. Stats Bar
┌──────────┬──────────┬──────────┬──────────┐
│ 50K+ │ 1M+ │ 99.9% │ 4.9/5 │
│ Users │ Pages │ Uptime │ Rating │
└──────────┴──────────┴──────────┴──────────┘
3. Testimonial Grid
┌────────────┐ ┌────────────┐ ┌────────────┐
│ ★★★★★ │ │ ★★★★★ │ │ ★★★★★ │
│ "Quote..." │ │ "Quote..." │ │ "Quote..." │
│ │ │ │ │ │
│ 👤 Name │ │ 👤 Name │ │ 👤 Name │
│ Title, Co │ │ Title, Co │ │ Title, Co │
└────────────┘ └────────────┘ └────────────┘
Color Palettes by Style
Dark Mode (Developer)
--background: hsl(0 0% 4%); /* #0a0a0a */
--foreground: hsl(0 0% 98%); /* #fafafa */
--primary: hsl(217 91% 60%); /* #3b82f6 */
--muted: hsl(0 0% 15%); /* #262626 */
--border: hsl(0 0% 20%); /* #333333 */
Light Mode (SaaS)
--background: hsl(0 0% 100%); /* #ffffff */
--foreground: hsl(222 47% 11%); /* #0f172a */
--primary: hsl(221 83% 53%); /* #2563eb */
--muted: hsl(210 40% 96%); /* #f1f5f9 */
--border: hsl(214 32% 91%); /* #e2e8f0 */
Warm & Friendly
--background: hsl(30 50% 98%); /* #fefcfa */
--foreground: hsl(20 14% 20%); /* #3d3531 */
--primary: hsl(25 95% 53%); /* #f97316 */
--muted: hsl(30 25% 93%); /* #f5efe8 */
--accent: hsl(47 96% 53%); /* #facc15 */
Typography Scales
Modular Scale 1.25 (Minor Third)
--text-xs: 0.64rem; /* 10.24px */
--text-sm: 0.8rem; /* 12.8px */
--text-base: 1rem; /* 16px */
--text-lg: 1.25rem; /* 20px */
--text-xl: 1.563rem; /* 25px */
--text-2xl: 1.953rem; /* 31.25px */
--text-3xl: 2.441rem; /* 39px */
--text-4xl: 3.052rem; /* 48.8px */
Modular Scale 1.333 (Perfect Fourth)
--text-sm: 0.75rem; /* 12px */
--text-base: 1rem; /* 16px */
--text-lg: 1.333rem; /* 21.3px */
--text-xl: 1.777rem; /* 28.4px */
--text-2xl: 2.369rem; /* 37.9px */
--text-3xl: 3.157rem; /* 50.5px */
--text-4xl: 4.209rem; /* 67.3px */
Spacing Systems
8pt Grid
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-6: 1.5rem; /* 24px */
--space-8: 2rem; /* 32px */
--space-12: 3rem; /* 48px */
--space-16: 4rem; /* 64px */
--space-24: 6rem; /* 96px */
--space-32: 8rem; /* 128px */
Section Spacing
/* Desktop */
--section-padding: 7.5rem; /* 120px */
/* Tablet */
--section-padding: 5rem; /* 80px */
/* Mobile */
--section-padding: 4rem; /* 64px */
Using This Skill
# Load the skill
!{skill design-inspiration}
# Analyze a specific site
/analyze-design https://linear.app
# Compare multiple sites
/analyze-design https://vercel.com --compare https://stripe.com
# Apply patterns to your project
/build-landing-page homepage --saas