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分

トラブルシューティング

リファレンス

よくある最初の3つの問題

約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(フロントマター、ノーススター、カラーテーブル、やるべきこと/やってはいけないこと)としてレンダリング。オプションでディスクに書き込みます。

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にはデフォルト値がありません。以前のドラフトでは私のラップトップのパスをハードコードしていましたが、それは世界で一台のPCでしか動作しませんでした。レビューで指摘されたため、現在は設定しないとツールは書き込みを拒否します。不親切に思えるかもしれませんが、存在しないフォルダにファイルをドロップするよりは安全です。


仕組み

執筆時点では公開されている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スキルと互換性があります。


トラブルシューティング

「スタイルが見つかりません」/ カタログが空に感じる場合: 初回実行時はキャッシュが空です。一度Claudeに「Referoカタログを更新して」と頼んでください。250msの間隔を空けて約10ページを巡回し、REFERO_CACHE_DIRに書き込みます。その後は即座に検索可能です。

検索結果がセマンティックではなくキーワードベースに感じる場合: OPENAI_API_KEYが設定されていない可能性があります。MCP設定に追加して再起動するか、カタログの語彙(業界やeditorialbrutalistglassなどのタグ)をより活用してください。

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