此 MCP 可以做什么
Searches real website design references and provides palettes, typography, layouts, component examples, design systems, screenshots, and copyable JSX.
功能
工具
15
工具
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.
只读
幂等
输入模式
{'type': 'object', 'required': ['slugs'], 'properties': {'slugs': {'type': 'array', 'items': {'type': 'string'}, 'maxItems': 4, 'minItems': 2, 'description': "2-4 screen slugs to compare, e.g. ['linear-app','stripe-com','vercel-com']. Discover slugs with search_screens / find_similar."}}}
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.
只读
幂等
输入模式
{'type': 'object', 'required': ['hex'], 'properties': {'hex': {'type': 'string', 'description': "Target colour as a hex string ('#c7402f', 'c7402f', '#fff'). Case-insensitive. 3- or 6-digit."}, 'limit': {'type': 'integer', 'default': 12, 'maximum': 40, 'minimum': 1}, 'detail': {'enum': ['concise', 'standard', 'full'], 'type': 'string', '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', 'maximum': 200000, 'minimum': 300, 'description': 'Approximate token ceiling for this response. Trims lower-ranked results and thumbnails; the top result and all URLs survive.'}, 'tolerance': {'type': 'number', 'default': 0.15, 'maximum': 0.5, 'minimum': 0.02, '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'."}}}
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.
只读
幂等
输入模式
{'type': 'object', 'required': ['type'], 'properties': {'mode': {'enum': ['light', 'dark'], 'type': 'string'}, 'type': {'enum': ['hero', 'pricing', 'features', 'cta', 'nav', 'footer', 'testimonial', 'logo-cloud', 'faq', 'stat'], 'type': 'string', 'description': 'Which component type to find'}, 'vibe': {'enum': ['calm', 'loud', 'playful', 'serious', 'luxe', 'raw', 'soft', 'technical', 'warm', 'cold'], 'type': 'string', 'description': "Mood - 'calm', 'loud', 'luxe', etc."}, 'color': {'enum': ['warm', 'cool', 'monochrome', 'neon', 'earthy', 'pastel', 'saturated', 'muted', 'high-contrast'], 'type': 'string', 'description': "Color word - 'warm', 'cool', 'monochrome', etc."}, 'limit': {'type': 'integer', 'default': 12, 'maximum': 40, 'minimum': 1}, 'style': {'enum': ['minimalism', 'editorial', 'brutalism', 'glassmorphism', 'swiss', 'maximalism', 'playful', 'dark-mode', 'monochrome', 'vintage', 'futurist'], 'type': 'string', 'description': "Filter the parent site's style"}, 'device': {'enum': ['desktop', 'mobile'], 'type': 'string', 'description': "'mobile' restricts to sites with a 375px capture pair and inlines the mobile thumbnail. Default: desktop."}, 'industry': {'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'], 'type': 'string'}, 'pageType': {'enum': ['landing', 'pricing', 'features', 'auth', 'about', 'blog', 'changelog', 'docs', 'other'], 'type': 'string', 'description': "Only components from this page kind (e.g. 'pricing')"}, 'maxTokens': {'type': 'integer', 'maximum': 200000, 'minimum': 300, 'description': 'Approximate token ceiling for this response. Trims lower-ranked results and thumbnails; the top result and all URLs survive.'}, 'macrostructure': {'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'], 'type': 'string'}}}
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').
只读
幂等
输入模式
{'type': 'object', 'required': ['name'], 'properties': {'name': {'type': 'string', 'description': "Macrostructure name. e.g. 'bento-grid', 'Bento Grid', 'specimen', 'Marquee Hero'."}, 'limit': {'type': 'integer', 'default': 4, 'maximum': 20, 'minimum': 1}, 'detail': {'enum': ['concise', 'standard', 'full'], 'type': 'string', '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."}, 'device': {'enum': ['desktop', 'mobile'], 'type': 'string', 'description': "'mobile' restricts to sites with a 375px capture pair and inlines the mobile thumbnail. Default: desktop."}, 'maxTokens': {'type': 'integer', 'maximum': 200000, 'minimum': 300, 'description': 'Approximate token ceiling for this response. Trims lower-ranked results and thumbnails; the top result and all URLs survive.'}}}
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.
只读
幂等
输入模式
{'type': 'object', 'properties': {'type': {'enum': ['hero', 'pricing', 'features', 'cta', 'nav', 'footer', 'testimonial', 'logo-cloud', 'faq', 'stat'], 'type': 'string', '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'."}}}
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.
只读
幂等
输入模式
{'type': 'object', 'required': ['slug'], 'properties': {'slug': {'type': 'string'}, 'limit': {'type': 'integer', 'default': 8, 'maximum': 20, 'minimum': 1}, 'detail': {'enum': ['concise', 'standard', 'full'], 'type': 'string', '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."}, 'sameSite': {'type': 'boolean', 'default': False, 'description': 'Include other pages of the same site (default false: neighbours are other sites).'}, 'maxTokens': {'type': 'integer', 'maximum': 200000, 'minimum': 300, 'description': 'Approximate token ceiling for this response. Trims lower-ranked results and thumbnails; the top result and all URLs survive.'}}}
get_collection
Fetch one issue by slug, including the editor's blurb and ordered screen list.
只读
幂等
输入模式
{'type': 'object', 'required': ['slug'], 'properties': {'slug': {'type': 'string', 'description': "Collection slug, e.g. 'editorial-layouts'"}, 'detail': {'enum': ['concise', 'standard', 'full'], 'type': 'string', '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', 'maximum': 200000, 'minimum': 300, 'description': 'Approximate token ceiling for this response. Trims lower-ranked results and thumbnails; the top result and all URLs survive.'}}}
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.
只读
可访问外部资源
幂等
输入模式
{'type': 'object', 'required': ['slug'], 'properties': {'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.'}, 'slug': {'type': 'string', 'description': "Screen slug, e.g. 'linear-app'. Use search_screens or find_similar first to discover slugs."}}}
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_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.
只读
幂等
输入模式
{'type': 'object', 'required': ['type', 'id'], 'properties': {'id': {'type': 'string', 'description': "Reference id within that type (e.g. 'marquee', 'three-card')."}, 'type': {'enum': ['hero', 'pricing', 'features', 'cta', 'nav', 'footer', 'testimonial', 'logo-cloud', 'faq', 'stat'], 'type': 'string', 'description': 'Component category'}}}
get_screen
Fetch the full record for one screen by slug - every viewport variant, palette, fonts, tech stack, designer credit.
只读
幂等
输入模式
{'type': 'object', 'required': ['slug'], 'properties': {'slug': {'type': 'string', 'description': "Screen slug, e.g. 'atelier-mira'"}}}
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.
只读
幂等
输入模式
{'type': 'object', 'properties': {'limit': {'type': 'integer', 'default': 25, 'maximum': 50, 'minimum': 1, 'description': 'Directory mode only: max sites to list.'}, 'siteSlug': {'type': 'string', 'description': "Site slug (e.g. 'linear-app') or any screen slug from that site. Omit to list flow-capable sites instead."}, 'maxTokens': {'type': 'integer', 'maximum': 200000, 'minimum': 300, 'description': 'Approximate token ceiling for this response. Trims lower-ranked results and thumbnails; the top result and all URLs survive.'}}}
list_collections
List every editor-curated issue. Use this for thematic browsing - e.g. all 'Editorial Layouts' or 'Dark Product Pages'.
只读
幂等
输入模式
{'type': 'object', 'properties': {}}
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.
只读
幂等
输入模式
{'type': 'object', 'required': ['brief'], 'properties': {'mode': {'enum': ['light', 'dark'], 'type': 'string', 'description': "Optional: 'light' or 'dark'."}, 'vibe': {'enum': ['calm', 'loud', 'playful', 'serious', 'luxe', 'raw', 'soft', 'technical', 'warm', 'cold'], 'type': 'string', 'description': 'Optional vibe filter.'}, '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'."}, 'color': {'enum': ['warm', 'cool', 'monochrome', 'neon', 'earthy', 'pastel', 'saturated', 'muted', 'high-contrast'], 'type': 'string', 'description': 'Optional colour word.'}, 'detail': {'enum': ['concise', 'standard', 'full'], 'type': 'string', '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."}, 'device': {'enum': ['desktop', 'mobile'], 'type': 'string', 'description': "'mobile' restricts to sites with a 375px capture pair and inlines the mobile thumbnail. Default: desktop."}, 'pageType': {'enum': ['landing', 'pricing', 'features', 'auth', 'about', 'blog', 'changelog', 'docs', 'other'], 'type': 'string', 'description': "Optional: 'landing', 'pricing', 'features', etc."}, 'maxTokens': {'type': 'integer', 'maximum': 200000, 'minimum': 300, 'description': 'Approximate token ceiling for this response. Trims lower-ranked results and thumbnails; the top result and all URLs survive.'}, 'macrostructure': {'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'], 'type': 'string', 'description': 'Optional: a macrostructure already picked. Skips the pick step.'}}}
search_screens
Search the archive of real website screenshots. Returns screens with palette, fonts, components and image URLs.
只读
幂等
输入模式
{'type': 'object', 'properties': {'mode': {'enum': ['light', 'dark'], 'type': 'string', 'description': 'light or dark'}, 'vibe': {'enum': ['calm', 'loud', 'playful', 'serious', 'luxe', 'raw', 'soft', 'technical', 'warm', 'cold'], 'type': 'string', 'description': "Mood / vibe - 'calm', 'loud', 'luxe', 'technical', 'soft', etc."}, 'color': {'enum': ['warm', 'cool', 'monochrome', 'neon', 'earthy', 'pastel', 'saturated', 'muted', 'high-contrast'], 'type': 'string', 'description': "Color word - 'warm', 'cool', 'monochrome', 'neon', 'earthy'"}, 'limit': {'type': 'integer', 'default': 6, 'maximum': 20, 'minimum': 1}, 'query': {'type': 'string', 'default': '', 'description': "Natural-language description of what you're looking for. e.g. 'minimalist editorial agency portfolio'"}, 'style': {'enum': ['minimalism', 'editorial', 'brutalism', 'glassmorphism', 'swiss', 'maximalism', 'playful', 'dark-mode', 'monochrome', 'vintage', 'futurist'], 'type': 'string', 'description': "Filter to one visual style (e.g. 'minimalism', 'editorial')"}, 'detail': {'enum': ['concise', 'standard', 'full'], 'type': 'string', '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."}, 'device': {'enum': ['desktop', 'mobile'], 'type': 'string', 'description': "'mobile' restricts to sites with a 375px capture pair and inlines the mobile thumbnail. Default: desktop."}, 'industry': {'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'], 'type': 'string', 'description': "Filter to one industry (e.g. 'saas', 'fintech', 'portfolio')"}, 'pageType': {'enum': ['landing', 'pricing', 'features', 'auth', 'about', 'blog', 'changelog', 'docs', 'other'], 'type': 'string', 'description': "Filter to a page kind: 'landing' (default homepages), 'pricing', 'features', 'auth', 'about', 'blog', 'changelog', 'docs', 'other'"}, 'accentHue': {'enum': ['warm', 'cool', 'neutral', 'chromatic-other'], 'type': 'string', 'description': "Accent temperature: 'warm' (10-60°), 'cool' (200-300°), 'neutral' (unsaturated), 'chromatic-other' (greens, magentas, everything else)."}, 'maxTokens': {'type': 'integer', 'maximum': 200000, 'minimum': 300, 'description': 'Approximate token ceiling for this response. Trims lower-ranked results and thumbnails; the top result and all URLs survive.'}, 'paperBand': {'enum': ['dark', 'mid', 'light'], 'type': 'string', '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': {'enum': ['grotesk-sans', 'geometric-sans', 'roman-serif', 'italic-serif', 'slab-serif', 'mono', 'display-condensed-bold', 'display-heavy', 'system-native', 'handwritten'], 'type': 'string', 'description': "Construction of the display face: 'grotesk-sans', 'geometric-sans', 'roman-serif', 'mono', 'display-condensed-bold', etc."}, 'macrostructure': {'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'], 'type': 'string', 'description': "Filter to a macrostructure (e.g. 'bento-grid')"}}}
历史
近期工具变更
已添加
get_reference_jsx
2026年9月17日 12:45
已添加
recommend
2026年9月17日 12:45
已添加
find_reference_components
2026年9月17日 12:45
已添加
get_collection
2026年9月17日 12:45
已添加
find_components
2026年9月17日 12:45
已添加
get_site_pages
2026年9月17日 12:45
已添加
get_filters
2026年9月17日 12:45
已添加
list_collections
2026年9月17日 12:45
已添加
find_examples_for_macrostructure
2026年9月17日 12:45
已添加
find_by_color
2026年9月17日 12:45
已添加
compare
2026年9月17日 12:45
已添加
find_similar
2026年9月17日 12:45
已添加
get_design_system
2026年9月17日 12:45
已添加
get_screen
2026年9月17日 12:45
已添加
search_screens
2026年9月17日 12:45
发现
类似的 MCP 服务器
GripForge
io.github.gripforgeai/mcp
Generates, rigs, animates, analyzes, and packages game characters, weapons, armor, effects, environments, and engine-ready assets.
spriteship
com.spriteship/spriteship
Generates and manages 2D game characters, assets, animations, tilesets, UI packs, maps, and engine-ready exports for multiple gam…
Blixtworks
com.blixtworks.www/tools
Offers pay-per-call utilities for text, image processing and analysis, data conversion, validation, web inspection, cryptography,…
Compose Preview Catalogs
io.github.yschimke/compose-preview
Browses, renders, compares, audits, and edits Jetpack Compose preview catalogs and associated UI designs.
arch-tools-mcp
io.github.Deesmo/arch-tools-mcp
Provides general-purpose agent APIs for browser automation, web and PDF extraction, data conversion, email operations, fact check…
kernelcad
com.kernelcad/kernelcad
Authors, evaluates, reviews, simulates, edits, and exports parametric CAD assemblies and geometry from editable TypeScript-based …
floot
com.floot/floot
Creates, edits, previews, databases, and publishes full-stack web and mobile applications with hosted resources and deployment wo…
Raven
ai.ravenmcp/raven-mcp
Supports coding agents with design audits, design-system guidance, and a configurable visual preference profile.