inspo
Real production websites for coding agents: palettes, fonts, fold autopsies and reference JSX.
使うべきか
品質と安全性
A
検出事項（4）
- LOWTool 'find_similar' description lacks action verbfind_similar 内
- LOWTool 'compare' description lacks action verbcompare 内
- LOWTool 'get_site_pages' description lacks action verbget_site_pages 内
- LOWTool 'find_examples_for_macrostructure' name length outside 3-30 rangefind_examples_for_macrostructure 内
ツール定義とプロトコルへの準拠に関する自動分析に基づいています。
コンテキストコスト
~4,511トークン数（ツール定義）
~2.6 KB一般的なレスポンスサイズ
注意への影響は大きい（128k コンテキストの 3.52%）
これは、サーバーのツールがモデルのコンテキストに読み込まれるたびに消費されるおおよそのトークン数です。数が多いほど、ほかのタスクに使える注意が減ります。
インストール
ワンクリックインストール
これを `claude_desktop_config.json` ファイルに追加してください:
{
"mcpServers": {
"inspo": {
"command": "npx",
"args": [
"inspo-mcp"
]
}
}
}実行可能なパッケージ
npminspo-mcp
0.1.16stdioリモートエンドポイント
https://inspomcp.dev/api/mcpstreamable-httpできること
ツール一覧
ツール（15）
🟢 読み取り専用🟡 書き込み🔴 削除⚪ 不明
🟢search_screens(query, style, industry, macrostructure, mode, ...)
Search the archive of real website screenshots. Returns screens with palette, fonts, components and image URLs.
入力スキーマ
{
"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.
入力スキーマ
{
"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.
入力スキーマ
{
"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.
入力スキーマ
{
"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.
入力スキーマ
{
"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.
入力スキーマ
{
"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').
入力スキーマ
{
"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'.
入力スキーマ
{
"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.
入力スキーマ
{
"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.
入力スキーマ
{
"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.
入力スキーマ
{
"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.
入力スキーマ
{
"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.
入力スキーマ
{
"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.
入力スキーマ
{
"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.
入力スキーマ
{
"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"
]
}コミュニティ
エビデンス
最近の観測
検証済みバージョンは記録されていませんツール 15 件
検証済みバージョンは記録されていませんツール 15 件
検証済みバージョンは記録されていませんツール 15 件