refero-styles-mcp-server
MCP server that finds and returns design.md specs from styles.refero.design matching your project
Documentation
refero-styles-mcp-server
An MCP server that searches styles.refero.design for design systems that match your project's idea, needs, and style — returning ready-to-use `design.md` documentation.
Tools
| Tool | Description |
|---|---|
| `refero_list_styles` | Browse the curated catalog with pagination |
| `refero_search_styles` | Search by keyword, mood, brand, or color |
| `refero_get_design_md` | Fetch the full design.md for a specific style |
| `refero_match_style` | Primary tool — match styles to your project description |
Quick Start
npm install
npm run build
node dist/index.jsUsage with Claude Desktop
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"]
}
}
}Example Prompts
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.How It Works
1. `refero_match_style` fetches all styles from the Refero API (~60 styles across 3 pages)
2. Scores each style against your description using mood detection, keyword matching, and color scheme alignment
3. Returns the top N matches ranked by score with their reasons
4. Fetches and returns the full design.md for the top match — ready to paste into your AI coding prompt
Project Structure
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 handlingFrequently asked questions
What is refero-styles-mcp-server?
refero-styles-mcp-server is MCP server that finds and returns design.md specs from styles.refero.design matching your project
How do I install refero-styles-mcp-server?
Open the GitHub repository and follow its README. Most MCP servers are added to your client's MCP config, then called by your agent.
Is refero-styles-mcp-server open source?
Yes — it is hosted on GitHub at https://github.com/faridjafarlee/refero-styles-mcp-server and has 1 stars.
Related MCP tools
MCP Aggregator, Orchestrator, Middleware, Gateway in one docker
Testing and evaluation platform to chat, inspect, and debug MCP servers, MCP apps, and ChatGPT apps.
MCP Aggregator, Orchestrator, Middleware, Gateway in one docker TypeScript-based implementation. Trusted by 1400+ developers.
Browser automation clicks buttons. OpenTabs calls APIs.
A Unified MCP Server Management App TypeScript-based implementation. Trusted by 800+ developers. Trusted by 800+ developers.
Open-source cross-agent memory layer for coding agents via MCP. Compatible with Claude Code, Codex, Cursor, Windsurf, Gemini CLI, Antigravity, OpenClaw, Hermes Agent, Oh-my-Pi, Pi, Copilot, Kiro, OpenCode, and Trae.
Run your own MCP server? See who uses it and what to fix.
Measure it with TrackMCP