Skip to main content
Glama
fidgetcoding

Refero MCP

Official
by fidgetcoding

Refero MCP

styles.refero.design을 평이한 영어로 검색하고 모든 프로젝트에 DESIGN.md를 추가하세요.

npm version License: MIT Node MCP Compatible

Follow on X LinkedIn YouTube Instagram


빠른 탐색

링크

섹션

기능

시간

이것은 무엇인가

개요

카탈로그, 격차, 래핑

~1분

빠른 설치

설정

Claude Code에 한 줄 추가

~1분

사용법

대화하기

평이한 영어 프롬프트

~2분

도구

참조

6가지 도구, 각 한 줄

~1분

구성

설정

환경 변수 + JSON 구성

~1분

작동 원리

참조

캐시, 임베딩, DESIGN.md 생성

~1분

문제 해결

참조

예상되는 초기 세 가지 문제

~1분

라이선스 + 저자

메타

MIT


Related MCP server: Design System MCP Server

이것은 무엇인가

Refero Styles는 색상, 타이포그래피, 간격, 스타일별 권장/금지 사항을 추출하는 고된 작업을 대신 수행해 주는 약 200개의 큐레이션된 사이트 카탈로그입니다. 각 항목은 DESIGN.md가 될 준비가 된 designSystem 블록과 함께 제공됩니다.

이 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에서 확인하세요.


도구

도구

기능

refero_search

카탈로그 전체에 대한 자연어 바이브 검색. OPENAI_API_KEY가 설정된 경우 임베딩을 사용하며, 그렇지 않으면 BM25-lite로 대체됩니다.

refero_get

특정 스타일의 전체 디자인 시스템을 가져옵니다. uuid, 호스트 이름(예: cursor.com) 또는 사이트 이름(예: "Cursor")을 허용합니다.

refero_similar

특정 스타일에 대한 Refero 자체의 "유사 스타일" 순위입니다. 업스트림에서 제공하는 무료 추천입니다.

refero_list

선택적 테마/태그 필터를 사용하여 로컬 카탈로그 미러를 탐색합니다. 안정적으로 정렬됩니다.

refero_design_md

스타일을 에이전트 친화적인 DESIGN.md(프런트매터, north star, 색상 표, 권장/금지 사항)로 렌더링합니다. 선택적으로 디스크에 기록합니다.

refero_refresh

카탈로그를 강제로 다시 가져와 로컬 미러를 덮어씁니다. 24시간 TTL을 건너뜁니다.


구성

모든 설정은 선택 사항입니다. 기본값은 MCP가 바로 실행되도록 설정되어 있습니다.

변수

필수

기본값

기능

OPENAI_API_KEY

아니요

설정 안 됨

text-embedding-3-small을 통한 바이브 검색을 활성화합니다. 없으면 키워드 점수 방식으로 대체됩니다.

REFERO_API_BASE

아니요

https://styles.refero.design

Refero가 API를 이동하거나 고정된 위치를 가리키는 경우 재정의합니다.

REFERO_CACHE_DIR

아니요

~/.refero-cache

로컬 카탈로그 미러, 임베딩 및 세부 정보 캐시가 저장되는 위치입니다.

REFERO_CACHE_TTL_MS

아니요

86400000 (24시간)

캐시된 페이지가 최신 상태로 간주되는 시간입니다.

REFERO_MCP_VAULT_DIR

아니요 (프로젝트 쓰기 시 필수)

설정 안 됨

refero_design_md가 기록하는 볼트 루트의 절대 경로입니다. 설정하지 않으면 도구가 마크다운을 반환하지만 디스크에 기록하지는 않습니다.

복사/붙여넣기 가능한 .env.example이 저장소 루트에 포함되어 있습니다.

REFERO_MCP_VAULT_DIR에 대한 기본값은 없습니다. 이전 초안에는 제 노트북 경로가 하드코딩되어 있었는데, 이는 지구상에서 딱 한 대의 기계에서만 잘 작동했습니다. 검토자가 이를 발견했습니다. 이제 설정하지 않으면 도구가 쓰기를 거부합니다. 다소 무례하게 들릴 수 있지만, 컴퓨터에 존재하지 않는 폴더에 파일을 떨어뜨리는 것보다는 낫습니다.


작동 원리

작성 시점 기준으로 공개된 Refero API 문서는 없으며, 형태는 라이브 사이트를 기반으로 경험적으로 매핑되었습니다. 전체 분석은 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(권장 사항, 금지 사항, 태그, 테마, 역할별 색상)에서 하나를 합성합니다. 출력은 /stitch-design-taste/design-taste-frontend 스킬과 호환됩니다.


문제 해결

"No styles found" / 카탈로그가 비어 있는 경우. 첫 실행 시에는 캐시가 비어 있습니다. Claude에게 한 번 *"refresh the Refero catalog"*라고 요청하세요. 250ms의 간격을 두고 약 10페이지를 순회하여 REFERO_CACHE_DIR에 기록합니다. 그 후에는 검색이 즉시 이루어집니다.

검색 결과가 의미론적이지 않고 키워드 위주인 경우. 아마도 OPENAI_API_KEY가 설정되지 않았을 것입니다. MCP 구성에 추가하고 재시작하거나, 카탈로그의 어휘(산업군 및 editorial, brutalist, glass와 같은 태그)를 더 적극적으로 활용하세요.

refero_design_md가 마크다운을 반환하지만 디스크에 기록하지 않는 경우. REFERO_MCP_VAULT_DIR이 설정되지 않았습니다. 볼트 루트(절대 경로)로 설정하면 도구가 <vault>/05-Projects/<NAME>/DESIGN.md에 기록합니다. 설정하지 않으면 대화창에서 마크다운을 받아 원하는 곳에 붙여넣을 수 있습니다.


라이선스

MIT — 자세한 내용은 LICENSE를 참조하세요.

저자

Nate Davidovich / Lorecraft LLC 제작.

⤴ 맨 위로 돌아가기


보안: gitleaks 스캔

이 저장소에는 .gitleaks.toml 구성과 작업 트리에서 비밀(GitHub 토큰, API 키, JWT, 개인 키, Anthropic 키 등)을 스캔하는 scripts/security-scan.sh 도우미가 포함되어 있습니다.

bash scripts/security-scan.sh

.husky/pre-commit 훅은 모든 커밋 시 gitleaks protect --staged를 실행하며, gitleaks가 로컬에 설치되어 있지 않으면 경고를 표시합니다.

아직 설치하지 않았다면:

Available Tools

6 tools
refero_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.

ParametersJSON Schema
NameRequiredDescriptionDefault
identifierYesuuid, hostname/URL, or site name to render.
save_to_projectNoVault project folder name (e.g. "PARZVL"). Sanitized; must be [A-Za-z0-9_.-].

TDQS

A4/5.0
Behavior3/5

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.

Conciseness5/5

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.

Completeness4/5

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.

Parameters4/5

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.

Purpose5/5

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.

Usage Guidelines3/5

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.

ParametersJSON Schema
NameRequiredDescriptionDefault
identifierYesuuid, hostname/URL, or site name.

TDQS

A4.6/5.0
Behavior4/5

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.

Conciseness5/5

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.

Completeness4/5

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.

Parameters4/5

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.

Purpose5/5

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.

Usage Guidelines5/5

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

ParametersJSON Schema
NameRequiredDescriptionDefault
themeNoFilter to light- or dark-themed sites only.
tagsNoFilter by tag terms (matched against siteName + northStar in the catalog projection).
pageNo1-indexed page number (default 1).
limitNoItems per page (default 20, max 50).

TDQS

A3.8/5.0
Behavior3/5

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.

Conciseness5/5

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.

Completeness4/5

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.

Parameters3/5

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.

Purpose5/5

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.

Usage Guidelines3/5

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.

ParametersJSON Schema
NameRequiredDescriptionDefault

No parameters

TDQS

A4.2/5.0
Behavior3/5

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.

Conciseness5/5

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.

Completeness4/5

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.

Parameters4/5

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.

Purpose5/5

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.

Usage Guidelines4/5

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

ParametersJSON Schema
NameRequiredDescriptionDefault
identifierYesuuid, hostname/URL, or site name.
limitNoHow many similar styles to return (default 10, max 20).

TDQS

A3.7/5.0
Behavior2/5

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.

Conciseness5/5

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.

Completeness3/5

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.

Parameters3/5

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.

Purpose5/5

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.

Usage Guidelines4/5

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.

  1. 6 tool updatesv0.1.0
    • First observedrefero_design_md
    • First observedrefero_get
    • First observedrefero_list
    • First observedrefero_refresh
    • First observedrefero_search
    • First observedrefero_similar

TDQS

A4.1/5.0
Disambiguation5/5

Each tool has a clearly distinct purpose: fetching details, browsing, searching, refreshing, getting recommendations, and generating design docs. No overlap in functionality.

Naming Consistency4/5

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.

Tool Count5/5

6 tools is well-scoped for interacting with a design system catalog, covering key operations without being too few or too many.

Completeness4/5

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

ActivityMaintained
ResponsivenessNo issues

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

Related MCP Servers

Latest Blog Posts

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