MCP MeasureMCP Measure

index observed

inspo

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

Should I use this

Quality & Safety

A
Description quality
93%
Schema completeness
87%
Naming quality
96%
Poisoning risk
100%
Permission match
100%
Protocol compliance
100%

Findings (4)

  • LOWTool 'find_similar' description lacks action verbin find_similar
  • LOWTool 'compare' description lacks action verbin compare
  • LOWTool 'get_site_pages' description lacks action verbin get_site_pages
  • LOWTool 'find_examples_for_macrostructure' name length outside 3-30 rangein find_examples_for_macrostructure

Based on automated analysis of tool definitions and protocol compliance.

Context Cost

~4,511Tokens (tool definitions)
~2.6 KBTypical response size
Significant attention impact (3.52% of 128k context)

This is the approximate number of tokens consumed each time the server's tools are loaded into a model's context. Higher counts reduce the attention available for other tasks.

Install

One-Click Install

Add this to your `claude_desktop_config.json` file:

{
  "mcpServers": {
    "inspo": {
      "command": "npx",
      "args": [
        "inspo-mcp"
      ]
    }
  }
}

Runnable packages

npminspo-mcp0.1.16stdio

Remote endpoints

https://inspomcp.dev/api/mcpstreamable-http

What it can do

Tool inventory

Tools (15)

🟢 Read-only🟡 Write🔴 Delete⚪ Unknown
🟢search_screens(query, style, industry, macrostructure, mode, ...)

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

Input 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(slug)

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

Input Schema

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

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.

Input 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(slug, limit, sameSite, detail, maxTokens)

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

Input 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(slugs)

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.

Input 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(hex, tolerance, limit, detail, maxTokens)

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.

Input 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(name, limit, device, detail, maxTokens)

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

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

Input 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.

Input Schema

{
  "type": "object",
  "properties": {}
}
🟢get_site_pages(siteSlug, limit, maxTokens)

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.

Input 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(type, style, industry, macrostructure, mode, ...)

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.

Input 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(slug, detail, maxTokens)

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

Input 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(type, macro)

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.

Input 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(brief, macrostructure, pageType, mode, vibe, ...)

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.

Input 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(type, id)

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.

Input 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"
  ]
}

Community

Rate this Server

Evidence

Recent observations

verifiedversion not recorded15 tools
verifiedversion not recorded15 tools
verifiedversion not recorded15 tools
verifiedversion not recorded15 tools
verifiedversion not recorded15 tools
verifiedversion not recorded15 tools
verifiedversion not recorded15 tools