Refero MCP
OfficialRefero MCP
Ищите на styles.refero.design на обычном английском языке и добавляйте DESIGN.md в любой проект.
Быстрая навигация
Ссылка | Раздел | Что делает | Время |
Обзор | Каталог, пробел, обертка | ~1 мин | |
Настройка | Одна строка в Claude Code | ~1 мин | |
Общение | Промпты на обычном английском | ~2 мин | |
Справочник | Шесть инструментов, по одной строке | ~1 мин | |
Настройка | Переменные окружения + JSON конфиг | ~1 мин | |
Справочник | Кэш, эмбеддинги, генерация DESIGN.md | ~1 мин | |
Справочник | Три вероятные первые проблемы | ~1 мин | |
Мета | MIT | — |
Related MCP server: Design System MCP Server
Что это такое
Refero Styles — это бета-каталог из около 200 отобранных сайтов, где кто-то проделал кропотливую работу по извлечению цветов, типографики, отступов и рекомендаций «делай/не делай» для каждого стиля. Каждая запись поставляется с блоком designSystem, который по сути является готовым DESIGN.md.
Этот MCP оборачивает данный каталог, чтобы Claude Code мог искать в нем на естественном языке и добавлять сгенерированный DESIGN.md прямо в любой проект, который вы создаете. Никакого копирования JSON из вкладок браузера, никаких таблиц токенов вручную.
Он предназначен для всех, кто использует Claude Code для запуска нового приложения, презентации или клиентского проекта и хочет зафиксировать дизайн-код до отрисовки первого компонента.
Быстрая установка
Одна строка:
claude mcp add refero -- npx -y fidgetcoding-refero-mcpПерезапустите Claude Code и начните описывать желаемый внешний вид.
Если вы хотите поиск по «вайбу» (семантическое ранжирование по поэтичному описанию northStar каждого стиля), передайте ключ OpenAI:
claude mcp add refero --env OPENAI_API_KEY=sk-... -- npx -y fidgetcoding-refero-mcpБез него поиск переключается на оценку по ключевым словам. Работает нормально, просто менее «магически».
Для пользователей claude_desktop_config.json:
{
"mcpServers": {
"refero": {
"command": "npx",
"args": ["-y", "fidgetcoding-refero-mcp"],
"env": {
"OPENAI_API_KEY": "sk-...",
"REFERO_MCP_VAULT_DIR": "/absolute/path/to/your/vault"
}
}
}
}Использование
[!IMPORTANT] Вы говорите. Claude выполняет. Никаких команд, никакого синтаксиса, никакого JSON.
Каждый инструмент здесь настроен на промпты на обычном английском языке. Вам не нужно запоминать названия инструментов или создавать полезные нагрузки — Claude сам выбирает инструмент и заполняет параметры.
Несколько промптов, которые хорошо работают:
"Find me a dark editorial style with a serif and a warm accent.""Pull the full breakdown for Linear.""What's similar to Vercel in the Refero catalog?""Render Cursor's DESIGN.md — don't save it yet, just show me.""Save Cursor's DESIGN.md into my PARZVL project.""Show me only dark-mode brutalist styles, top five.""Refresh the Refero catalog before we start the design pass."Больше готовых рецептов в docs/USAGE.md.
Инструменты
Инструмент | Что делает |
| Поиск по «вайбу» на естественном языке по всему каталогу. Эмбеддинги, если задан |
| Получение полной дизайн-системы для одного стиля. Принимает uuid, имя хоста (например, |
| Собственное ранжирование «похожих стилей» Refero для заданного стиля. Бесплатные рекомендации из источника. |
| Просмотр локального зеркала каталога с опциональными фильтрами по теме/тегам. Стабильный порядок. |
| Отрисовка стиля в виде удобного для агента DESIGN.md (frontmatter, north star, таблица цветов, dos/donts). Опционально записывает на диск. |
| Принудительное полное обновление каталога и перезапись локального зеркала. Пропускает 24-часовой TTL. |
Конфигурация
Все опционально. Значения по умолчанию подобраны так, чтобы MCP просто работал.
Переменная | Обязательно | По умолчанию | Что делает |
| Нет | не задано | Включает поиск по «вайбу» через |
| Нет |
| Переопределите, если Refero изменит API или вы указываете на фикстуру. |
| Нет |
| Где хранятся локальное зеркало каталога, эмбеддинги и кэш деталей. |
| Нет |
| Как долго кэшированная страница считается свежей. |
| Нет (обязательно для записи в проект) | не задано | Абсолютный путь к корню хранилища, в который записывает |
Пример .env.example поставляется в корне репозитория.
Для
REFERO_MCP_VAULT_DIRнет значения по умолчанию. В предыдущем черновике был жестко прописан путь моего ноутбука, что отлично работало ровно на одной машине на Земле. Рецензент это заметил. Теперь, если вы его не зададите, инструмент просто откажется записывать — грубо, но лучше, чем создавать файлы в папке, которой нет на вашем компьютере.
Как это работает
На момент написания публичной документации API Refero нет — структура была сопоставлена эмпирически на основе живого сайта. Полный разбор находится в docs/api-surface.md, чтобы я в будущем не переоткрывал его заново.
Локальное зеркало каталога. Refero использует пагинацию
?page=N, но молча игнорирует?search=,?q=и?colorScheme=. Поэтому этот MCP один раз проходит по страницам, зеркалирует их локально вREFERO_CACHE_DIRи выполняет всю фильтрацию и ранжирование на стороне клиента.Поиск по «вайбу» через
northStar. Каждый стиль Refero поставляется с однострочным поэтичным резюме под названиемnorthStar. Если заданOPENAI_API_KEY, MCP создает эмбеддинги этих резюме с помощьюtext-embedding-3-smallи ранжирует их по косинусному сходству с вашим запросом. Без ключа он переключается на оценку по ключевым словам вnorthStar+ теги + название сайта.DESIGN.md генерируется локально. Refero не предоставляет эндпоинт
/design.md. MCP синтезирует его изstyle.fullResult.designSystem(dos, donts, теги, тема, цвета с ролевыми тегами). Вывод совместим с навыками/stitch-design-tasteи/design-taste-frontend.
Устранение неполадок
«Стили не найдены» / каталог кажется пустым. При первом запуске кэш пуст. Попросите Claude «обновить каталог Refero» один раз — он пройдет по ~10 страницам с вежливой задержкой в 250 мс и запишет их в REFERO_CACHE_DIR. После этого поиск будет мгновенным.
Результаты поиска кажутся основанными на ключевых словах, а не семантическими. Вероятно, у вас не задан OPENAI_API_KEY. Добавьте его в конфигурацию MCP и перезапустите, или используйте более специфичную лексику каталога (отрасли плюс теги, такие как editorial, brutalist, glass).
refero_design_md возвращает markdown, но не записывает на диск. REFERO_MCP_VAULT_DIR не задан. Установите его на корень вашего хранилища (абсолютный путь), и инструмент будет записывать в <vault>/05-Projects/<NAME>/DESIGN.md. Без этого вы получите markdown в диалоге и сможете вставить его куда угодно.
Лицензия
MIT — подробности см. в LICENSE.
Автор
Создано Nate Davidovich / Lorecraft LLC.
GitHub: lorecraft-io
npm: lorecraft
Родственные проекты: morgen-mcp, motion-mcp
Безопасность: сканирование gitleaks
Этот репозиторий поставляется с конфигурацией .gitleaks.toml и вспомогательным скриптом scripts/security-scan.sh, который сканирует рабочее дерево на наличие секретов (токены GitHub, ключи API, JWT, закрытые ключи, ключи Anthropic и т. д.).
bash scripts/security-scan.shХук .husky/pre-commit также запускает gitleaks protect --staged при каждом коммите и выдает предупреждение, если gitleaks не установлен локально.
Если у вас его еще нет:
macOS:
brew install gitleaks
Available Tools
6 toolsrefero_design_mdA
Render a Refero style as an agent-friendly DESIGN.md (frontmatter, north star, color table, fonts, dos/donts, tags). When save_to_project is set, writes the file to /05-Projects//DESIGN.md.
| Name | Required | Description | Default |
|---|---|---|---|
| identifier | Yes | uuid, hostname/URL, or site name to render. | |
| save_to_project | No | Vault project folder name (e.g. "PARZVL"). Sanitized; must be [A-Za-z0-9_.-]. |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description discloses the side effect of writing a file when save_to_project is set and specifies the file path. However, it does not detail overwrite behavior, error handling, or permission requirements, leaving some behavioral ambiguity.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Two concise sentences: first states purpose and content, second adds conditional behavior. No superfluous information, efficiently communicates core functionality.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a tool with two parameters and no output schema, the description explains the main action and optional save. It could mention that it generates a document without modifying the original style, but overall it is sufficient for an agent to understand what the tool does.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The input schema already has 100% coverage with clear descriptions. The tool description adds context by explaining the file path construction from save_to_project, going beyond the schema. Good addition but not essential.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool renders a Refero style as a DESIGN.md file with specified contents (frontmatter, north star, etc.) and optionally writes it to a project folder. This distinguishes it from sibling tools that retrieve, list, or search styles.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description explains what the tool does but lacks explicit guidance on when to use it over alternatives like refero_get or refero_search. No when/ when-not or comparison to siblings is provided.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
refero_getA
Fetch the full design system for a single style. Accepts a uuid, a hostname/URL (e.g. cursor.com), or a site name (e.g. "Cursor"). Fuzzy-matches site names within Levenshtein distance 2.
| Name | Required | Description | Default |
|---|---|---|---|
| identifier | Yes | uuid, hostname/URL, or site name. |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description carries the full burden. It discloses fuzzy matching behavior and acceptable input types. It does not explicitly state the tool is read-only or describe failure modes (e.g., no match found), but the intention is clear and no contradictions exist.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Two sentences, no redundancy, front-loaded with the primary action. Every word adds value—first sentence states purpose, second sentence details input flexibility and matching algorithm.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given no output schema, the description could mention what the tool returns (e.g., JSON object of the design system), but for a simple fetch operation, the description is sufficiently complete. The context of sibling tools helps, and the tool is straightforward.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The input schema already describes the 'identifier' parameter as 'uuid, hostname/URL, or site name' (100% coverage). The description adds value by explaining fuzzy matching (Levenshtein distance 2) and giving an example, which goes beyond the schema's basic description.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool fetches "the full design system for a single style," specifying the verb 'Fetch' and the resource 'full design system for a single style'. It distinguishes itself from sibling tools like refero_list (list all), refero_search (search), and refero_similar (find similar), which have different purposes.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description explicitly lists acceptable input formats (uuid, hostname/URL, site name) and provides an example ("Cursor"). It also mentions fuzzy matching with Levenshtein distance 2, giving clear guidance on how the identifier will be resolved, which helps the agent choose correct inputs.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
refero_listA
Browse the local catalog mirror with optional theme/tag filters. Returns paginated, stably-ordered results (newest first, then site name).
| Name | Required | Description | Default |
|---|---|---|---|
| theme | No | Filter to light- or dark-themed sites only. | |
| tags | No | Filter by tag terms (matched against siteName + northStar in the catalog projection). | |
| page | No | 1-indexed page number (default 1). | |
| limit | No | Items per page (default 20, max 50). |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations provided, so description must cover behavior. It mentions read-like operation ('browse') and stable ordering, but does not disclose caching, rate limits, or whether the mirror is synced. Adequate but minimal.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Two sentences, no wasted words. Purpose and key details are front-loaded, making it easy to parse.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Covers pagination, ordering, and filters. No output schema exists, but description could mention return structure. Still, given the tool's simplicity and thorough schema descriptions, it is largely complete.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema already describes all 4 parameters with 100% coverage. Description adds no additional meaning beyond restating 'optional theme/tag filters' and pagination. Baseline 3 is appropriate.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
Description clearly states the tool browses a catalog mirror with optional filters and pagination. Verb 'browse' and resource 'local catalog mirror' are specific, and the ordering detail distinguishes it from sibling tools like refero_search.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Implies usage for browsing/filtering the catalog, but does not explicitly compare with alternatives (e.g., refero_search for full-text search, refero_similar for similar sites). No guidance on when not to use.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
refero_refreshA
Force a full re-fetch of the styles.refero.design catalog and overwrite the local mirror. Useful after the catalog has changed and you don't want to wait for the 24h TTL.
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Discloses destructive behavior (overwrite local mirror) but lacks details on authorization, side effects, rate limits, or synchronous/asynchronous nature. No annotations to supplement.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Two efficient sentences: first states action, second provides use case. No fluff, perfectly front-loaded.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given zero parameters and no output schema, description adequately explains purpose and when to use. Lacks mention of return value or sync/async but sufficient for a simple refresh.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Input schema has zero parameters, so description doesn't need to document any. Schema coverage is 100%. Baseline 4 for no parameters.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
Clearly states the action: force full re-fetch and overwrite local mirror. Specifies the resource (styles.refero.design catalog) and implies the verb 'refresh'.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Provides explicit when-to-use: after catalog changes and wanting to avoid 24h TTL. Implies alternative is waiting or using other tools like refero_get for normal reads.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
refero_searchA
Natural-language search over the styles.refero.design catalog. Returns the top matches scored by an embedding model (when OPENAI_API_KEY is set) or a BM25-lite keyword fallback. The local catalog is mirrored on first call and refreshed automatically every 24 hours.
| Name | Required | Description | Default |
|---|---|---|---|
| query | Yes | Natural-language vibe query, e.g. "playful neobrutalist saas". | |
| theme | No | Filter to light- or dark-themed sites only. | |
| tags | No | Filter to styles whose tags / name / northStar mention any of these terms. | |
| limit | No | How many results to return (default 10, max 50). |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations provided, but the description discloses the search mechanism (embedding or BM25 fallback), caching behavior (mirrored on first call), and refresh policy (every 24 hours). This explains backend behavior adequately for a read-only search tool, though no side effects are mentioned.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Three concise sentences covering purpose, algorithm, and caching. No redundant information; all sentences earn their place.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Without an output schema, the description does not specify the structure of returned results (e.g., fields like name, tags, thumbnail). Also lacks details on how tag filtering interacts with the search. Adequate but has gaps.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 100% with clear parameter descriptions. The description does not repeat parameter details but adds context about the search algorithm, which is separate from parameter definitions. Baseline 3 is appropriate.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
Clearly identifies the tool as a natural-language search over a specific catalog (styles.refero.design). It distinguishes from siblings like refero_list (listing) and refero_similar (similarity search) by emphasizing vibe-based search. The mention of embedding vs BM25 fallback adds specificity.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Implies use for natural-language queries but does not explicitly state when to avoid this tool or prefer siblings. No direct comparison with sibling tools, leaving the agent to infer context from names.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
refero_similarA
Refero's own "similar styles" recommendation list for a given style. Useful for follow-up exploration once you've found a candidate via refero_search.
| Name | Required | Description | Default |
|---|---|---|---|
| identifier | Yes | uuid, hostname/URL, or site name. | |
| limit | No | How many similar styles to return (default 10, max 20). |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations provided; description does not disclose read-only nature, required permissions, or any side effects. Minimal behavioral info beyond purpose.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Two concise sentences with no fluff. First sentence states purpose, second gives usage context.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
No output schema; description does not hint at return format or pagination. However, tool is simple with good sibling context, so adequate but not complete.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema covers both parameters with descriptions; description adds no extra meaning. Baseline 3 due to 100% schema coverage.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
Clearly states 'recommendation list for a given style' and distinguishes from siblings by referencing refero_search as a precursor.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Explicitly says 'Useful for follow-up exploration once you've found a candidate via refero_search', which tells when to use it. Does not explicitly exclude alternatives, but context is sufficient.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Tool Schema Changelog
Recent tool additions, removals, and schema changes observed during successful MCP inspections. Dates show when Glama detected each change.
6 tool updates
v0.1.0- First observed
refero_design_md - First observed
refero_get - First observed
refero_list - First observed
refero_refresh - First observed
refero_search - First observed
refero_similar
TDQS
Each tool has a clearly distinct purpose: fetching details, browsing, searching, refreshing, getting recommendations, and generating design docs. No overlap in functionality.
All tools share the 'refero_' prefix and use lowercase with underscores, but the suffixes vary between verbs (get, list, refresh, search) and non-verbs (similar, design_md), causing slight inconsistency.
6 tools is well-scoped for interacting with a design system catalog, covering key operations without being too few or too many.
The tool set covers browsing, searching, fetching details, getting recommendations, refreshing the catalog, and generating documentation. Minor gaps like filtering by popularity are absent but core workflows are complete.
Maintenance
Resources
Unclaimed servers have limited discoverability.
Looking for Admin?
If you are the server author, to access and configure the admin panel.
Related MCP Connectors
Access and maintain design system docs, tokens, components, skills, and contexts across any project.
Serves your design system and coding standards to coding agents, so they stop guessing.
Versioned documentation registry and semantic search for AI tools and coding assistants.
Software component catalog: search your org's services, docs, APIs, dependencies, and ownership.
Related MCP Servers
- AlicenseAqualityDmaintenanceProvides semantic search and a tag-based knowledge graph for any project, auto-discovering local markdown knowledge bases with YAML frontmatter.1014MIT
- AlicenseNot gradedqualityDmaintenanceProvides resources, tools, and prompts for a Design System via MCP protocol, enabling component search, reading, and related component discovery.225MIT
- AlicenseNot gradedqualityDmaintenanceProvides AI assistants with access to design documentation across multiple code libraries, enabling discovery of existing utilities and patterns to avoid reimplementation.2MIT
- AlicenseNot gradedqualityDmaintenanceAnalyzes codebases to automatically generate README, API docs, architecture diagrams, and CHANGELOG.16MIT
Latest Blog Posts
- Who's Calling? MCP Hosts Are an Identity Blind Spot (And the Spec Knows It)By Om-Shree-0709 on .mcpAgent IdentityOAuth 2.1
- Your AI Chatbot Just Exposed Your CEO's Salary to an InternBy Om-Shree-0709 on .Agent IdentityMCP SecurityOAuth Delegation
- Why MCP Servers Need Execution Sandboxing (And Why Your Current Stack Isn't Enough)By Om-Shree-0709 on .Agentic AiPrompt InjectionWebAssembly
MCP directory API
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/fidgetcoding/refero-design-mcp'
If you have feedback or need assistance with the MCP directory API, please join our Discord server