refero_list_stylesLABSCO SUMMARY
A design system chosen for the project, not browsed for.
refero_match_style is the whole point: one sentence about the product goes in, and a complete design.md comes out ready to paste into a coding prompt. The other three are for when you already know the name of the style you want.
What it is
A search layer over styles.refero.design, a curated catalog of design systems. Describe a project and it scores every style against the description using mood detection, keyword matching and colour scheme alignment, then returns the full design.md for the best match.
What you get
- Your project description matched against the catalog, with the top N ranked by score and the reasons given, and the winner's full design.md fetched and returned (refero_match_style)
- The curated catalog browsed with pagination (refero_list_styles)
- Search by keyword, mood, brand or colour (refero_search_styles)
- The complete design.md for a style you name (refero_get_design_md)
Requirements
Node with a local build, npm install then npm run build, and node dist/index.js as the command in your client. It reads the public Refero API — a curated catalog small enough to page through end to end — with no key.
Setup effort
Build from source — git clone https://github.com/faridjafarlee/refero-styles-mcp-server.git
USE CASES
01
Starting a project that needs to look deliberate
Describe it in a sentence, dark SaaS dashboard for developers or clean fintech mobile app in a light theme, and the top matches come back ranked with reasons, plus the winning design.md in full.
02
Giving a coding agent a visual brief
The returned design.md is written to be pasted into the prompt, so the agent builds against a described system instead of inventing colours and spacing per component.
03
Finding a style by the feeling you want
Search by mood, colour, keyword or brand when the requirement is a vibe rather than a spec, and read the candidates before committing to one.
04
Seeing what is in the catalog
Browse the curated list with pagination when you want the range rather than a recommendation, which is the honest way to find out whether your case is covered at all.
4 tools
Listed in project docs. Your client may show a different list.
refero_search_stylesrefero_get_design_mdrefero_match_styleBEFORE YOU INSTALL
What to know first
Tools you get
4 tools named in the project's documentation.
Where it runs
The documented client runs the server on your machine.
INSTALLATION
Connect your client
You clone and build this one yourself.
Server setup
TERMINAL
git clone https://github.com/faridjafarlee/refero-styles-mcp-server.git
cd refero-styles-mcp-server
npm install
npm run buildMCP Clients
Claude Desktop
CLAUDE DESKTOP · JSON
{
"mcpServers": {
"refero-styles": {
"command": "node",
"args": [
"<YOUR_PATH_TO_REFERO_STYLES_MCP_SERVER>/dist/index.js"
]
}
}
}
