So schauen Sie responsive Layouts in Cursor vor

Funktion

Zwei Tools, ein Workflow.

Das Responsive Preview tool zeigt drei Live-Iframes nebeneinander mit synchronisiertem Scrollen bei Same-Origin — fügen Sie eine beliebige URL ein und interagieren Sie mit allen drei gleichzeitig. Der /responsive-preview Cursor-Befehl fügt eine KI-Ebene hinzu: Screenshots an allen drei Viewports, Meldung von Layout-Problemen und Links zurück zum Live-Viewer.

Nutzen Sie beides zusammen: den Viewer zum visuellen Erkennen, den Befehl für ein strukturiertes pass/warn/fail-Audit und bitten Sie Claude, Fehler zu beheben.

Live-Viewer

URL einfügen und drei Breiten vergleichen.

Öffnen Sie tinydesignshop.com/tools/responsive-preview, fügen Sie Ihre URL ein und klicken Sie auf Preview. Drei Iframes laden — Mobile bei 390px, Tablet bei 820px, Desktop bei 1280px.

Synced scrolling works when the viewer and target URL are same-origin (for example, local viewer at localhost:8787 previewing localhost:8787/tools/my-page). When you scroll one frame, the others follow. Cross-origin previews still render — sync is unavailable and the toolbar chip says so.

Reload all (or press R) refreshes all three frames at once — useful after saving a code change.

Lesezeichen oder Direktlink teilen: Nach Preview aktualisiert sich die Adressleiste mit dem Parameter ?url=, den Sie kopieren können.

cursor command

Der /responsive-preview-Slash-Befehl.

Das ist ein Cursor-Slash-Befehl — eine Markdown-Datei, die Claude anweist, ein Responsive-Audit auszuführen, wenn Sie /responsive-preview im Chat eingeben.

Einrichtung (einmalig)

1. Öffnen Sie das Responsive Preview Cursor Command Tool und laden Sie die Befehlsdatei herunter oder kopieren Sie sie
2. Kopieren Sie ihn in den Ordner .cursor/commands/ Ihres Projekts (Ordner anlegen, falls nicht vorhanden)
3. Starten Sie Ihren lokalen Dev-Server (npm run dev:html-presenter aus site/ für dieses Repo)
4. Geben Sie /responsive-preview in einem Cursor-Chat ein

Funktion

Claude erstellt Screenshots bei Mobile (390px), Tablet (820px) und Desktop (1280px) mit Claude Preview MCP. Dann führt er eine strukturierte Prüfung in fünf Dimensionen durch — Overflow, Nav-Einklappung, Textlesbarkeit, Bildgröße und fixierte Elemente — und vergibt pass, warn oder fail pro Viewport. Abschließend Links zum Live-Nebeneinander-Viewer unter Ihrer URL.

Bestimmte Seite vorschauen

Pfad als Argument übergeben: /responsive-preview tools/my-tool zeigt localhost:8787/tools/my-tool. Ohne Argument ist die Root-Seite Standard.

fix in cursor

Fix in Cursor mit Design Mode nutzen.

Jeder Frame im Viewer hat einen Fix in Cursor-Button. Klick kopiert einen strukturierten Kontextblock in die Zwischenablage:

[Responsive issue at Mobile · 390px]
Page: http://localhost:8787/tools/my-tool
Viewport: 390px
---
Describe the issue here, then use Cursor Design Mode to annotate the element.

Fügen Sie dies in den Cursor-Chat ein. Wechseln Sie zum integrierten Cursor-Browser, navigieren Sie zur gleichen Seite und nutzen Sie Design Mode — Element anklicken, Bereich markieren oder Änderung beschreiben. Cursor erfasst xpath, berechnete Styles und Screenshot des Elements und sendet alles mit Ihrem Kontext an Claude.

Fehlerbehebung

Leere Frames, Sync-Grenzen und teilbare Links.

• Iframe blocked: Viele Sites setzen X-Frame-Options oder Content-Security-Policy: frame-ancestors, die Einbettung blockieren. Google, Twitter und die meisten SaaS mit Login blockieren es. Lokale Dev-Server funktionieren immer. Für externe Sites nutzen Sie /responsive-preview für KI-Screenshots.
• Scroll sync unavailable: Cross-Origin-Ladungen (z. B. Produktions-Viewer + localhost-Ziel) rendern, können aber kein Scroll-Relay-Skript injizieren. Nutzen Sie den lokalen Viewer unter localhost:8787/tools/responsive-preview bei lokaler Entwicklung.
• Fix in Cursor: Klicken Sie den Button unter dem betroffenen Frame. Fügen Sie den kopierten Block in den Chat ein und annotieren Sie mit Design Mode, damit der Agent das Element kennt.
• Shareable preview links: Nach Preview enthält die URL ?url= — aus der Adressleiste kopieren zum Speichern oder Teilen.
• Privacy: Die eingegebene URL lädt direkt in Ihre Browser-Iframes. Nichts passiert über einen TDS-Server.

Datenschutz

Browser-lokaler Viewer, lokales MCP-Audit.

Der Viewer lädt URLs direkt in Ihre Browser-Iframes — nichts über einen TDS-Server. Scroll-Sync läuft vollständig in JavaScript auf der Seite. Der /responsive-preview-Befehl läuft lokal über Claude Preview MCP in Ihrer Cursor-Sitzung.