Inspo MCP verwenden: Designreferenzen und Screenshots in die UI-Entwicklung mit Claude Code oder Codex einbinden

Claude Code oder Codex darum zu bitten, „eine klare, hochwertige und gut gestaltete Landingpage“ zu erstellen, führt meist schnell zu einer lauffähigen Seite. Schwieriger ist, dass das Ergebnis oft bei bekannten Mustern stehen bleibt: Farbverlauf im Hintergrund, abgerundete Karten und eine große Überschrift – ohne das Layout, den Rhythmus und die visuelle Hierarchie zu übernehmen, die Sie eigentlich als Vorbild nutzen wollten.

Inspo löst genau dieses konkretere Problem: Bevor der Agent die UI schreibt, erhält er Designreferenzen von realen Websites. Die offizielle Seite nennt derzeit 832 produktive Websites, 2.320 Seiteneinträge mit Desktop- und Mobile-Aufnahmen, 68 Referenzkomponenten sowie extrahierte Informationen zu Farbpaletten, Schriften, Abständen, Rundungen, Containerbreiten und Seitenstrukturen. Über MCP werden diese Materialien Clients wie Claude Code und Codex bereitgestellt.

Eine erfolgreiche Installation beweist jedoch weder, dass der Agent die Screenshots gesehen hat, noch dass die fertige Seite die Referenzen tatsächlich widerspiegelt. Ein verlässlicherer Ablauf sieht so aus:

1. Inspo MCP verbinden und prüfen, ob der Client wirklich verbunden ist.
2. Den Agenten zuerst Referenzen abrufen lassen, bevor er Code schreibt.
3. Prüfen, welche Seiteneinträge und Bild-URLs er erhalten hat und ob er die Bilder tatsächlich gelesen hat.
4. Die ausgewählten Referenzen in einen eindeutigen „Referenzvertrag“ überführen.
5. Nach der Umsetzung das echte Rendering ansehen, Punkt für Punkt vergleichen und gezielt korrigieren.

Im Folgenden dient eine hypothetische Aufgabe als Beispiel: Für ein bestehendes Projekt soll eine B2B-Produkt-Landingpage für Entwickler entstehen. Das Beispiel erklärt die Methode; es bedeutet nicht, dass dieser Artikel Ihr Projekt ausgeführt oder getestet hat.

Was Inspo MCP tatsächlich bereitstellt

Inspo ist mehr als eine Screenshot-Suche. Laut der offiziellen MCP-Seite und dem Projekt-Repository kann ein Agent drei Arten von Referenzmaterial abrufen.

1. Seiten und Screenshots

search_screens kann reale Seiten anhand natürlicher Sprache, Stil, Branche, Seitentyp, Farbe, Hell- oder Dunkelmodus und Seitenstruktur finden. Ergebnisse können Folgendes enthalten:

• Seitentitel, Inspo-slug und URL der ursprünglichen Website;
• URLs der Desktop- und Mobile-Screenshots;
• eine Seitenminiatur;
• Farbpalette, Schriften, Technologie-Stack und Tags;
• eine Analyse der allgemeinen Merkmale und der Abschnittsstruktur.

Wenn Sie einen bestimmten Kandidaten genauer untersuchen möchten, rufen Sie mit get_screen einen vollständigeren Eintrag ab, statt viele Kandidaten gleichzeitig in den Kontext zu laden.

2. Strukturiertes Designsystem

Für jede erfasste Website gibt es eine aus den Seiteninformationen abgeleitete DESIGN.md. get_design_system kann Typografie, semantische Farben, Schriftgrößenhierarchie, Abstände, Radien, CSS-Variablen, Containerbreiten und ähnliche Angaben zurückgeben.

Diese Daten sind wichtig, weil „Orientiere dich an dieser Website“ zu ungenau ist. Anforderungen wie „Hero in zwei Spalten, begrenzte Inhaltsbreite, eine kontrastreiche Akzentfarbe für den primären Button und deutliche Abstände zwischen den Abschnitten“ kann ein Agent wesentlich konsistenter umsetzen.

3. Referenzkomponenten und Code

Inspo stellt außerdem Referenzkomponenten für Navigation, Hero, Preise, Footer und weitere Bereiche bereit. Der Agent kann zunächst mit find_reference_components eine passende Komponente suchen und anschließend mit get_reference_jsx das zugehörige JSX abrufen.

Das bedeutet nicht, dass eine ganze Website unverändert kopiert werden sollte. Sinnvoller ist es, den Aufbau der Komponente und ihre Informationshierarchie zu übernehmen und an Technologie-Stack, Marke, Inhalt und Interaktionen des aktuellen Projekts anzupassen.

recommend eignet sich am besten als Einstieg. Sie beschreiben die Aufgabe in normaler Sprache, und das Tool kombiniert Seitenstruktur, Kandidaten-Websites, Referenzkomponenten, Farbpaletten und Layoutvorschläge. Bei der ersten Nutzung ist es meist effektiver, den Agenten zunächst recommend aufrufen und anschließend ein oder zwei Kandidaten genauer prüfen zu lassen, statt sofort ein Dutzend Seiten zu durchsuchen.

Modellverbindung und Inspo MCP sind zwei getrennte Wege

Claude Code oder Codex benötigt eine funktionierende Modellverbindung, um Code zu analysieren, zu ändern und Schlussfolgerungen zu ziehen. Inspo MCP liefert externe Designmaterialien. Beide Wege haben unterschiedliche Adressen, Authentifizierungsverfahren und Fehlerursachen.

Wenn Sie Claude Code oder Codex bereits über BetterToken verwenden, richten Sie zunächst die Modellseite anhand der passenden Dokumentation ein:

• Einrichtungsanleitung für Claude Code
• Einrichtungsanleitung für Codex

Konfigurieren Sie Inspo danach separat. Verwenden Sie https://inspomcp.dev/api/mcp nicht als Base URL des Modells und geben Sie Ihren BetterToken API Key nicht an Inspo weiter. Der gehostete Inspo-Endpoint verlangt derzeit weder ein Konto noch einen API Key. BetterToken hostet Inspo nicht, vergibt keine Rechte an Designmaterialien Dritter und garantiert weder, dass ein Agent Bilder liest, noch dass ein bestimmtes UI-Ergebnis entsteht.

Vor der Verbindung genügt es zu prüfen, dass:

• Claude Code oder Codex installiert ist und normale Programmieraufgaben ausführen kann;
• der Client den gehosteten Inspo-Endpoint erreichen kann;
• Node.js und npx verfügbar sind, wenn Sie den Installer oder den lokalen stdio-Modus nutzen möchten.

Inspo MCP verbinden

Inspo bietet einen automatischen Installer. Alternativ können Sie die MCP-Befehle des jeweiligen Clients verwenden. Auf einem Rechner mit mehreren KI-Coding-Tools empfiehlt sich zuerst --dry-run, damit Sie sehen, welche Clients und Konfigurationsdateien geändert würden.

Methode 1: den Inspo-Installer verwenden

Claude Code prüfen, ohne Konfiguration zu schreiben:

npx -y inspo-mcp install --dry-run --client claude-code

Nach Prüfung des Plans installieren:

npx -y inspo-mcp install --client claude-code

Nur Codex prüfen:

npx -y inspo-mcp install --dry-run --client codex

Nach Prüfung des Plans installieren:

npx -y inspo-mcp install --client codex

Wenn --client nicht angegeben ist, erkennt der Installer vorhandene Installationen von Claude Code, Codex, Cursor, VS Code, Windsurf, Claude Desktop und Zed. Die offizielle Inspo-MCP-Dokumentation erklärt, dass der Installer zunächst den Plan anzeigt und eine Bestätigung abfragt; --dry-run gibt den Plan nur aus und schreibt keine Dateien, während -y die Bestätigung überspringt.

Methode 2: den gehosteten MCP direkt hinzufügen

Der von Inspo empfohlene gehostete Endpoint lautet:

https://inspomcp.dev/api/mcp

Das offizielle Repository beschreibt Inspo als schreibgeschützten Dienst. Trotzdem handelt es sich um einen externen MCP eines Drittanbieters. In Teamumgebungen sollten Repository, Datenumfang und Netzwerkrichtlinien vor der Verbindung geprüft werden. „Schreibgeschützt“ ersetzt keine Vertrauensprüfung.

Laut der offiziellen MCP-Dokumentation von Claude Code sollten entfernte Dienste über HTTP hinzugefügt werden. Damit Inspo in allen lokalen Projekten verfügbar ist, führen Sie Folgendes aus:

claude mcp add --scope user --transport http inspo https://inspomcp.dev/api/mcp

Prüfen Sie anschließend:

claude mcp get inspo
claude mcp list

In einer Claude-Code-Sitzung können Sie außerdem Folgendes eingeben:

/mcp

Die Meldung Added bedeutet nur, dass die Konfiguration geschrieben wurde. Den tatsächlichen Verbindungsstatus sehen Sie mit claude mcp list: Erst Connected bestätigt eine Verbindung. Beheben Sie Failed to connect, Pending approval oder einen deaktivierten Dienst, bevor Sie fortfahren.

Die OpenAI-Dokumentation zu MCP in Codex gibt an, dass Codex Streamable HTTP und STDIO unterstützt. Fügen Sie den entfernten MCP so hinzu:

codex mcp add inspo --url https://inspomcp.dev/api/mcp

Listen Sie die konfigurierten Dienste auf:

codex mcp list

In der interaktiven Codex-Oberfläche können Sie ebenfalls Folgendes verwenden:

/mcp

Laut der aktuellen OpenAI-Dokumentation teilen Codex CLI, die IDE-Erweiterung und die ChatGPT-Desktop-App die MCP-Konfiguration, wenn sie auf demselben Codex-Host laufen. Starten Sie nach dem Hinzufügen oder Ändern des Dienstes den aktuellen Client neu oder öffnen Sie eine neue Sitzung und prüfen Sie dann, ob Inspo erscheint.

stdio ist lediglich ein alternativer Transport

Wenn der Client nicht bequem eine entfernte URL verwenden kann, kann er den stdio-Dienst über npx starten:

claude mcp add --scope user inspo -- npx -y inspo-mcp

codex mcp add inspo -- npx -y inspo-mcp

Sie können dem automatischen Installationsbefehl auch --local hinzufügen. Dieser Modus lädt den Inspo-Katalog weiterhin von einem CDN und entspricht daher weder einem Offline-Betrieb noch vollständigem Self-Hosting.

Beim ersten Einsatz zuerst Referenzen suchen, dann Code schreiben lassen

Ein häufiger Fehler ist, „Referenzen suchen“ und „Seite umsetzen“ in einem Satz zu kombinieren:

Verwende Inspo und erstelle mir eine schöne Landingpage.

Damit überlassen Sie dem Agenten die Auswahl der Referenzen, die Entscheidung darüber, was übernommen wird, und den sofortigen Start der Implementierung. Wenn das Ergebnis nicht überzeugt, lässt sich kaum erkennen, ob die Suchergebnisse ungeeignet waren, die Screenshots nie in den Kontext gelangten oder die Umsetzung von den Referenzen abwich.

Eine sicherere erste Anweisung lautet:

Ändere noch keinen Code und beginne noch nicht mit dem Design der Seite.

Nutze Inspo MCP, um 4 mögliche Referenzen für eine „B2B-Landingpage eines KI-API-Produkts für Entwickler“ zu finden.

Anforderungen:
- zurückhaltende, professionelle Gestaltung ohne große Flächen mit bunten Verläufen;
- der Hero muss den Produktnutzen klar vermitteln und einen primären CTA enthalten;
- eine Produktoberfläche oder ein Aufrufablauf darf gezeigt werden, die Seite soll aber nicht wie eine klassische Unternehmenswebsite wirken;
- prüfe sowohl Desktop- als auch Mobile-Referenzen;
- beginne mit recommend und verwende search_screens, get_screen oder get_design_system nur bei Bedarf.

Gib für jeden Kandidaten zurück:
1. Seitentitel, Inspo slug und sourceUrl;
2. Desktop- und Mobile-Screenshot-URLs, sofern sie im Tool-Ergebnis enthalten sind;
3. macrostructure, wichtigste Farbpalette und Typografie;
4. 3 konkrete Designentscheidungen, die sich zu übernehmen lohnen;
5. Markenelemente, Texte oder Dekorationen, die nicht kopiert werden sollten.

Empfiehl am Ende nur eine Hauptreferenz und höchstens zwei ergänzende Referenzen. Erkläre, wofür jede davon zuständig ist. Schreibe noch keinen Code.

Das Ziel dieser Anweisung sind nicht mehr Adjektive, sondern nachvollziehbare Seitenkennungen und Belege. Sie sollten einen konkreten slug, die URL der ursprünglichen Website, Screenshot-URLs und Designdaten sehen – nicht nur eine Zusammenfassung wie „modern, klar und professionell“.

So prüfen Sie, ob der Agent die Referenzen wirklich erhalten hat

Die Prüfung lässt sich in vier Ebenen aufteilen. Das Bestehen einer Ebene beweist nicht automatisch die nächste.

Ebene	Beobachtbarer Nachweis	Was damit belegt ist
MCP konfiguriert	Claude Code zeigt Connected, oder Inspo erscheint in der MCP-Liste von Codex	Connected bestätigt die Verbindung in Claude Code; ein Codex-Listeneintrag bestätigt die Konfiguration. Den Zugriff auf den Dienst muss ein erfolgreicher Tool-Aufruf belegen
Tool hat Daten zurückgegeben	Die Antwort enthält einen echten slug, sourceUrl, Farben, Typografie, Seitenstruktur und Screenshot-URLs	Der Agent hat Inspo aufgerufen und einen strukturierten Eintrag erhalten
Bilder wurden gelesen	Der Agent öffnet die Screenshot-URLs mit einem bildfähigen Tool oder nutzt einen verfügbaren Bildbetrachter und beschreibt konkrete visuelle Details	Der Agent hat mehr als Textbeschreibungen oder Links gelesen; Miniaturen im Ergebnis allein belegen dies nicht
Seite spiegelt die Referenz wider	Das reale Rendering zeigt nachvollziehbare Entsprechungen bei Struktur, Hierarchie, Rhythmus und responsivem Verhalten	Die Referenz hat die Umsetzung tatsächlich beeinflusst

Diese Unterscheidung ist wichtig. Inspo-Antworten enthalten immer strukturierten Text und können URLs der Originalbilder enthalten. In unterstützten Abläufen kann Inspo Miniaturen zudem als native Bildblöcke in das Tool-Ergebnis einfügen. Die Implementierung des Antwortformats berücksichtigt jedoch ausdrücklich zwei weitere Fälle: Schlägt der Bildabruf fehl, kann der Bildblock entfallen, während Text und URLs erhalten bleiben; eine textorientierte Konfiguration kann ebenfalls nur Text zurückgeben.

Dass der Agent eine Screenshot-URL ausgibt, beweist daher nicht, dass das Modell die Pixel gelesen hat. Senden Sie eine Kontrollanweisung wie diese:

Beweise zuerst, dass du die Hauptreferenz erhalten hast. Beginne noch nicht mit dem Schreiben von Code.

Gib Folgendes zurück:
- die Namen der Inspo-Tools, die in dieser Sitzung tatsächlich verwendet wurden;
- slug, sourceUrl, Desktop-Screenshot-URL und Mobile-Screenshot-URL der Hauptreferenz;
- je 3 konkrete visuelle Beobachtungen aus dem Desktop- und dem Mobile-Screenshot, zum Beispiel Hero-Komposition, Position der Navigation, CTA-Ausrichtung, Bildzuschnitt, Kartenanordnung oder Verhalten beim Zusammenklappen;
- welche Schlussfolgerungen aus den Screenshots stammen und welche ausschließlich aus den Textfeldern von Inspo.

Wenn der aktuelle Client nur Text oder URLs erhalten und die Bildpixel nicht gelesen hat, schreibe ausdrücklich „Bildpixel wurden nicht gelesen“. Leite keine visuellen Details aus der Beschreibung ab.

Das ideale Ergebnis ist keine lange Designkritik, sondern eine klare Trennung zwischen Elementen, die im Bild tatsächlich sichtbar sind, und Schlussfolgerungen aus strukturierten Daten.

Wenn der Agent lediglich Farbpalette, Typografie und die northstar-Beschreibung wiederholt, lassen Sie ihn die Screenshot-URLs mit einem im Client vorhandenen Browser- oder Bildlesetool öffnen. Unterstützen der aktuelle Client und das Modell visuelle Eingaben, können Sie die Screenshots herunterladen und als Bilder anhängen. Verarbeitet das Modell oder der Anbieterpfad keine Bilder, ändert ein Anhang daran nichts: Nutzen Sie Inspo für Struktur-, Farb- und Textanalysen oder wechseln Sie zu einer kompatiblen Konfiguration mit Bildeingabe. Dass MCP Bilder zurückgeben kann, bedeutet nicht, dass jede Kombination aus Client und Modell sie verarbeitet.

Referenzen in einen „Referenzvertrag“ überführen

Wenn die Kandidaten ausgewählt sind, genügt „orientiere dich am Stil von Referenz A“ nicht. Legen Sie fest, wofür jede Referenz zuständig ist und was ausdrücklich nicht kopiert werden darf.

Lassen Sie den Agenten einen Vertrag wie diesen erstellen:

Erstelle anhand der bereits bestätigten Haupt- und Zusatzreferenzen zunächst einen „Referenzvertrag“. Ändere noch keinen Code.

Nimm Folgendes auf:

1. Hauptreferenz
- slug / sourceUrl:
- Zuständig nur für: allgemeine Seitenstruktur, Hero-Komposition, Rhythmus der Abschnitte

2. Zusatzreferenz A
- slug / sourceUrl:
- Zuständig nur für: typografische Hierarchie, Breite des Fließtexts, Weißraum

3. Zusatzreferenz B (nur wenn wirklich erforderlich)
- slug / sourceUrl:
- Zuständig nur für: eine bestimmte Komponente oder das Umbruchverhalten auf Mobilgeräten

4. Im aktuellen Projekt muss erhalten bleiben
- der vorhandene Technologie-Stack sowie bestehende Routing- und Komponenten-Konventionen
- echte Produkttexte, Funktionsgrenzen und Markenfarben
- bestehende Interaktionen, Anforderungen an Barrierefreiheit und Performance

5. Ausdrücklich verboten
- Logo, Markenname, Illustrationen, Fotos oder Originaltexte der Quellwebsite kopieren
- die gesamte Website Pixel für Pixel nachbauen
- Funktionen erfinden, die das aktuelle Produkt nicht besitzt, nur um der Referenz näherzukommen

6. Abnahmekriterien
- in einem üblichen Desktop-Viewport vermittelt der Hero vollständig Titel, Erklärung, CTA und Hauptvisual
- die Informationshierarchie folgt der Hauptreferenz, der Inhalt gehört jedoch zum aktuellen Produkt
- die Mobile-Version hat eine bewusste Neuordnung und ist nicht lediglich eine verkleinerte Desktop-Version
- Abschnittsabstände, Containerbreite, typografische Hierarchie und Button-Priorität folgen überprüfbaren Regeln

Der Vertrag verwandelt Inspiration in klare Vorgaben. Die Hauptreferenz steuert die Gesamtstruktur, ergänzende Referenzen lösen lokale Probleme. Mehr Referenzen führen nicht automatisch zu einem besseren Ergebnis. Wenn fünf Websites gleichzeitig Farben, Typografie, Karten und Hero bestimmen, entsteht häufig erneut eine generische KI-Seite ohne eindeutige Prioritäten.

Claude Code oder Codex mit der Umsetzung beginnen lassen

Nach der Bestätigung von Referenzen und Abnahmekriterien darf der Agent das Repository untersuchen und den Code ändern. Die folgende Anweisung legt bewusst weder npm run dev noch ein Framework-Verzeichnis oder einen Testbefehl fest. Diese Punkte müssen aus dem aktuellen Projekt ermittelt und dürfen nicht geraten werden.

Beginne jetzt mit der Umsetzung.

Untersuche zuerst den Technologie-Stack des aktuellen Repositorys, die Seiteneinstiegspunkte, Designvariablen, wiederverwendbaren Komponenten und verfügbaren Skripte. Ändere die Seite anschließend gemäß dem bestätigten „Referenzvertrag“.

Anforderungen an die Umsetzung:
- verwende das vorhandene Framework, Komponentensystem und die bestehenden Abhängigkeiten; füge kein neues UI-Framework hinzu, sofern es nicht wirklich erforderlich ist;
- erhalte echte Produktinhalte und Funktionen und kopiere weder Markenmaterialien noch Texte der Referenz-Websites;
- übertrage die Referenzen in ein eigenes Layout, eigene CSS-Variablen und Komponenten dieses Projekts;
- setze Desktop und Mobile bewusst um; verschiebe Mobile nicht bis zum Schluss und verlasse dich nicht auf automatische Skalierung;
- korrigiere zuerst Gesamtstruktur, Informationshierarchie und Abstände und kümmere dich danach um Dekorationen wie Schatten und Rundungen;
- überschreibe bestehende Projektkomponenten nicht nur deshalb, weil Inspo JSX bereitstellt.

Erkläre vor Änderungen kurz:
1. welche Dateien du ändern möchtest;
2. welcher Referenzpunkt welcher Komponente oder Stilregel zugeordnet wird;
3. welche bestehenden Inhalte unverändert bleiben müssen.

Nach Abschluss:
- führe vorhandene Formatierungs-, Typprüfungs- oder Testbefehle des Repositorys aus;
- starte die verfügbare lokale Vorschau;
- liste die tatsächlich geänderten Dateien auf;
- gib eine Zuordnung „Referenzpunkt → Implementierungsort“ aus;
- bewerte das Ergebnis nicht nur mit Formulierungen wie „moderner“ oder „hochwertiger“.

Wenn das Projekt bereits Design-Tokens verwendet, sollte der Agent zuerst Tokens oder semantische Variablen ändern, statt fest codierte Farben und Abmessungen über mehrere Komponenten zu verteilen. So lässt sich der Gesamtrhythmus der Seite in der nächsten Runde wesentlich leichter korrigieren.

Die abschließende Bewertung muss auf dem echten Rendering beruhen, nicht auf dem Code-Diff

Dass eine Seite kompiliert, beweist nur, dass der Code läuft. Um zu beurteilen, ob sie die Referenzen widerspiegelt, müssen Sie die reale Seite ansehen.

Inspo-Seiten enthalten in der Regel Desktop- und Mobile-Aufnahmen. Im offiziellen Colophon steht, dass das Archiv Breiten von 1440 und 375 Pixeln verwendet. Die Höhe muss nicht exakt übereinstimmen, aber ähnliche Breiten erleichtern den Vergleich der Gesamtstruktur und der mobilen Neuordnung.

Wenn in Claude Code oder Codex bereits ein Browser, Playwright oder ein anderes Screenshot-Tool eingerichtet ist, lassen Sie den Agenten die lokale Seite öffnen. Andernfalls öffnen Sie die Vorschau selbst im Browser, erstellen Desktop- und Mobile-Screenshots und geben sie an den Agenten zurück.

Bitten Sie ihn um eine Prüfung in diesem Format:

Vergleiche:
- die bestätigten Desktop- und Mobile-Screenshots der Hauptreferenz;
- echte Screenshots der aktuellen Seite bei ungefähr 1440px und 375px Breite.

Gestalte noch nichts neu und ändere noch keinen Code. Gib zuerst eine Tabelle mit den Abweichungen aus:

| Prüfpunkt | Beobachtbarer Nachweis in der Referenz | Aktuelle Umsetzung | Abweichung | Empfohlene Änderung |
| --- | --- | --- | --- | --- |
| Hero-Struktur |  |  |  |  |
| Hierarchie von Titel und CTA |  |  |  |  |
| Container und Weißraum |  |  |  |  |
| Typografische Hierarchie |  |  |  |  |
| Farbe und Kontrast |  |  |  |  |
| Anordnung der Komponenten |  |  |  |  |
| Mobile Neuordnung |  |  |  |  |

Wähle danach nur die 3 Abweichungen mit der größten Wirkung aus und korrigiere sie. Rendere die Seite nach den Änderungen erneut und prüfe sie noch einmal. Führe in derselben Runde keine neue Designrichtung ein.

Gutes Feedback muss beobachtbar und umsetzbar sein. Zum Beispiel:

• Nicht: „Der Hero wirkt noch nicht hochwertig genug.“
• Sondern: „In der Hauptreferenz sind Überschrift, CTA und Produktoberfläche innerhalb des ersten Viewports sichtbar. Die aktuelle Seite hat zu viel vertikalen Weißraum, sodass die Produktoberfläche unterhalb des sichtbaren Bereichs liegt. Reduziere die vertikalen Abstände im Hero, begrenze die Überschriftenbreite und bringe das Hauptvisual in eine übliche Desktop-Viewport-Höhe.“

Ein weiteres Beispiel:

• Nicht: „Die Mobile-Version ähnelt der Referenz noch nicht genug.“
• Sondern: „Auf Mobilgeräten zeigt die Referenz zuerst Überschrift und CTA und danach eine einspaltige Produktkarte. Die aktuelle Umsetzung behält das zweispaltige Desktop-Layout bei, wodurch Text und Bild zu schmal werden. Stelle auf Mobilgeräten auf eine Spalte um und platziere den CTA weiterhin vor dem Hauptvisual.“

Nur wenige besonders wirkungsvolle Unterschiede pro Durchlauf zu beheben, führt meist schneller zum Ziel, als den Agenten wiederholt zu bitten, die Seite „noch schöner“ zu machen.

Häufige Probleme

Der Konfigurationsbefehl war erfolgreich, aber der Agent findet Inspo nicht

Prüfen Sie zunächst den Clientstatus, statt alles neu zu installieren.

Claude Code:

claude mcp get inspo
claude mcp list

Codex:

codex mcp list

Stellen Sie sicher, dass der Endpoint keine zusätzlichen Zeichen enthält, und starten Sie den Client neu. Wenn Claude Code eine projektbezogene .mcp.json verwendet, müssen Sie den Dienst möglicherweise außerdem in einem vertrauenswürdigen Workspace freigeben.

MCP ist verbunden, aber der Agent ruft Inspo nie auf

Trennen Sie Abruf und Programmierung. Verlangen Sie ausdrücklich: „Rufe zuerst Inspo auf, gib slug, sourceUrl und Screenshot-URLs zurück und ändere den Code erst, wenn die Referenzen bestätigt wurden.“ Prüfen Sie außerdem in /mcp, ob der Dienst aktiviert ist.

Der Agent liefert eine Seitenbeschreibung, aber kein Bild ist sichtbar

Möglicherweise hat der Aufruf nur Text zurückgegeben, der Abruf der Miniatur ist fehlgeschlagen, der Client zeigt MCP-Bildblöcke nicht an oder der Modellpfad verarbeitet keine Bilder. Prüfen Sie, ob Desktop- und Mobile-Screenshot-URLs weiterhin vorhanden sind, und lassen Sie den Agenten ausdrücklich angeben, ob er die Pixel gelesen hat. Unterstützen der aktuelle Client und das Modell visuelle Eingaben, öffnen Sie die URLs mit einem Browser-Tool oder hängen Sie die Screenshots an. Nutzen Sie bei einem reinen Textmodell die strukturierten Daten oder wechseln Sie zu einer Konfiguration mit Bildverarbeitung.

Die Seite sieht weiterhin wie eine generische Vorlage aus

Meist hilft es nicht, zehn weitere Referenzen zu suchen, sondern die Rollen enger zu definieren: Eine Hauptreferenz steuert die Makrostruktur, eine Zusatzreferenz Typografie und Weißraum und höchstens eine weitere eine bestimmte Komponente. Schreiben Sie diese Rollen in den Referenzvertrag und verlangen Sie eine Zuordnung der Referenzpunkte zu Codepositionen.

Der Kontext wird zu groß und der Agent verwechselt Referenzen

Nutzen Sie recommend, um Kandidaten zu erhalten, und rufen Sie get_screen oder get_design_system nur für die ein oder zwei ausgewählten Kandidaten auf. Laden Sie nicht viele vollständige Seiteneinträge und Komponentenquellen gleichzeitig. Verwenden Sie get_reference_jsx nur, wenn Sie eine konkrete Komponente benötigen.

Die ursprüngliche Website stimmt nicht mehr mit dem Inspo-Screenshot überein

Inspo speichert das Seitenmaterial zum Zeitpunkt der Aufnahme, während die ursprüngliche Website später geändert werden kann. Vergleichen Sie mit dem ausgewählten Inspo-Screenshot und -Eintrag. sourceUrl dient der Rückverfolgung der Quelle; es sollte nicht angenommen werden, dass die externe Website dauerhaft identisch mit dem Archiv aussieht.

Entscheidend ist nicht nur, „einen MCP zu installieren“, sondern eine Beweiskette aufzubauen

Der Wert von Inspo MCP liegt nicht darin, automatisch zu entscheiden, was gutes Design ist. Es verwandelt „Ich möchte diese Art von Wirkung“ in nachvollziehbare Seiten, Screenshots, Designdaten und Referenzkomponenten.

Ein verlässlicher UI-Entwicklungsdurchlauf sollte vier Arten von Nachweisen hinterlassen:

1. Der Client bestätigt, dass Inspo verbunden ist.
2. Der Agent liefert konkrete Seiten und Designmaterialien zurück.
3. Sie können bestätigen, dass er die Screenshots gelesen hat, oder er sagt offen, dass er nur Text erhalten hat.
4. Beim finalen Rendering lässt sich Punkt für Punkt erklären, welche Regeln zu Struktur, Hierarchie und responsivem Verhalten aus den Referenzen stammen.

Wenn Abruf, Bestätigung, Umsetzung und Überprüfung getrennt werden, erstellt Claude Code oder Codex nicht mehr nur „nach Gefühl eine schöne Seite“. Der Agent arbeitet in einem Designkontext, den Sie prüfen, korrigieren und wiederverwenden können.