Refero MCP

styles.refero.designを自然言語で検索し、あらゆるプロジェクトにDESIGN.mdをドロップします。

クイックナビゲーション

概要

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"
      }
    }
  }
}

使い方

スムーズに動作するプロンプトの例：

"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を参照してください。

ツール

設定

すべてオプションです。MCPがそのまま動作するようにデフォルト値が設定されています。

コピー＆ペースト可能な.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設定に追加して再起動するか、カタログの語彙（業界やeditorial、brutalist、glassなどのタグ）をより活用してください。

refero_design_mdがマークダウンを返すがディスクに書き込まれない場合: REFERO_MCP_VAULT_DIRが未設定です。ボルトのルート（絶対パス）に設定すると、ツールは<vault>/05-Projects/<NAME>/DESIGN.mdに書き込みます。設定しない場合は、会話内でマークダウンを受け取り、好きな場所に貼り付けることができます。

ライセンス

MIT — 詳細はLICENSEを参照してください。

作者

Nate Davidovich / Lorecraft LLCによって作成されました。

• GitHub: lorecraft-io

• npm: lorecraft

• 姉妹プロジェクト: morgen-mcp, motion-mcp

⤴ トップに戻る

セキュリティ: gitleaksスキャン

このリポジトリには.gitleaks.toml設定と、作業ツリー内のシークレット（GitHubトークン、APIキー、JWT、秘密鍵、Anthropicキーなど）をスキャンするscripts/security-scan.shヘルパーが同梱されています。

bash scripts/security-scan.sh

.husky/pre-commitフックもすべてのコミットでgitleaks protect --stagedを実行し、gitleaksがローカルにインストールされていない場合は警告を出します。

まだインストールしていない場合：

• macOS: brew install gitleaks

• Linux: https://github.com/gitleaks/gitleaks/releases