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
Install
From registry metadata$ npx add-mcp https://inspomcp.dev/api/mcp --name inspoRun 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/mcpRun in your terminal. Add --scope user to make it available in every project.
Tools
Verified live · 15 toolsVerified 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
accentHuestringAccent temperature: 'warm' (10-60°), 'cool' (200-300°), 'neutral' (unsaturated), 'chromatic-other' (greens, magentas, everything else).one of
warm · cool · neutral · chromatic-othercolorstringColor word - 'warm', 'cool', 'monochrome', 'neon', 'earthy'one of
warm · cool · monochrome · neon · earthy · pasteldetailstring'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 · fulldevicestring'mobile' restricts to sites with a 375px capture pair and inlines the mobile thumbnail. Default: desktop.one of
desktop · mobiledisplayClassstringConstruction 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 · monoindustrystringFilter to one industry (e.g. 'saas', 'fintech', 'portfolio')one of
agency · ai · architecture · automotive · consumer-tech · creatorlimitintegerdefault: 6
macrostructurestringFilter to a macrostructure (e.g. 'bento-grid')one of
bento-grid · long-document · marquee-hero · stat-led · conversational-faq · manifestomaxTokensintegerApproximate token ceiling for this response. Trims lower-ranked results and thumbnails; the top result and all URLs survive.
modestringlight or darkone of
light · darkpageTypestringFilter to a page kind: 'landing' (default homepages), 'pricing', 'features', 'auth', 'about', 'blog', 'changelog', 'docs', 'other'one of
landing · pricing · features · auth · about · blogpaperBandstringSurface 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 · lightquerystringNatural-language description of what you're looking for. e.g. 'minimalist editorial agency portfolio'default:
stylestringFilter to one visual style (e.g. 'minimalism', 'editorial')one of
minimalism · editorial · brutalism · glassmorphism · swiss · maximalismvibestringMood / vibe - 'calm', 'loud', 'luxe', 'technical', 'soft', etc.one of
calm · loud · playful · serious · luxe · rawget_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*stringScreen 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
livebooleanIf true (default), supplement thin captured tokens by fetching the source URL via study(). Set false to skip the network round-trip.default: true
slug*stringScreen 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'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 · fulllimitintegerdefault: 8
maxTokensintegerApproximate token ceiling for this response. Trims lower-ranked results and thumbnails; the top result and all URLs survive.
sameSitebooleanInclude other pages of the same site (default false: neighbours are other sites).default: false
slug*stringcompareCompare 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*array2-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'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 · fullhex*stringTarget colour as a hex string ('#c7402f', 'c7402f', '#fff'). Case-insensitive. 3- or 6-digit.
limitintegerdefault: 12
maxTokensintegerApproximate token ceiling for this response. Trims lower-ranked results and thumbnails; the top result and all URLs survive.
tolerancenumberMax 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'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 · fulldevicestring'mobile' restricts to sites with a 375px capture pair and inlines the mobile thumbnail. Default: desktop.one of
desktop · mobilelimitintegerdefault: 4
maxTokensintegerApproximate token ceiling for this response. Trims lower-ranked results and thumbnails; the top result and all URLs survive.
name*stringMacrostructure 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
limitintegerDirectory mode only: max sites to list.default: 25
maxTokensintegerApproximate token ceiling for this response. Trims lower-ranked results and thumbnails; the top result and all URLs survive.
siteSlugstringSite 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
colorstringColor word - 'warm', 'cool', 'monochrome', etc.one of
warm · cool · monochrome · neon · earthy · pasteldevicestring'mobile' restricts to sites with a 375px capture pair and inlines the mobile thumbnail. Default: desktop.one of
desktop · mobileindustrystringone of
agency · ai · architecture · automotive · consumer-tech · creatorlimitintegerdefault: 12
macrostructurestringone of
bento-grid · long-document · marquee-hero · stat-led · conversational-faq · manifestomaxTokensintegerApproximate token ceiling for this response. Trims lower-ranked results and thumbnails; the top result and all URLs survive.
modestringone of
light · darkpageTypestringOnly components from this page kind (e.g. 'pricing')one of
landing · pricing · features · auth · about · blogstylestringFilter the parent site's styleone of
minimalism · editorial · brutalism · glassmorphism · swiss · maximalismtype*stringWhich component type to findone of
hero · pricing · features · cta · nav · footervibestringMood - 'calm', 'loud', 'luxe', etc.one of
calm · loud · playful · serious · luxe · rawget_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'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 · fullmaxTokensintegerApproximate token ceiling for this response. Trims lower-ranked results and thumbnails; the top result and all URLs survive.
slug*stringCollection 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
macrostringSubstring match on the component's macro field - e.g. 'Marquee' matches 'Marquee Hero'.
typestringComponent category (hero, pricing, cta, …). Omit to scan all types.one of
hero · pricing · features · cta · nav · footerrecommendOrchestrator - 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*stringThe user's design brief in plain English. E.g. 'calm meditation app', 'dark dev-tool that helps teams ship faster'.
colorstringOptional colour word.one of
warm · cool · monochrome · neon · earthy · pasteldetailstring'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 · fulldevicestring'mobile' restricts to sites with a 375px capture pair and inlines the mobile thumbnail. Default: desktop.one of
desktop · mobilemacrostructurestringOptional: a macrostructure already picked. Skips the pick step.one of
bento-grid · long-document · marquee-hero · stat-led · conversational-faq · manifestomaxTokensintegerApproximate token ceiling for this response. Trims lower-ranked results and thumbnails; the top result and all URLs survive.
modestringOptional: 'light' or 'dark'.one of
light · darkpageTypestringOptional: 'landing', 'pricing', 'features', etc.one of
landing · pricing · features · auth · about · blogvibestringOptional vibe filter.one of
calm · loud · playful · serious · luxe · rawget_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*stringReference id within that type (e.g. 'marquee', 'three-card').
type*stringComponent categoryone of
hero · pricing · features · cta · nav · footerSponsors
Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthly
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any language
Agent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any languageConfiguration
TOGETHER_API_KEYsecretOptional. Enables query-embedding semantic search; everything else works without it.
INSPO_CATALOGUE_URLOptional. Point at a self-hosted catalogue instead of the public CDN.
INSPO_PROFILEOptional. 'lite' or 'full' tool surface (auto-detected per client by default).
INSPO_IMAGESOptional. 'thumbs' or 'none' - whether tool results inline thumbnail image blocks.
INSPO_MAX_TOKENSOptional. 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
Details
- Repository
- github.com/nutlope/inspo
- Package
inspo-mcp- Transport
- STDIO, HTTP
- Auth
- Required
- Registry
- MCP registry, active
- Tools verified
- Nov 13, 2026