design-inspiration

MCP-Server, der Dribbble, Behance, Awwwards, Mobbin und Pinterest nach UI-Design-Inspiration durchsucht. Entwickelt für Claude Code, funktioniert aber mit jedem MCP-Client.

Verwendet die Serper API (Google-Suche) mit site:-Filtern, um Ergebnisse nur auf Design-Plattformen zu beschränken. Kann auch echte Design-Tokens (Farben, Schriften, Abstände) von jeder Live-Website über einen Headless-Browser extrahieren.

Finde Inspiration und extrahiere dann exakte Tokens von Websites, die dir gefallen.

Warum

Ich wollte, dass Claude beim Erstellen von UI Design-Referenzen abruft – echte Dribbble-Shots ansehen, Farbpaletten finden, Layout-Muster durchstöbern – ohne das Terminal zu verlassen. Die vorhandenen Optionen erforderten entweder Playwright (schwergewichtig) oder lieferten keine Bild-URLs, die ich tatsächlich herunterladen und ansehen konnte.

Die Suchseite umschließt die Bild- und Websuch-Endpunkte von Serper mit vorkonfigurierten Site-Filtern. Simpel.

Die Token-Extraktionsseite entstand aus einem anderen Bedürfnis: Ich fand eine Website auf Dribbble, die mir gefiel, öffnete sie und musste dann manuell Farben mit der Pipette aufnehmen und Schriften inspizieren. Jetzt zeige ich einfach design_extract_tokens auf die URL und erhalte die exakten Werte zurück.

Tools

design_search_images — Bildersuche über Design-Plattformen. Liefert Bild-URLs, Abmessungen, Quell-Links. Gut geeignet, um visuelle Referenzen für ein bestimmtes UI-Muster zu finden.

design_search_references — Websuche, beschränkt auf Design-Websites. Liefert Artikeltitel, Ausschnitte, Links. Besser geeignet für Fallstudien, Design-System-Dokumentationen oder Muster-Erklärungen.

design_search_styles — Sucht nach einer bestimmten ästhetischen Richtung (Farbpalette, Typografie, Layout, Animation). Führt Bild- und Websuche parallel aus und liefert kombinierte Ergebnisse.

design_extract_tokens — Extrahiert Design-Tokens von einer Live-Website. Zeige auf eine beliebige URL und erhalte Farben, Typografie, Abstände, Rahmenradien und Schatten. Unterstützt dark_mode- und mobile-Flags. Erfordert global installiertes dembrandt (npm install -g dembrandt).

Die drei Such-Tools akzeptieren einen sites-Parameter, um auf bestimmte Plattformen zu filtern, sowie einen num-Parameter zur Steuerung der Ergebnisanzahl.

Einrichtung

Du benötigst einen Serper-API-Schlüssel für die Such-Tools. Der kostenlose Tarif bietet 2.500 Suchen ohne Kreditkarte.

1. Registriere dich bei serper.dev

2. Kopiere deinen API-Schlüssel

Für die Token-Extraktion installiere dembrandt global:

npm install -g dembrandt

Claude Code

claude mcp add design-inspiration -e SERPER_API_KEY=your-key-here -- node /path/to/design-inspiration-mcp-server/dist/index.js

Jeder MCP-Client (stdio)

{
  "design-inspiration": {
    "type": "stdio",
    "command": "node",
    "args": ["/path/to/design-inspiration-mcp-server/dist/index.js"],
    "env": {
      "SERPER_API_KEY": "your-key-here"
    }
  }
}

Aus dem Quellcode erstellen

git clone https://github.com/YonasValentin/design-inspiration-mcp-server.git
cd design-inspiration-mcp-server
npm install
npm run build

Wie es tatsächlich funktioniert

Jedes Tool erstellt eine Suchanfrage, indem es site:dribbble.com OR site:behance.net OR ... an das anhängt, wonach du gesucht hast. Dann ruft es die /images- oder /search-Endpunkte von Serper auf und formatiert die Antwort.

Das design_search_styles-Tool führt beide Endpunkte parallel aus (Promise.all), um Bilder und Artikel für dieselbe Abfrage zu erhalten.

design_extract_tokens führt dembrandt über child_process.execFile mit --json-only aus, parst die JSON-Ausgabe und formatiert sie in Markdown + strukturierte Daten. 60-Sekunden-Timeout. Keine zusätzlichen npm-Abhängigkeiten – dembrandt läuft als globales CLI und child_process ist eingebaut.

Ergebnisse werden sowohl als Markdown (für die Anzeige) als auch als strukturiertes JSON (für die programmatische Nutzung) zurückgegeben. Antworten werden auf 25.000 Zeichen gekürzt, um den Kontextfenster nicht zu überfluten.

Nutzungstipps

Suche nach spezifischen UI-Mustern, nicht nach allgemeinen Begriffen:

# good
"fintech dashboard dark mode"
"mobile onboarding flow card swipe"
"saas pricing page comparison table"

# too vague
"nice website"
"good design"

Du kannst die zurückgegebenen Bild-URLs herunterladen und Claude sie direkt ansehen lassen:

curl -sL "https://cdn.dribbble.com/..." -o /tmp/reference.jpg

Bitte Claude dann, die Bilddatei zu lesen – es kann das Design sehen und beschreiben.

Lizenz

MIT

Deklarativer 3D-Asset-Workflow

Referenzen können deklarieren, dass ein Website-Konzept 3D-Assets benötigt. design_prepare_references validiert die Anforderung und gibt einen assetPlan zurück; es erstellt keine Dateien, ruft Blender nicht auf und ruft kein anderes MCP auf.

Wenn ein Asset-Plan route: "blender" enthält, muss die Host-Anwendung oder der Agent diese Aufgabe an das verfügbare Blender-MCP weiterleiten. Dies ist Routing auf Host-Ebene, keine Ausführung durch diesen Server. Bewahre die Asset-ID und die Akzeptanzanforderungen in der Blender-Aufgabe auf.

Verwende examples/blender-asset-task.json als Übergabeformat. Enthalten sein sollten Subjekt, visuelle Absicht, Kamera, Komposition, Materialien, Beleuchtung, Animation, webtaugliche Ausgabeformate, Leistungsgrenzen und Akzeptanzerwartungen. Web-Ausgaben umfassen normalerweise komprimierte .glb- oder .gltf-Dateien plus ein .png- oder .webp-Fallback. Die Akzeptanz überprüft sauberes Laden im Viewer, Bildausschnitt, Materialien, Animationen und Leistungsbudgets.

Erwartete Übergabe: design_prepare_references -> assetPlan.route = "blender" -> Host-Anwendung -> Blender-MCP -> native Website-Implementierung und Browser-QA.

Ersetze keine deklarierte 3D-Anforderung durch CSS oder einen Platzhalter ohne Zustimmung des Benutzers. Wenn Blender nicht verfügbar ist, melde die blockierte Asset-Aufgabe und behalte die deklarative Übergabe bei.