Inspo MCP

@Inspo find hero components with a left-aligned layout and large heading, then show me the design system tokens for the top match

Found 12 sites featuring left-aligned hero components. Top match: Vercel's homepage hero uses Inter at 72px/1.1 line-height, with a 16px container padding and 'hsl(0 0% 9%)' background. The palette centers on near-black (#0A0A0A) and a blue accent (#0070F3). Type scale: 14/16/20/24/32/48/72px. Border radius: 0/8/12px. Container max-width: 1280px. This example illustrates how Inspo extracts real design tokens from live sites—font stacks, spacing scales, and color roles—so you can see implementation details, not just screenshots.

This pairs two tools (find_components + get_design_system) to move from visual search to implementation detail. Design tokens are extracted from the live site at query time, so results reflect current state. No authentication required, but rate limits apply to the underlying site fetch—if a target site is slow or blocks scrapers, token extraction may time out.

@Inspo compare the macrostructure and color palettes of Linear, Notion, and Stripe—what design patterns do they share?

All three use a 'Split Hero' macrostructure (left text, right visual). Shared palette traits: near-black backgrounds (#0A0A0A to #111111), a single saturated accent (Linear: purple #5E6AD2, Notion: beige #E8DCC8, Stripe: indigo #635BFF), and 90%+ grayscale supporting colors. Typography: all deploy a geometric sans at 16px base with 1.5 line-height. Radius: 8-12px across cards and buttons. Container width: 1200-1280px. Divergence: Notion layers warmer neutrals; Stripe and Linear favor cooler grays. This triangulation shows how top SaaS brands converge on a 'calm, focused' aesthetic while differentiating through accent hue.

The compare tool synthesizes design decisions across multiple sites, surfacing both commonalities and divergences. Useful when a brief references competitor brands or asks 'what do best-in-class examples do?' Results depend on Inspo's corpus—if a site isn't indexed, it can't be compared. No side effects; this is read-only analysis.

@Inspo I need pricing section inspiration for a B2B SaaS with three tiers—find real examples and pull the reference component code for the closest match

Found 8 three-tier pricing sections. Closest match: a card-based layout with center emphasis (middle tier highlighted via border + shadow). Reference component 'pricing-cards-emphasized' includes JSX for the container grid, individual PricingCard with conditional styling, and a feature-list sub-component. Code uses Tailwind utilities: 'grid-cols-1 md:grid-cols-3', 'ring-2 ring-primary' for the highlighted tier, and 'space-y-4' for feature spacing. This example shows how Inspo bridges visual search (find real sites) with code retrieval (get canonical reference JSX), so you can see both the design pattern in the wild and a clean implementation starting point.

This workflow (find_components → find_reference_components → get_reference_jsx) moves from inspiration to code. The reference components are Inspo's curated archetypes, not literal copies of the found sites—they're generalized patterns. If you need the exact CSS from a specific site, use get_design_system instead. No auth required; reference code is MIT-licensed and safe to adapt.

How solo designers use Inspo to skip the mood board phase

A freelance product designer onboards a new client who says they want 'something like Stripe but warmer.' Instead of building a Pinterest board and waiting for feedback, the designer uses find_by_color to pull sites in the client's requested coral range, then find_similar to show Stripe's nearest design neighbors that skew friendlier. The compare tool breaks down what Stripe, Linear, and Notion share in type scale and spacing, which becomes the baseline proposal. The client approves a direction in one async Loom instead of three revision rounds. This works for designers who bill hourly and can't afford to spend 4-6 hours on speculative mood boards. The threshold: if your clients already come with detailed brand guidelines and a reference site list, Inspo is overkill. If you're frequently starting from a vague verbal brief, this MCP turns discovery from a multi-day back-and-forth into a single-call decision.