Refero Design Styles

by faridjafarlee

658 downloads

Not rated

GitHub

About

Looks up for design.md file from refero styles to make your UI design better.

Details

Author: faridjafarlee
Downloads: 658
Categories: Design, Other, Knowledge Base, Media

Setting up with Highlight

This MCP is not yet compatible with Highlight’s one-click setup. However, you can still use it with Highlight by following these steps:

Download and install Highlight from highlightai.com/download
Navigate to the plugins tab and select "Add Custom Plugin"
Configure the plugin with the settings below

Plugin Name Refero Design Styles

Command (node, npx, python, etc.)

Please refer to the README for specific instructions on how to obtain API keys or other required environment variables.
Enable "Start Automatically" if you want the plugin to start when Highlight launches

Setting up with Cursor

Open Cursor's settings
Navigate to the MCP section
Click "Add new Global MCP server"
Copy and paste the configuration below based on your operating system

JSON

{
    "mcpServers": {
        "refero design styles": {
            "refero-styles-mcp-server": {
                "command": "node",
                "args": [
                    "dist/index.js"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "refero design styles": {
            "refero-styles-mcp-server": {
                "command": "node",
                "args": [
                    "dist/index.js"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "refero design styles": {
            "refero-styles-mcp-server": {
                "command": "node",
                "args": [
                    "dist/index.js"
                ]
            }
        }
    }
}

Setting up with Claude Desktop

Open Claude Desktop's settings
Go to the Integrations tab
Click "Add MCP Server"
Use the configuration below based on your operating system

Note: Make sure Claude Desktop is running before attempting to connect.

JSON

{
    "mcpServers": {
        "refero design styles": {
            "refero-styles-mcp-server": {
                "command": "node",
                "args": [
                    "dist/index.js"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "refero design styles": {
            "refero-styles-mcp-server": {
                "command": "node",
                "args": [
                    "dist/index.js"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "refero design styles": {
            "refero-styles-mcp-server": {
                "command": "node",
                "args": [
                    "dist/index.js"
                ]
            }
        }
    }
}

Setting up with Windsurf

Open Windsurf's preferences
Go to the Integrations section
Click "Add MCP Integration"
Use the configuration below based on your operating system

JSON

{
    "mcpServers": {
        "refero design styles": {
            "refero-styles-mcp-server": {
                "command": "node",
                "args": [
                    "dist/index.js"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "refero design styles": {
            "refero-styles-mcp-server": {
                "command": "node",
                "args": [
                    "dist/index.js"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "refero design styles": {
            "refero-styles-mcp-server": {
                "command": "node",
                "args": [
                    "dist/index.js"
                ]
            }
        }
    }
}

Setting up with Cline

Open Cline's settings
Navigate to the Integrations section
Click "Add MCP Server"
Copy and paste the configuration below based on your operating system

Note: Make sure to restart Cline after adding the configuration.

JSON

{
    "mcpServers": {
        "refero design styles": {
            "refero-styles-mcp-server": {
                "command": "node",
                "args": [
                    "dist/index.js"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "refero design styles": {
            "refero-styles-mcp-server": {
                "command": "node",
                "args": [
                    "dist/index.js"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "refero design styles": {
            "refero-styles-mcp-server": {
                "command": "node",
                "args": [
                    "dist/index.js"
                ]
            }
        }
    }
}

Setting up with Goose

Open Goose's preferences
Go to the Integrations tab
Select "MCP Servers"
Click "Add New Server"
Use the configuration below based on your operating system

JSON

{
    "mcpServers": {
        "refero design styles": {
            "refero-styles-mcp-server": {
                "command": "node",
                "args": [
                    "dist/index.js"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "refero design styles": {
            "refero-styles-mcp-server": {
                "command": "node",
                "args": [
                    "dist/index.js"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "refero design styles": {
            "refero-styles-mcp-server": {
                "command": "node",
                "args": [
                    "dist/index.js"
                ]
            }
        }
    }
}

From the repository

Install with npm, build the project, and run the server. For Claude Desktop, add the server to the MCP configuration. Invoke tools like refero_match_style by describing your project (e.g., "dark SaaS dashboard for developers") to receive matched design styles.

Claude Desktop / Cursor

Paste into your MCP client config file to install this server.

{
    "mcpServers": {
        "refero design styles": {
            "refero-styles-mcp-server": {
                "command": "node",
                "args": [
                    "dist/index.js"
                ]
            }
        }
    }
}

McpServers

{
    "refero-styles-mcp-server": {
        "command": "node",
        "args": [
            "dist/index.js"
        ]
    }
}

Looks for design.md file in refero styles to make your UI design better.

An MCP server that searchesstyles.refero.designfor design systems that match your project's idea, needs, and style — returning ready-to-usedesign.mddocumentation.

npm install npm run build node dist/index.js

Add to~/Library/Application Support/Claude/claude_desktop_config.json:

{ "mcpServers": { "refero-styles": { "command": "node", "args": ["/path/to/refero-styles-mcp-server/dist/index.js"] } } }

Find a design style for my dark SaaS dashboard targeting developers.

Match a design.md for a clean fintech mobile app, light theme.

Get the full design.md for Linear's design system.

- refero_match_stylefetches all styles from the Refero API (~60 styles across 3 pages)
- Scores each style against your description using mood detection, keyword matching, and color scheme alignment
- Returns the top N matches ranked by score with their reasons
- Fetches and returns the full design.md for the top match — ready to paste into your AI coding prompt

src/ ├── index.ts # Server entry point ├── constants.ts # API URLs and limits ├── types.ts # TypeScript interfaces ├── services/ │ └── referoApi.ts # API client for styles.refero.design ├── tools/ │ ├── listStyles.ts # refero_list_styles │ ├── searchStyles.ts # refero_search_styles │ ├── getDesignMd.ts # refero_get_design_md │ └── matchStyle.ts # refero_match_style └── utils/ ├── designMd.ts # Generates design.md from JSON data └── errors.ts # API error handling

You're agent can Chain 60+ AI image and video models on one workflow canvas

Search 1,145 real website designs by style, font, colour, section and measured design tokens.

Production-grade MCP server that lets AI assistants control AutoCAD on Windows via natural language — draw lines, circles, rectangles, manage layers, calculate areas, and export PDFs through the AutoCAD COM API.

Changeimageto - Free Image Editing tools

16 tools to remove backgrounds, blur or grayscale backgrounds, change colors, convert formats (PNG/JPEG/WebP/…), upscale, denoise/enhance, run OCR, export PDF, edit text in images (Gemini), clean watermarks, inpaint masked regions, and run bulk resize / convert / quality checks.

Build your custom templated images. One at a time or batches. Save them to presets to reuse later. Create templates or images via agent using MCP server.

This MCP (Model Context Protocol) server provides integration with Wiki.JS for searching and listing pages from Agent Voice Response Wiki.JS instance.

Fetch, convert, and search AWS documentation pages, with recommendations for related content.

Create and read feature flags, review experiments, generate flag types, search docs, and interact with GrowthBook's feature flagging and experimentation platform.

Production-ready RAG out of the box to search and retrieve data from your own documents.

Official Notion MCP server for searching, reading, creating, and updating Notion pages, databases, and workspace content from AI agents.

No reviews yet — be the first

Use Google, GitHub, or an email account so ratings stay tied to real people.

Email sign in

No reviews posted yet.

About

Details

Jump to

Setting up with Highlight

From the repository

Claude Desktop / Cursor

McpServers

Changeimageto - Free Image Editing tools

Install

More like this

Sequential Thinking

Aws Kb Retrieval Server

Memory

Filesystem

EverArt

Google Drive