Inspo

nutlope/inspo

Real production websites for coding agents: palettes, fonts, fold autopsies and reference JSX.

GitHub stars: 979
tools: 15
auth: Secret needed
transport: STDIO, HTTP
env vars: 5
last updated: Sep 14, 2026

View on GitHub

Install

From registry metadata

$ npx add-mcp https://inspomcp.dev/api/mcp --name inspo

Run in your terminal. add-mcp asks which agents to add it to (Claude Code, Codex, Cursor and more). Add -g to install it for every project.

Review the command, arguments and environment values before installing. MCP servers run with your local permissions.

Other ways

Claude Code

$ claude mcp add --transport http inspo https://inspomcp.dev/api/mcp

Run in your terminal. Add --scope user to make it available in every project.

Tools

Verified live · 15 tools

Verified live against the running server on Nov 13, 2026.

search_screensSearch the archive of real website screenshots. Returns screens with palette, fonts, components and image URLs.15 params

Search the archive of real website screenshots. Returns screens with palette, fonts, components and image URLs.

Parameters* required

accentHuestring

Accent temperature: 'warm' (10-60°), 'cool' (200-300°), 'neutral' (unsaturated), 'chromatic-other' (greens, magentas, everything else).one of warm · cool · neutral · chromatic-other

colorstring

Color word - 'warm', 'cool', 'monochrome', 'neon', 'earthy'one of warm · cool · monochrome · neon · earthy · pastel

detailstring

'standard' (default): northstar, palette, fonts, axes, macro and tags per row, plus the fold-by-fold autopsy on the top 3. 'full': the autopsy on every row (~300 tokens each; only if you will read...one of concise · standard · full

devicestring

'mobile' restricts to sites with a 375px capture pair and inlines the mobile thumbnail. Default: desktop.one of desktop · mobile

displayClassstring

Construction of the display face: 'grotesk-sans', 'geometric-sans', 'roman-serif', 'mono', 'display-condensed-bold', etc.one of grotesk-sans · geometric-sans · roman-serif · italic-serif · slab-serif · mono

industrystring

Filter to one industry (e.g. 'saas', 'fintech', 'portfolio')one of agency · ai · architecture · automotive · consumer-tech · creator

limitinteger

default: 6

macrostructurestring

Filter to a macrostructure (e.g. 'bento-grid')one of bento-grid · long-document · marquee-hero · stat-led · conversational-faq · manifesto

maxTokensinteger

Approximate token ceiling for this response. Trims lower-ranked results and thumbnails; the top result and all URLs survive.

modestring

light or darkone of light · dark

pageTypestring

Filter to a page kind: 'landing' (default homepages), 'pricing', 'features', 'auth', 'about', 'blog', 'changelog', 'docs', 'other'one of landing · pricing · features · auth · about · blog

paperBandstring

Surface lightness, measured from the capture: 'dark' (<30% L), 'mid' (30-85%), 'light' (>85%). More reliable than `mode`, which is tagged and disagrees with the measurement on ~15% of rows.one of dark · mid · light

querystring

Natural-language description of what you're looking for. e.g. 'minimalist editorial agency portfolio'default:

stylestring

Filter to one visual style (e.g. 'minimalism', 'editorial')one of minimalism · editorial · brutalism · glassmorphism · swiss · maximalism

vibestring

Mood / vibe - 'calm', 'loud', 'luxe', 'technical', 'soft', etc.one of calm · loud · playful · serious · luxe · raw

get_screenFetch the full record for one screen by slug - every viewport variant, palette, fonts, tech stack, designer credit.1 params

Fetch the full record for one screen by slug - every viewport variant, palette, fonts, tech stack, designer credit.

Parameters* required

slug*string

Screen slug, e.g. 'atelier-mira'

get_design_systemThe full DESIGN.md for one screen - real fonts, frequency-ranked palette, CSS variables, detected tech, colour roles, type ramp. Thin captured tokens are supplemented by a live fetch of the source; `live=false` skips that.2 params

The full DESIGN.md for one screen - real fonts, frequency-ranked palette, CSS variables, detected tech, colour roles, type ramp. Thin captured tokens are supplemented by a live fetch of the source; `live=false` skips that.

Parameters* required

liveboolean

If true (default), supplement thin captured tokens by fetching the source URL via study(). Set false to skip the network round-trip.default: true

slug*string

Screen slug, e.g. 'linear-app'. Use search_screens or find_similar first to discover slugs.

find_similarA screen's nearest design neighbours - ranked by design-similarity embeddings where available, else by macrostructure / industry / style overlap. One result per site.5 params

A screen's nearest design neighbours - ranked by design-similarity embeddings where available, else by macrostructure / industry / style overlap. One result per site.

Parameters* required

detailstring

limitinteger

default: 8

maxTokensinteger

Approximate token ceiling for this response. Trims lower-ranked results and thumbnails; the top result and all URLs survive.

sameSiteboolean

Include other pages of the same site (default false: neighbours are other sites).default: false

slug*string

compareCompare 2-4 captured sites across palette, typefaces, macrostructure, mode, style tags, type/spacing/radius scales and container width. Returns per-site breakdowns plus what they share - triangulates a house style from a few references.1 params

Compare 2-4 captured sites across palette, typefaces, macrostructure, mode, style tags, type/spacing/radius scales and container width. Returns per-site breakdowns plus what they share - triangulates a house style from a few references.

Parameters* required

slugs*array

2-4 screen slugs to compare, e.g. ['linear-app','stripe-com','vercel-com']. Discover slugs with search_screens / find_similar.

find_by_colorReal sites whose extracted palette sits near a hex colour (OKLAB distance, so 'close' means the same colour family, not just the same hue). Use when a brief names a brand colour.5 params

Real sites whose extracted palette sits near a hex colour (OKLAB distance, so 'close' means the same colour family, not just the same hue). Use when a brief names a brand colour.

Parameters* required

detailstring

hex*string

Target colour as a hex string ('#c7402f', 'c7402f', '#fff'). Case-insensitive. 3- or 6-digit.

limitinteger

default: 12

maxTokensinteger

Approximate token ceiling for this response. Trims lower-ranked results and thumbnails; the top result and all URLs survive.

tolerancenumber

Max OKLAB distance to count as a match. Defaults to 0.15 ('same family'). 0.05 ≈ 'near-identical', 0.30 ≈ 'in the same hue zip code'.default: 0.15

find_examples_for_macrostructureReal sites exemplifying one of the 19 named macrostructures. Call it at the macrostructure-pick step. Accepts slugs ('bento-grid') or display names ('Bento Grid').5 params

Real sites exemplifying one of the 19 named macrostructures. Call it at the macrostructure-pick step. Accepts slugs ('bento-grid') or display names ('Bento Grid').

Parameters* required

detailstring

devicestring

'mobile' restricts to sites with a 375px capture pair and inlines the mobile thumbnail. Default: desktop.one of desktop · mobile

limitinteger

default: 4

maxTokensinteger

Approximate token ceiling for this response. Trims lower-ranked results and thumbnails; the top result and all URLs survive.

name*string

Macrostructure name. e.g. 'bento-grid', 'Bento Grid', 'specimen', 'Marquee Hero'.

list_collectionsList every editor-curated issue. Use this for thematic browsing - e.g. all 'Editorial Layouts' or 'Dark Product Pages'.

List every editor-curated issue. Use this for thematic browsing - e.g. all 'Editorial Layouts' or 'Dark Product Pages'.

No parameters. Call it with no arguments.

get_filtersEvery value the filters accept: styles, industries, macrostructures, modes, vibes, colors, page types, component types. Zero input. Call it when unsure - an out-of-vocabulary value errors.

Every value the filters accept: styles, industries, macrostructures, modes, vibes, colors, page types, component types. Zero input. Call it when unsure - an out-of-vocabulary value errors.

No parameters. Call it with no arguments.

get_site_pagesA site's captured pages as an ordered flow (landing → pricing → features → ...) with titles, northstars and thumbnails - how a real product sequences its pages. No arguments returns the directory of flow-capable sites. Accepts a site or screen slug.3 params

A site's captured pages as an ordered flow (landing → pricing → features → ...) with titles, northstars and thumbnails - how a real product sequences its pages. No arguments returns the directory of flow-capable sites. Accepts a site or screen slug.

Parameters* required

limitinteger

Directory mode only: max sites to list.default: 25

maxTokensinteger

Approximate token ceiling for this response. Trims lower-ranked results and thumbnails; the top result and all URLs survive.

siteSlugstring

Site slug (e.g. 'linear-app') or any screen slug from that site. Omit to list flow-capable sites instead.

find_componentsReal sites featuring a specific UI component (hero, pricing, features, cta, nav, footer, testimonial, logo-cloud, faq, stat), with a per-element crop where one exists. For copy-pasteable code use get_reference_jsx.11 params

Real sites featuring a specific UI component (hero, pricing, features, cta, nav, footer, testimonial, logo-cloud, faq, stat), with a per-element crop where one exists. For copy-pasteable code use get_reference_jsx.

Parameters* required

colorstring

Color word - 'warm', 'cool', 'monochrome', etc.one of warm · cool · monochrome · neon · earthy · pastel

devicestring

'mobile' restricts to sites with a 375px capture pair and inlines the mobile thumbnail. Default: desktop.one of desktop · mobile

industrystring

one of agency · ai · architecture · automotive · consumer-tech · creator

limitinteger

default: 12

macrostructurestring

one of bento-grid · long-document · marquee-hero · stat-led · conversational-faq · manifesto

maxTokensinteger

Approximate token ceiling for this response. Trims lower-ranked results and thumbnails; the top result and all URLs survive.

modestring

one of light · dark

pageTypestring

Only components from this page kind (e.g. 'pricing')one of landing · pricing · features · auth · about · blog

stylestring

Filter the parent site's styleone of minimalism · editorial · brutalism · glassmorphism · swiss · maximalism

type*string

Which component type to findone of hero · pricing · features · cta · nav · footer

vibestring

Mood - 'calm', 'loud', 'luxe', etc.one of calm · loud · playful · serious · luxe · raw

get_collectionFetch one issue by slug, including the editor's blurb and ordered screen list.3 params

Fetch one issue by slug, including the editor's blurb and ordered screen list.

Parameters* required

detailstring

maxTokensinteger

Approximate token ceiling for this response. Trims lower-ranked results and thumbnails; the top result and all URLs survive.

slug*string

Collection slug, e.g. 'editorial-layouts'

find_reference_componentsThe canonical reference components as an index: id, label, macrostructure and a note for each hero / pricing / cta / nav / footer archetype. Pick one, then get_reference_jsx(type, id) for its source.2 params

The canonical reference components as an index: id, label, macrostructure and a note for each hero / pricing / cta / nav / footer archetype. Pick one, then get_reference_jsx(type, id) for its source.

Parameters* required

macrostring

Substring match on the component's macro field - e.g. 'Marquee' matches 'Marquee Hero'.

typestring

Component category (hero, pricing, cta, …). Omit to scan all types.one of hero · pricing · features · cta · nav · footer

recommendOrchestrator - start here for a brief. One call returns a macrostructure pick, 5 real exemplars, matching reference components (source via get_reference_jsx), a palette suggestion, and an `evidence` packet measuring the genre's paper band / display class / accent hue. Pass a m...9 params

Orchestrator - start here for a brief. One call returns a macrostructure pick, 5 real exemplars, matching reference components (source via get_reference_jsx), a palette suggestion, and an `evidence` packet measuring the genre's paper band / display class / accent hue. Pass a m...

Parameters* required

brief*string

The user's design brief in plain English. E.g. 'calm meditation app', 'dark dev-tool that helps teams ship faster'.

colorstring

Optional colour word.one of warm · cool · monochrome · neon · earthy · pastel

detailstring

devicestring

'mobile' restricts to sites with a 375px capture pair and inlines the mobile thumbnail. Default: desktop.one of desktop · mobile

macrostructurestring

Optional: a macrostructure already picked. Skips the pick step.one of bento-grid · long-document · marquee-hero · stat-led · conversational-faq · manifesto

maxTokensinteger

Approximate token ceiling for this response. Trims lower-ranked results and thumbnails; the top result and all URLs survive.

modestring

Optional: 'light' or 'dark'.one of light · dark

pageTypestring

Optional: 'landing', 'pricing', 'features', etc.one of landing · pricing · features · auth · about · blog

vibestring

Optional vibe filter.one of calm · loud · playful · serious · luxe · raw

get_reference_jsxThe full canonical JSX source for one reference component, including the header stamp naming its macrostructure / theme / states. Copy-pasteable; tweak tokens to the target brand.2 params

The full canonical JSX source for one reference component, including the header stamp naming its macrostructure / theme / states. Copy-pasteable; tweak tokens to the target brand.

Parameters* required

id*string

Reference id within that type (e.g. 'marquee', 'three-card').

type*string

Component categoryone of hero · pricing · features · cta · nav · footer

Configuration

TOGETHER_API_KEYsecret

Optional. Enables query-embedding semantic search; everything else works without it.

INSPO_CATALOGUE_URL

Optional. Point at a self-hosted catalogue instead of the public CDN.

INSPO_PROFILE

Optional. 'lite' or 'full' tool surface (auto-detected per client by default).

INSPO_IMAGES

Optional. 'thumbs' or 'none' - whether tool results inline thumbnail image blocks.

INSPO_MAX_TOKENS

Optional. Token ceiling per tool response (300 to 200000); trims lower-ranked results first.

Readme

Inspo

Real production websites your coding agent can study, over MCP, before it writes UI. inspomcp.dev

With and without

Same brief, same model, no design skill on either run. The only difference: the page on the right was built with Inspo MCP on the session.

The bare agent's page: dark theme, neon accent, gradient app mock The page built with Inspo: warm paper, editorial type, detailed product mock

That gap is the product. Agents have tools but not taste, and the open web already holds every reference they need: Inspo assembles, tags, and addresses it.

What's inside

View the full README on GitHub

Details

Repository: github.com/nutlope/inspo
Package: inspo-mcp
Transport: STDIO, HTTP
Auth: Required
Registry: MCP registry, active
Tools verified: Nov 13, 2026