Refero Design Styles

refero-styles-mcp-server

Um servidor MCP que pesquisa styles.refero.design por sistemas de design que correspondem à ideia, às necessidades e ao estilo do seu projeto — retornando documentação design.md pronta para uso.

Ferramentas

Ferramenta	Descrição
refero_list_styles	Navegue pelo catálogo selecionado com paginação
refero_search_styles	Pesquise por palavra-chave, clima, marca ou cor
refero_get_design_md	Obtenha o design.md completo para um estilo específico
refero_match_style	Ferramenta principal — corresponda estilos à descrição do seu projeto

Início Rápido

npm install
npm run build
node dist/index.js

Uso com o Claude Desktop

Adicione a ~/Library/Application Support/Claude/claude_desktop_config.json:

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

Exemplos 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.

Como Funciona

1. refero_match_style busca todos os estilos da API do Refero (~60 estilos em 3 páginas)
2. Pontua cada estilo em relação à sua descrição usando detecção de clima, correspondência de palavras-chave e alinhamento de esquema de cores
3. Retorna as N melhores correspondências classificadas por pontuação, com suas justificativas
4. Busca e retorna o design.md completo para a melhor correspondência — pronto para colar no seu prompt de codificação de IA

Estrutura do Projeto

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