微信扫一扫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