Refero MCP

Durchsuche styles.refero.design in einfachem Englisch und füge eine DESIGN.md zu jedem Projekt hinzu.

Schnelle Navigation

Was das ist

Refero Styles ist ein Beta-Katalog mit etwa 200 kuratierten Websites, bei denen jemand die mühsame Arbeit übernommen hat, Farben, Typografie, Abstände sowie Do's und Don'ts pro Stil herauszuarbeiten. Jeder Eintrag enthält einen designSystem-Block, der im Grunde eine fertige DESIGN.md ist.

Dieses MCP bindet diesen Katalog ein, sodass Claude Code ihn in natürlicher Sprache durchsuchen und eine generierte DESIGN.md direkt in jedes Projekt einfügen kann, das Sie gerade aufsetzen. Kein Kopieren und Einfügen von JSON aus Browser-Tabs, keine manuell erstellten Tabellen.

Es ist für jeden gedacht, der Claude Code verwendet, um eine neue App, ein Deck oder ein Kundenprojekt zu starten und das Design-Vokabular festlegen möchte, bevor die erste Komponente gerendert wird.

Schnellinstallation

Eine Zeile:

claude mcp add refero -- npx -y fidgetcoding-refero-mcp

Starten Sie Claude Code neu und beschreiben Sie den gewünschten Look.

Wenn Sie eine Vibe-Suche wünschen (semantisches Ranking basierend auf der poetischen northStar-Zusammenfassung jedes Stils), geben Sie einen OpenAI-Key an:

claude mcp add refero --env OPENAI_API_KEY=sk-... -- npx -y fidgetcoding-refero-mcp

Ohne diesen greift die Suche auf Keyword-Scoring zurück. Funktioniert gut, ist nur weniger magisch.

Für Benutzer von 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"
      }
    }
  }
}

Nutzung

Ein paar Prompts, die gut funktionieren:

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

Weitere Rezepte finden Sie in docs/USAGE.md.

Tools

Konfiguration

Alles ist optional. Die Standardwerte sind so gewählt, dass das MCP einfach läuft.

Eine .env.example zum Kopieren befindet sich im Repo-Root.

Es gibt keinen Standardwert für REFERO_MCP_VAULT_DIR. Der vorherige Entwurf hatte meinen Laptop-Pfad fest kodiert, was für genau einen Rechner auf der Welt funktionierte. Der Reviewer hat es bemerkt. Wenn Sie es jetzt nicht setzen, verweigert das Tool das Schreiben – unhöflich, aber besser, als Dateien in einen Ordner zu schreiben, der auf Ihrem Computer nicht existiert.

Funktionsweise

Zum Zeitpunkt der Erstellung gibt es keine öffentliche Refero-API-Dokumentation – die Struktur wurde empirisch anhand der Live-Seite abgebildet. Die vollständige Aufschlüsselung befindet sich in docs/api-surface.md, damit mein zukünftiges Ich sie nicht neu entdecken muss.

• Lokaler Katalog-Spiegel. Refero bietet ?page=N Paginierung, ignoriert aber stillschweigend ?search=, ?q= und ?colorScheme=. Daher durchläuft dieses MCP die Seiten einmal, spiegelt sie lokal unter REFERO_CACHE_DIR und führt alle Filterungen und Rankings clientseitig aus.

• Vibe-Suche via northStar. Jeder Refero-Stil enthält eine einzeilige poetische Zusammenfassung namens northStar. Wenn OPENAI_API_KEY gesetzt ist, bettet das MCP diese Zusammenfassungen mit text-embedding-3-small ein und rankt sie nach Kosinus-Ähnlichkeit zu Ihrer Anfrage. Ohne Key greift es auf Keyword-Scoring für northStar + Tags + Seitenname zurück.

• DESIGN.md lokal generiert. Refero bietet keinen /design.md-Endpunkt. Das MCP synthetisiert eine aus style.fullResult.designSystem (Dos, Donts, Tags, Theme, rollenspezifische Farben). Die Ausgabe ist kompatibel mit den Skills /stitch-design-taste und /design-taste-frontend.

Fehlerbehebung

"No styles found" / Katalog fühlt sich leer an. Der erste Durchlauf trifft auf einen kalten Cache. Bitten Sie Claude einmal, den "Refero-Katalog zu aktualisieren" – er durchläuft die ca. 10 Seiten mit einer höflichen Pause von 250 ms und schreibt sie in REFERO_CACHE_DIR. Danach ist die Suche sofort verfügbar.

Suchergebnisse fühlen sich eher nach Keywords als semantisch an. Wahrscheinlich ist OPENAI_API_KEY nicht gesetzt. Fügen Sie ihn Ihrer MCP-Konfiguration hinzu und starten Sie neu, oder nutzen Sie das Vokabular des Katalogs stärker (Branchen plus Tags wie editorial, brutalist, glass).

refero_design_md gibt Markdown zurück, schreibt aber nicht auf die Festplatte. REFERO_MCP_VAULT_DIR ist nicht gesetzt. Setzen Sie es auf Ihren Vault-Root (absoluter Pfad) und das Tool schreibt nach <vault>/05-Projects/<NAME>/DESIGN.md. Ohne dies erhalten Sie das Markdown im Chat und können es überall einfügen.

Lizenz

MIT – siehe LICENSE für Details.

Autor

Erstellt von Nate Davidovich / Lorecraft LLC.

• GitHub: lorecraft-io

• npm: lorecraft

• Schwesterprojekte: morgen-mcp, motion-mcp

⤴ zurück nach oben

Sicherheit: gitleaks-Scan

Dieses Repo enthält eine .gitleaks.toml-Konfiguration und ein scripts/security-scan.sh-Hilfsskript, das den Arbeitsbaum auf Geheimnisse (GitHub-Token, API-Keys, JWTs, private Schlüssel, Anthropic-Keys usw.) scannt.

bash scripts/security-scan.sh

Ein .husky/pre-commit-Hook führt bei jedem Commit auch gitleaks protect --staged aus und gibt eine Warnung aus, falls gitleaks lokal nicht installiert ist.

Falls Sie es noch nicht haben:

• macOS: brew install gitleaks

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