MCP MeasureMCP Measure

Index beobachtet

inspo

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

Sollte ich dies verwenden

Qualität und Sicherheit

A
Qualität der Beschreibung
93%
Vollständigkeit des Schemas
87%
Qualität der Benennung
96%
Risiko der Vergiftung
100%
Übereinstimmung der Berechtigungen
100%
Einhaltung des Protokolls
100%

Befunde (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

Basierend auf einer automatisierten Analyse der Tool-Definitionen und der Einhaltung des Protokolls.

Kontextkosten

~4,511Tokens (Tool-Definitionen)
~2.6 KBTypische Antwortgröße
Erhebliche Auswirkung auf die Aufmerksamkeit (3.52% von 128k Kontext)

Dies ist die ungefähre Anzahl der Tokens, die jedes Mal verbraucht werden, wenn die Tools des Servers in den Kontext eines Modells geladen werden. Höhere Werte verringern die Aufmerksamkeit, die für andere Aufgaben verfügbar ist.

Installieren

Installation mit einem Klick

Fügen Sie dies Ihrer Datei `claude_desktop_config.json` hinzu:

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

Ausführbare Pakete

npminspo-mcp0.1.16stdio

Remote-Endpunkte

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

Was es kann

Tool-Inventar

Tools (15)

🟢 Nur lesen🟡 Schreiben🔴 Löschen⚪ Unbekannt
🟢search_screens(query, style, industry, macrostructure, mode, ...)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Eingabe-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

Diesen Server bewerten

Nachweis

Aktuelle Beobachtungen

verifiziertVersion nicht aufgezeichnet15 Tools
verifiziertVersion nicht aufgezeichnet15 Tools
verifiziertVersion nicht aufgezeichnet15 Tools