majiayu000/claude-arsenal
xiaohongshu
xiaohongshu
286 148
View 
Design Inspiration
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.
SKILL.md
Full skill instructions
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
More skills from majiayu000
majiayu000/claude-arsenal
technical-spec
technical spec
286 141
View majiayu000/claude-arsenal
product-ux-expert
product ux expert
286 133
View majiayu000/claude-arsenal
database-patterns
database patterns
286 119
View majiayu000/claude-skill-registry
agent-task-conductor
Conduct multi-agent task orchestration and workflow coordination.
663 1
View majiayu000/claude-skill-registry
conductor-setup
Initialize project with Conductor artifacts (product definition,
663 1
View majiayu000/claude-skill-registry
animation-designer
Expert in web animations, transitions, and motion design using Framer Motion and CSS
663 1
View majiayu000/claude-skill-registry
diagramming
Creates Mermaid and ASCII diagrams for flowcharts, architecture, ERDs, state machines, mindmaps, and more. Use when user mentions diagram, flowchart, mermaid, ASCII diagram, text diagram, terminal diagram, visualize, C4, mindmap, architecture diagram, sequence diagram, ERD, or needs visual docume...
663 1
View majiayu000/claude-skill-registry-data
h3-pg
PostgreSQL bindings for H3 hexagonal grid system. Use when working with H3 cells in Postgres, including spatial indexing, geometry/geography integration, and raster analysis.
23 1
View majiayu000/claude-skill-registry
conductor-development
Context-Driven Development skill for projects using Conductor. Use this skill when you detect a `conductor/` directory in the project, when working on tasks defined in a `plan.md` file, or when the user asks about tracks, specs, or plans. Automatically applies TDD workflow, tracks task completion...
663 1
View majiayu000/claude-skill-registry
conductor-status
Display project status, active tracks, and next actions
663 1
View majiayu000/claude-skill-registry
dockerization
Official Stakpak application containerization standard operating procedure, a step-by-step guidline to properly dockerize applications. This is a rule book curated by the Stakpak Team.
663 1
View Popular AI tools
Video
Kaiber
Generate, edit, and beat-sync AI video with leading models in one workspace.
Paid
View Productivity
Vimcal
The world's fastest calendar for remote work
Free
View Images
IMGCreator.ai
Transform Your Design with AI Designer by ImgCreator.ai
Freemium
View Content & writing
Akool AI
Revolutionizing Video Production with AI-Powered Creativity
Paid
View Images
Clipdrop Uncrop
Extend an image past the frame and let AI fill the new aspect ratio.
Freemium
View Security
StarByFace
Discover your celebrity doppelgänger with StarByFace!
Free
View C
Finance
ChainClarity
ChainClarity explains 700+ crypto whitepapers in plain English, with layered summaries, comparisons, research tools, alerts, and a $4.99 Pro plan.
Freemium
View Coding & apps
Opus Clip
Opus.ai: Revolutionize Your Web Experience
Free
View