Servidor MCP de Refero Design Styles

refero-styles-mcp-server

Un servidor MCP que busca en styles.refero.design sistemas de diseño que coincidan con la idea, necesidades y estilo de tu proyecto — devolviendo documentación design.md lista para usar.

Herramientas

Herramienta	Descripción
`refero_list_styles`	Explora el catálogo curado con paginación
`refero_search_styles`	Busca por palabra clave, ambiente, marca o color
`refero_get_design_md`	Obtén el design.md completo para un estilo específico
`refero_match_style`	Herramienta principal — relaciona estilos con la descripción de tu proyecto

Inicio Rápido

npm install
npm run build
node dist/index.js

Uso con Claude Desktop

Añade a ~/Library/Application Support/Claude/claude_desktop_config.json:

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

Ejemplos de 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.

Cómo Funciona

refero_match_style obtiene todos los estilos de la API de Refero (~60 estilos en 3 páginas)
Puntúa cada estilo según tu descripción usando detección de ambiente, coincidencia de palabras clave y alineación de esquemas de color
Devuelve las N mejores coincidencias ordenadas por puntuación con sus razones
Obtiene y devuelve el design.md completo para la mejor coincidencia — listo para pegar en tu prompt de codificación con IA

Estructura del Proyecto

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

Refero Design Styles

Documentación