io.github.Nutlope/inspo

Official15 toolsLive

by Nutlope · TypeScript

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

io.github.Nutlope/inspo (MCP Server)

This MCP server provides access to “Real production websites for coding agents,” including resources such as palettes and fonts. It also includes “fold autopsies” and references to JSX, intended to support analysis and reuse of front-end code patterns seen in production contexts.

🛠️ Key Features

Palettes
Fonts
Fold autopsies
Reference JSX

🚀 Use Cases

Reviewing production website styling through palettes and fonts
Studying code structure or “fold” decisions via fold autopsies
Using JSX references while building UI components

⚡ Developer Benefits

Grounded references based on real production websites
Direct pointers for styling (palettes, fonts) and component code (JSX)

⚠️ Limitations

Server data provided includes only name and description; other fields (e.g., topics, toolCount, readmeExcerpt) are not available, so tool inventory and capabilities are not specified.

Captured live from the server via tools/list.

search_screens

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

Parameters15

query	string	optional	Natural-language description of what you're looking for. e.g. 'minimalist editorial agency portfolio'
style	string	optional	Filter to one visual style (e.g. 'minimalism', 'editorial')
industry	string	optional	Filter to one industry (e.g. 'saas', 'fintech', 'portfolio')
macrostructure	string	optional	Filter to a macrostructure (e.g. 'bento-grid')
mode	string	optional	light or dark
vibe	string	optional	Mood / vibe - 'calm', 'loud', 'luxe', 'technical', 'soft', etc.
color	string	optional	Color word - 'warm', 'cool', 'monochrome', 'neon', 'earthy'
pageType	string	optional	Filter to a page kind: 'landing' (default homepages), 'pricing', 'features', 'auth', 'about', 'blog', 'changelog', 'docs', 'other'
paperBand	string	optional	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.
displayClass	string	optional	Construction of the display face: 'grotesk-sans', 'geometric-sans', 'roman-serif', 'mono', 'display-condensed-bold', etc.
accentHue	string	optional	Accent temperature: 'warm' (10-60°), 'cool' (200-300°), 'neutral' (unsaturated), 'chromatic-other' (greens, magentas, everything else).
device	string	optional	'mobile' restricts to sites with a 375px capture pair and inlines the mobile thumbnail. Default: desktop.
limit	integer	optional
detail	string	optional	'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 them all). 'concise': northstar, palette, fonts. Text profile defaults to concise.
maxTokens	integer	optional	Approximate token ceiling for this response. Trims lower-ranked results and thumbnails; the top result and all URLs survive.

Raw schema

{
  "type": "object",
  "properties": {
    "query": {
      "type": "string",
      "description": "Natural-language description of what you're looking for. e.g. 'minimalist editorial agency portfolio'",
      "default": ""
    },
    "style": {
      "type": "string",
      "enum": [
        "minimalism",
        "editorial",
        "brutalism",
        "glassmorphism",
        "swiss",
        "maximalism",
        "playful",
        "dark-mode",
        "monochrome",
        "vintage",
        "futurist"
      ],
      "description": "Filter to one visual style (e.g. 'minimalism', 'editorial')"
    },
    "industry": {
      "type": "string",
      "enum": [
        "agency",
        "ai",
        "architecture",
        "automotive",
        "consumer-tech",
        "creator",
        "crypto",
        "culture",
        "developer-tools",
        "ecommerce",
        "education",
        "fashion",
        "fintech",
        "food-beverage",
        "furniture",
        "gaming",
        "health",
        "media",
        "music",
        "non-profit",
        "portfolio",
        "saas",
        "travel",
        "type-foundry"
      ],
      "description": "Filter to one industry (e.g. 'saas', 'fintech', 'portfolio')"
    },
    "macrostructure": {
      "type": "string",
      "enum": [
        "bento-grid",
        "long-document",
        "marquee-hero",
        "stat-led",
        "conversational-faq",
        "manifesto",
        "photographic",
        "specimen",
        "catalogue",
        "letter",
        "index-first",
        "narrative-workflow",
        "split-studio",
        "feature-stack",
        "type-specimen",
        "portfolio-grid",
        "map-diagram",
        "ecosystem-index",
        "component-playground"
      ],
      "description": "Filter to a macrostructure (e.g. 'bento-grid')"
    },
    "mode": {
      "type": "string",
      "enum": [
        "light",
        "dark"
      ],
      "description": "light or dark"
    },
    "vibe": {
      "type": "string",
      "enum": [
        "calm",
        "loud",
        "playful",
        "serious",
        "luxe",
        "raw",
        "soft",
        "technical",
        "warm",
        "cold"
      ],
      "description": "Mood / vibe - 'calm', 'loud', 'luxe', 'technical', 'soft', etc."
    },
    "color": {
      "type": "string",
      "enum": [
        "warm",
        "cool",
        "monochrome",
        "neon",
        "earthy",
        "pastel",
        "saturated",
        "muted",
        "high-contrast"
      ],
      "description": "Color word - 'warm', 'cool', 'monochrome', 'neon', 'earthy'"
    },
    "pageType": {
      "type": "string",
      "enum": [
        "landing",
        "pricing",
        "features",
        "auth",
        "about",
        "blog",
        "changelog",
        "docs",
        "other"
      ],
      "description": "Filter to a page kind: 'landing' (default homepages), 'pricing', 'features', 'auth', 'about', 'blog', 'changelog', 'docs', 'other'"
    },
    "paperBand": {
      "type": "string",
      "enum": [
        "dark",
        "mid",
        "light"
      ],
      "description": "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."
    },
    "displayClass": {
      "type": "string",
      "enum": [
        "grotesk-sans",
        "geometric-sans",
        "roman-serif",
        "italic-serif",
        "slab-serif",
        "mono",
        "display-condensed-bold",
        "display-heavy",
        "system-native",
        "handwritten"
      ],
      "description": "Construction of the display face: 'grotesk-sans', 'geometric-sans', 'roman-serif', 'mono', 'display-condensed-bold', etc."
    },
    "accentHue": {
      "type": "string",
      "enum": [
        "warm",
        "cool",
        "neutral",
        "chromatic-other"
      ],
      "description": "Accent temperature: 'warm' (10-60°), 'cool' (200-300°), 'neutral' (unsaturated), 'chromatic-other' (greens, magentas, everything else)."
    },
    "device": {
      "type": "string",
      "enum": [
        "desktop",
        "mobile"
      ],
      "description": "'mobile' restricts to sites with a 375px capture pair and inlines the mobile thumbnail. Default: desktop."
    },
    "limit": {
      "type": "integer",
      "minimum": 1,
      "maximum": 20,
      "default": 6
    },
    "detail": {
      "type": "string",
      "enum": [
        "concise",
        "standard",
        "full"
      ],
      "description": "'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 them all). 'concise': northstar, palette, fonts. Text profile defaults to concise."
    },
    "maxTokens": {
      "type": "integer",
      "minimum": 300,
      "maximum": 200000,
      "description": "Approximate token ceiling for this response. Trims lower-ranked results and thumbnails; the top result and all URLs survive."
    }
  }
}

get_screen

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

Parameters1

slug

string

required

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

Raw schema

{
  "type": "object",
  "properties": {
    "slug": {
      "type": "string",
      "description": "Screen slug, e.g. 'atelier-mira'"
    }
  },
  "required": [
    "slug"
  ]
}

get_design_system

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.

Parameters2

slug	string	required	Screen slug, e.g. 'linear-app'. Use search_screens or find_similar first to discover slugs.
live	boolean	optional	If true (default), supplement thin captured tokens by fetching the source URL via study(). Set false to skip the network round-trip.

Raw schema

{
  "type": "object",
  "properties": {
    "slug": {
      "type": "string",
      "description": "Screen slug, e.g. 'linear-app'. Use search_screens or find_similar first to discover slugs."
    },
    "live": {
      "type": "boolean",
      "default": true,
      "description": "If true (default), supplement thin captured tokens by fetching the source URL via study(). Set false to skip the network round-trip."
    }
  },
  "required": [
    "slug"
  ]
}

find_similar

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

Parameters5

slug	string	required
limit	integer	optional
sameSite	boolean	optional	Include other pages of the same site (default false: neighbours are other sites).
detail	string	optional	'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 them all). 'concise': northstar, palette, fonts. Text profile defaults to concise.
maxTokens	integer	optional	Approximate token ceiling for this response. Trims lower-ranked results and thumbnails; the top result and all URLs survive.

Raw schema

{
  "type": "object",
  "properties": {
    "slug": {
      "type": "string"
    },
    "limit": {
      "type": "integer",
      "minimum": 1,
      "maximum": 20,
      "default": 8
    },
    "sameSite": {
      "type": "boolean",
      "default": false,
      "description": "Include other pages of the same site (default false: neighbours are other sites)."
    },
    "detail": {
      "type": "string",
      "enum": [
        "concise",
        "standard",
        "full"
      ],
      "description": "'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 them all). 'concise': northstar, palette, fonts. Text profile defaults to concise."
    },
    "maxTokens": {
      "type": "integer",
      "minimum": 300,
      "maximum": 200000,
      "description": "Approximate token ceiling for this response. Trims lower-ranked results and thumbnails; the top result and all URLs survive."
    }
  },
  "required": [
    "slug"
  ]
}

compare

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.

Parameters1

slugs

array

required

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

Raw schema

{
  "type": "object",
  "properties": {
    "slugs": {
      "type": "array",
      "items": {
        "type": "string"
      },
      "minItems": 2,
      "maxItems": 4,
      "description": "2-4 screen slugs to compare, e.g. ['linear-app','stripe-com','vercel-com']. Discover slugs with search_screens / find_similar."
    }
  },
  "required": [
    "slugs"
  ]
}

find_by_color

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.

Parameters5

hex	string	required	Target colour as a hex string ('#c7402f', 'c7402f', '#fff'). Case-insensitive. 3- or 6-digit.
tolerance	number	optional	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'.
limit	integer	optional
detail	string	optional	'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 them all). 'concise': northstar, palette, fonts. Text profile defaults to concise.
maxTokens	integer	optional	Approximate token ceiling for this response. Trims lower-ranked results and thumbnails; the top result and all URLs survive.

Raw schema

{
  "type": "object",
  "properties": {
    "hex": {
      "type": "string",
      "description": "Target colour as a hex string ('#c7402f', 'c7402f', '#fff'). Case-insensitive. 3- or 6-digit."
    },
    "tolerance": {
      "type": "number",
      "minimum": 0.02,
      "maximum": 0.5,
      "default": 0.15,
      "description": "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'."
    },
    "limit": {
      "type": "integer",
      "minimum": 1,
      "maximum": 40,
      "default": 12
    },
    "detail": {
      "type": "string",
      "enum": [
        "concise",
        "standard",
        "full"
      ],
      "description": "'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 them all). 'concise': northstar, palette, fonts. Text profile defaults to concise."
    },
    "maxTokens": {
      "type": "integer",
      "minimum": 300,
      "maximum": 200000,
      "description": "Approximate token ceiling for this response. Trims lower-ranked results and thumbnails; the top result and all URLs survive."
    }
  },
  "required": [
    "hex"
  ]
}

find_examples_for_macrostructure

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').

Parameters5

name	string	required	Macrostructure name. e.g. 'bento-grid', 'Bento Grid', 'specimen', 'Marquee Hero'.
limit	integer	optional
device	string	optional	'mobile' restricts to sites with a 375px capture pair and inlines the mobile thumbnail. Default: desktop.
detail	string	optional	'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 them all). 'concise': northstar, palette, fonts. Text profile defaults to concise.
maxTokens	integer	optional	Approximate token ceiling for this response. Trims lower-ranked results and thumbnails; the top result and all URLs survive.

Raw schema

{
  "type": "object",
  "properties": {
    "name": {
      "type": "string",
      "description": "Macrostructure name. e.g. 'bento-grid', 'Bento Grid', 'specimen', 'Marquee Hero'."
    },
    "limit": {
      "type": "integer",
      "minimum": 1,
      "maximum": 20,
      "default": 4
    },
    "device": {
      "type": "string",
      "enum": [
        "desktop",
        "mobile"
      ],
      "description": "'mobile' restricts to sites with a 375px capture pair and inlines the mobile thumbnail. Default: desktop."
    },
    "detail": {
      "type": "string",
      "enum": [
        "concise",
        "standard",
        "full"
      ],
      "description": "'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 them all). 'concise': northstar, palette, fonts. Text profile defaults to concise."
    },
    "maxTokens": {
      "type": "integer",
      "minimum": 300,
      "maximum": 200000,
      "description": "Approximate token ceiling for this response. Trims lower-ranked results and thumbnails; the top result and all URLs survive."
    }
  },
  "required": [
    "name"
  ]
}

list_collections

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

Parameters

No parameters.

Raw schema

{
  "type": "object",
  "properties": {}
}

get_filters

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.

Parameters

No parameters.

Raw schema

{
  "type": "object",
  "properties": {}
}

get_site_pages

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.

Parameters3

siteSlug	string	optional	Site slug (e.g. 'linear-app') or any screen slug from that site. Omit to list flow-capable sites instead.
limit	integer	optional	Directory mode only: max sites to list.
maxTokens	integer	optional	Approximate token ceiling for this response. Trims lower-ranked results and thumbnails; the top result and all URLs survive.

Raw schema

{
  "type": "object",
  "properties": {
    "siteSlug": {
      "type": "string",
      "description": "Site slug (e.g. 'linear-app') or any screen slug from that site. Omit to list flow-capable sites instead."
    },
    "limit": {
      "type": "integer",
      "minimum": 1,
      "maximum": 50,
      "default": 25,
      "description": "Directory mode only: max sites to list."
    },
    "maxTokens": {
      "type": "integer",
      "minimum": 300,
      "maximum": 200000,
      "description": "Approximate token ceiling for this response. Trims lower-ranked results and thumbnails; the top result and all URLs survive."
    }
  }
}

find_components

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.

Parameters11

type	string	required	Which component type to find
style	string	optional	Filter the parent site's style
industry	string	optional
macrostructure	string	optional
mode	string	optional
vibe	string	optional	Mood - 'calm', 'loud', 'luxe', etc.
color	string	optional	Color word - 'warm', 'cool', 'monochrome', etc.
pageType	string	optional	Only components from this page kind (e.g. 'pricing')
device	string	optional	'mobile' restricts to sites with a 375px capture pair and inlines the mobile thumbnail. Default: desktop.
limit	integer	optional
maxTokens	integer	optional	Approximate token ceiling for this response. Trims lower-ranked results and thumbnails; the top result and all URLs survive.

Raw schema

{
  "type": "object",
  "properties": {
    "type": {
      "type": "string",
      "enum": [
        "hero",
        "pricing",
        "features",
        "cta",
        "nav",
        "footer",
        "testimonial",
        "logo-cloud",
        "faq",
        "stat"
      ],
      "description": "Which component type to find"
    },
    "style": {
      "type": "string",
      "enum": [
        "minimalism",
        "editorial",
        "brutalism",
        "glassmorphism",
        "swiss",
        "maximalism",
        "playful",
        "dark-mode",
        "monochrome",
        "vintage",
        "futurist"
      ],
      "description": "Filter the parent site's style"
    },
    "industry": {
      "type": "string",
      "enum": [
        "agency",
        "ai",
        "architecture",
        "automotive",
        "consumer-tech",
        "creator",
        "crypto",
        "culture",
        "developer-tools",
        "ecommerce",
        "education",
        "fashion",
        "fintech",
        "food-beverage",
        "furniture",
        "gaming",
        "health",
        "media",
        "music",
        "non-profit",
        "portfolio",
        "saas",
        "travel",
        "type-foundry"
      ]
    },
    "macrostructure": {
      "type": "string",
      "enum": [
        "bento-grid",
        "long-document",
        "marquee-hero",
        "stat-led",
        "conversational-faq",
        "manifesto",
        "photographic",
        "specimen",
        "catalogue",
        "letter",
        "index-first",
        "narrative-workflow",
        "split-studio",
        "feature-stack",
        "type-specimen",
        "portfolio-grid",
        "map-diagram",
        "ecosystem-index",
        "component-playground"
      ]
    },
    "mode": {
      "type": "string",
      "enum": [
        "light",
        "dark"
      ]
    },
    "vibe": {
      "type": "string",
      "enum": [
        "calm",
        "loud",
        "playful",
        "serious",
        "luxe",
        "raw",
        "soft",
        "technical",
        "warm",
        "cold"
      ],
      "description": "Mood - 'calm', 'loud', 'luxe', etc."
    },
    "color": {
      "type": "string",
      "enum": [
        "warm",
        "cool",
        "monochrome",
        "neon",
        "earthy",
        "pastel",
        "saturated",
        "muted",
        "high-contrast"
      ],
      "description": "Color word - 'warm', 'cool', 'monochrome', etc."
    },
    "pageType": {
      "type": "string",
      "enum": [
        "landing",
        "pricing",
        "features",
        "auth",
        "about",
        "blog",
        "changelog",
        "docs",
        "other"
      ],
      "description": "Only components from this page kind (e.g. 'pricing')"
    },
    "device": {
      "type": "string",
      "enum": [
        "desktop",
        "mobile"
      ],
      "description": "'mobile' restricts to sites with a 375px capture pair and inlines the mobile thumbnail. Default: desktop."
    },
    "limit": {
      "type": "integer",
      "minimum": 1,
      "maximum": 40,
      "default": 12
    },
    "maxTokens": {
      "type": "integer",
      "minimum": 300,
      "maximum": 200000,
      "description": "Approximate token ceiling for this response. Trims lower-ranked results and thumbnails; the top result and all URLs survive."
    }
  },
  "required": [
    "type"
  ]
}

get_collection

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

Parameters3

slug	string	required	Collection slug, e.g. 'editorial-layouts'
detail	string	optional	'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 them all). 'concise': northstar, palette, fonts. Text profile defaults to concise.
maxTokens	integer	optional	Approximate token ceiling for this response. Trims lower-ranked results and thumbnails; the top result and all URLs survive.

Raw schema

{
  "type": "object",
  "properties": {
    "slug": {
      "type": "string",
      "description": "Collection slug, e.g. 'editorial-layouts'"
    },
    "detail": {
      "type": "string",
      "enum": [
        "concise",
        "standard",
        "full"
      ],
      "description": "'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 them all). 'concise': northstar, palette, fonts. Text profile defaults to concise."
    },
    "maxTokens": {
      "type": "integer",
      "minimum": 300,
      "maximum": 200000,
      "description": "Approximate token ceiling for this response. Trims lower-ranked results and thumbnails; the top result and all URLs survive."
    }
  },
  "required": [
    "slug"
  ]
}

find_reference_components

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.

Parameters2

type	string	optional	Component category (hero, pricing, cta, …). Omit to scan all types.
macro	string	optional	Substring match on the component's macro field - e.g. 'Marquee' matches 'Marquee Hero'.

Raw schema

{
  "type": "object",
  "properties": {
    "type": {
      "type": "string",
      "enum": [
        "hero",
        "pricing",
        "features",
        "cta",
        "nav",
        "footer",
        "testimonial",
        "logo-cloud",
        "faq",
        "stat"
      ],
      "description": "Component category (hero, pricing, cta, …). Omit to scan all types."
    },
    "macro": {
      "type": "string",
      "description": "Substring match on the component's macro field - e.g. 'Marquee' matches 'Marquee Hero'."
    }
  }
}

recommend

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 macrostructure to skip the pick step. No LLM call.

Parameters9

brief	string	required	The user's design brief in plain English. E.g. 'calm meditation app', 'dark dev-tool that helps teams ship faster'.
macrostructure	string	optional	Optional: a macrostructure already picked. Skips the pick step.
pageType	string	optional	Optional: 'landing', 'pricing', 'features', etc.
mode	string	optional	Optional: 'light' or 'dark'.
vibe	string	optional	Optional vibe filter.
color	string	optional	Optional colour word.
device	string	optional	'mobile' restricts to sites with a 375px capture pair and inlines the mobile thumbnail. Default: desktop.
detail	string	optional	'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 them all). 'concise': northstar, palette, fonts. Text profile defaults to concise.
maxTokens	integer	optional	Approximate token ceiling for this response. Trims lower-ranked results and thumbnails; the top result and all URLs survive.

Raw schema

{
  "type": "object",
  "properties": {
    "brief": {
      "type": "string",
      "minLength": 2,
      "description": "The user's design brief in plain English. E.g. 'calm meditation app', 'dark dev-tool that helps teams ship faster'."
    },
    "macrostructure": {
      "type": "string",
      "enum": [
        "bento-grid",
        "long-document",
        "marquee-hero",
        "stat-led",
        "conversational-faq",
        "manifesto",
        "photographic",
        "specimen",
        "catalogue",
        "letter",
        "index-first",
        "narrative-workflow",
        "split-studio",
        "feature-stack",
        "type-specimen",
        "portfolio-grid",
        "map-diagram",
        "ecosystem-index",
        "component-playground"
      ],
      "description": "Optional: a macrostructure already picked. Skips the pick step."
    },
    "pageType": {
      "type": "string",
      "enum": [
        "landing",
        "pricing",
        "features",
        "auth",
        "about",
        "blog",
        "changelog",
        "docs",
        "other"
      ],
      "description": "Optional: 'landing', 'pricing', 'features', etc."
    },
    "mode": {
      "type": "string",
      "enum": [
        "light",
        "dark"
      ],
      "description": "Optional: 'light' or 'dark'."
    },
    "vibe": {
      "type": "string",
      "enum": [
        "calm",
        "loud",
        "playful",
        "serious",
        "luxe",
        "raw",
        "soft",
        "technical",
        "warm",
        "cold"
      ],
      "description": "Optional vibe filter."
    },
    "color": {
      "type": "string",
      "enum": [
        "warm",
        "cool",
        "monochrome",
        "neon",
        "earthy",
        "pastel",
        "saturated",
        "muted",
        "high-contrast"
      ],
      "description": "Optional colour word."
    },
    "device": {
      "type": "string",
      "enum": [
        "desktop",
        "mobile"
      ],
      "description": "'mobile' restricts to sites with a 375px capture pair and inlines the mobile thumbnail. Default: desktop."
    },
    "detail": {
      "type": "string",
      "enum": [
        "concise",
        "standard",
        "full"
      ],
      "description": "'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 them all). 'concise': northstar, palette, fonts. Text profile defaults to concise."
    },
    "maxTokens": {
      "type": "integer",
      "minimum": 300,
      "maximum": 200000,
      "description": "Approximate token ceiling for this response. Trims lower-ranked results and thumbnails; the top result and all URLs survive."
    }
  },
  "required": [
    "brief"
  ]
}

get_reference_jsx

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.

Parameters2

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

Raw schema

{
  "type": "object",
  "properties": {
    "type": {
      "type": "string",
      "enum": [
        "hero",
        "pricing",
        "features",
        "cta",
        "nav",
        "footer",
        "testimonial",
        "logo-cloud",
        "faq",
        "stat"
      ],
      "description": "Component category"
    },
    "id": {
      "type": "string",
      "description": "Reference id within that type (e.g. 'marquee', 'three-card')."
    }
  },
  "required": [
    "type",
    "id"
  ]
}

README.md4 KBView on GitHub

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

2,320 pages across 832 real sites, each captured on desktop and mobile, with traced palettes, real fonts, detected tech, and a fold-by-fold autopsy on every page.
68 canonical reference components (heroes, pricing, footers, navs, and more), each demonstrating one named macrostructure, with copy-pasteable JSX.
A DESIGN.md for every site, extracted from its DOM: semantic palette roles, type ramp, spacing scale, CSS variables, container width.

Fifteen tools expose all of it; recommend(brief) composes most of them into one call. The full tool table lives in apps/mcp/README.md.

Tech stack

TypeScript MCP server with two transports: stdio via npm, and Streamable HTTP served by the site's own Vercel deployment. No database at query time; the catalogue ships as a static seed.
Next.js 16 + Tailwind v4 gallery: the archive browser and the curator dashboard.
Playwright capture worker: desktop and mobile shots, palette, type ramp and CSS variable extraction, tag and autopsy passes via Together AI.
Together AI embeddings behind semantic search and find_similar.
A smoke harness that boots the server in-process and exercises the core tools.

Cloning & running

One command, any client: npx -y inspo-mcp install (detects Claude Code, Cursor, Codex, VS Code, Windsurf, Zed, Claude Desktop and writes the config; --dry-run shows the plan)
Or point a client at the hosted endpoint yourself: claude mcp add --transport http inspo https://inspomcp.dev/api/mcp
Or clone: git clone https://github.com/Nutlope/inspo.git && cd inspo && pnpm install
Gallery: pnpm dev, then open localhost:3000
Dev loop: pnpm --filter @inspo/mcp test

Per-client snippets (Cursor, Windsurf, Zed, Claude Desktop) are on the MCP page; the self-host runbook is DEPLOY.md.

Roadmap

show the desktop and mobile capture side by side on every screen page
backfill component crops so find_components returns a crop for every hit
paginate the list tools instead of capping them
re-shoot the mobile set at retina scale
Accounts and paywalls are skipped on purpose: the archive is more useful free.

Want a site in the archive? Append it to apps/worker/src/seed-urls.ts and open a PR. The bar: does it make the archive better for someone building a website?

Security

Every tool is read-only. The one path that touches the outside world - get_design_system(live:true), which supplements thin captured tokens from the screen's own source - passes each URL and redirect through an SSRF guard: public named hosts only, ports 80 and 443, byte-capped body, no JS execution. The hosted endpoint logs tool name, success and duration per call, never IPs or query text.

MIT, copyright Together AI and contributors. The screenshots remain the work of their designers: every screen credits and links its source, and takedowns are honoured at /dmca.

Install

Tools (15)

search_screensget_screenget_design_systemfind_similarcomparefind_by_colorfind_examples_for_macrostructurelist_collections

Configuration

Environment variables

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.

Add to VS Code Add to Cursor

claude_desktop_config.json

json

{
  "mcpServers": {
    "inspo": {
      "command": "npx",
      "args": [
        "-y",
        "inspo-mcp@0.1.16"
      ],
      "env": {
        "TOGETHER_API_KEY": "<YOUR_TOGETHER_API_KEY>",
        "INSPO_CATALOGUE_URL": "<YOUR_INSPO_CATALOGUE_URL>",
        "INSPO_PROFILE": "<YOUR_INSPO_PROFILE>",
        "INSPO_IMAGES": "<YOUR_INSPO_IMAGES>",
        "INSPO_MAX_TOKENS": "<YOUR_INSPO_MAX_TOKENS>"
      }
    }
  }
}

io.github.Nutlope/inspo (MCP Server)

🛠️ Key Features

🚀 Use Cases

⚡ Developer Benefits

⚠️ Limitations

search_screens

get_screen

get_design_system

find_similar

compare

find_by_color

find_examples_for_macrostructure

list_collections

get_filters

get_site_pages

find_components

get_collection

find_reference_components

recommend

get_reference_jsx

Inspo

With and without

What's inside

Tech stack

Cloning & running

Roadmap

Security

Install

Configuration

Related servers