Loading ToolBench
MCP server for discovering and matching design styles from styles.refero.design
Four well-named tools with comprehensive descriptions (194 - 450 chars, above baseline 194 avg). All tools have explicit Zod schemas with typed parameters and descriptions. Tool annotations present (readOnlyHint, destructiveHint, idempotentHint). Output schemas documented in descriptions. Key gaps: error handling lacks recovery guidance (e.g., 'Style not found' should suggest search_styles); parameter constraints could be stricter (e.g., page max=50 but no validation shown); no batch operations despite agents likely calling list/search repeatedly.
Fetch the full design.md specification for a specific style from styles.refero.design. Returns a complete, AI-agent-ready design system document including: - North Star design philosophy - Full color palette with hex values and semantic roles - Typography specifications (font families, weights) - Type scale (size hierarchy for headings, body, captions) - Layout guidelines and spacing tokens - Surface/elevation system - Imagery guidelines - Design principles (dos & don'ts) - Component HTML/CSS examples - Similar design systems Use the style_id from refero_list_styles, refero_search_styles, or refero_match_style. Args: - style_id (string): UUID of the style (e.g. '90ce5883-bb24-4466-93f7-801cd617b0d1') - sections (string[]): Optional array to return only specific sections. Omit for full document. Valid values: 'overview', 'colors', 'typography', 'type_scale', 'spacing', 'surfaces', 'imagery', 'principles', 'components', 'similar', 'custom' - include_components (boolean): Include component HTML/CSS code examples (default: true) - response_format ('markdown' | 'json'): 'markdown' for full design.md, 'json' for raw design data (default: 'markdown') Returns (markdown): Complete design.md document ready to use as an AI prompt or design reference. Returns (json): Raw JSON design system data including all design tokens, components, and metadata. Examples: - Get full design.md for Linear: style_id="90ce5883-bb24-4466-93f7-801cd617b0d1" - Get only colors and typography: style_id="...", sections=["colors", "typography"] - Get raw data for programmatic use: response_format="json" Error: Returns "Error: Style not found" if the style_id is invalid.
List available design styles from styles.refero.design with pagination. Returns a catalog of curated design systems extracted from real products. Each entry includes: - Style ID (used with other tools like refero_get_design_md and refero_match_style) - Brand name and URL - North Star (design philosophy/mood descriptor, e.g. "Midnight Command Center") - Color scheme (light or dark) - Primary color palette - Typography / font families Args: - page (number): Page number, starting at 1. Each page contains ~20 styles. (default: 1) - response_format ('markdown' | 'json'): Output format (default: 'markdown') Returns (markdown): Formatted list with style details and refero.design links. Returns (json): { "page": number, "has_more": boolean, "next_page": number | null, "styles": [ { "id": string, // Style ID for use with other tools "siteName": string, "url": string, "northStar": string, "colorScheme": string, "colors": [{"name": string, "hex": string}], "fonts": string[], "thumbnailUrl": string, "stylePageUrl": string } ] } Examples: - "Show me what design styles are available" → page=1 - "Get the next page of styles" → page=2 - Use response_format="json" when you need to process IDs programmatically
Error handling lacks recovery guidance. 'Error: Style not found' should suggest calling refero_search_styles or refero_list_styles to discover valid IDs.
No input validation visible in source. Parameters like page (max=50) and limit (max=20) are declared but no runtime checks shown in referoApi.ts or tool handlers.
No batch operations. Agents calling refero_search_styles multiple times (e.g., for different queries) must make sequential calls. A batch_search_styles(queries: string[]) would reduce latency and token waste.
Parameter descriptions include example values ('e.g. dark minimal', 'e.g. Inter font'). LLMs may reuse these literally instead of adapting to context. Use enum constraints or format declarations instead.
| Scored | Grade | Overall | Spec posture | Rubric |
|---|---|---|---|---|
| 2026-09-23 | D | 59 | 2025-06-18+ | v2 |
Find the best matching design styles from styles.refero.design for your project. Analyzes your project description against the curated catalog of real-product design systems and ranks them by aesthetic fit. Returns the top matches with their full design.md documentation ready to use as an AI design prompt. This is the primary tool to use when you want design inspiration or a design system that fits your project's needs. Args: - project_description (string, 10-2000 chars): Describe your project — purpose, audience, desired vibe. Example: "A dark-themed SaaS dashboard for DevOps engineers. Should feel professional and technical, similar to Linear. Uses Inter font. Dark mode only." - color_scheme ('light' | 'dark' | 'any'): Preferred theme. 'any' infers from description (default: 'any') - industry_keywords (string[]): Optional domain keywords to boost matches (e.g. ['fintech', 'B2B', 'gaming']) - top_n (number): Number of top matches to return with full details, 1-5 (default: 3) - include_design_md (boolean): Include full design.md for the top match (default: true) - response_format ('markdown' | 'json'): Output format (default: 'markdown') Returns (markdown): - Ranked list of best-matching styles with match scores and reasons - Full design.md for the #1 match (if include_design_md=true) - Style IDs to use with refero_get_design_md for other matches Returns (json): { "matches": [ { "rank": number, "score": number, "reasons": string[], "id": string, "siteName": string, "northStar": string, "colorScheme": string, "stylePageUrl": string, "designMd": string | null // Only for top match when include_design_md=true } ] } Examples: - "Find a style for my dark minimal developer tool" → project_description="Dark minimal SaaS tool for developers, command-line feel", color_scheme="dark" - "Match a design for a finance app" → project_description="Mobile banking app, clean professional look", industry_keywords=["fintech"] - "Get top 5 matches for my creative portfolio" → project_description="Creative agency portfolio with bold typography", top_n=5
Search design styles from styles.refero.design by keyword, mood, brand, color, or typography. Searches across brand names, north star descriptors, color names, and font families. Use this to quickly find styles matching a specific aesthetic, brand reference, or design attribute. Args: - query (string): Search keyword or phrase. Examples: "dark minimal", "Stripe", "Inter font", "finance", "playful colorful" - color_scheme ('light' | 'dark' | 'any'): Filter by overall theme (default: 'any') - limit (number): Max results to return, 1-20 (default: 10) - response_format ('markdown' | 'json'): Output format (default: 'markdown') Returns (markdown): Ranked list of matching styles with IDs and details. Returns (json): { "query": string, "total_searched": number, "results": [ { "id": string, "siteName": string, "northStar": string, "colorScheme": string, "fonts": string[], "colors": [{"name": string, "hex": string}], "stylePageUrl": string } ] } Examples: - "Find dark design systems" → query="dark", color_scheme="dark" - "Search for finance app designs" → query="finance banking" - "Find styles using Inter font" → query="Inter" - "Show me minimal clean designs" → query="minimal clean" Note: Uses refero_match_style for deeper project-based matching with scoring.
Response truncation (CHARACTER_LIMIT=40000) in getDesignMd.ts silently truncates markdown without indicating to the LLM that content was cut. Should return a flag or message: 'Design.md truncated to 40000 chars. Call with sections=[...] to fetch specific parts.'