Comment prévisualiser des mises en page responsive dans Cursor

fonctionnement

Deux outils, un flux de travail.

L'Responsive Preview tool affiche trois iframes live côte à côte avec défilement synchronisé en same-origin — collez n'importe quelle URL et interagissez avec les trois à la fois. La commande /responsive-preview Cursor ajoute une couche IA : captures aux trois viewports, signalement des problèmes de layout et liens vers le viewer live.

Utilisez-les ensemble : le viewer pour repérer visuellement, la commande pour un audit structuré pass/warn/fail et demander à Claude de corriger.

viewer live

Collez une URL et comparez trois largeurs.

Ouvrez tinydesignshop.com/tools/responsive-preview, collez votre URL et cliquez sur Preview. Trois iframes se chargent — Mobile à 390px, Tablet à 820px, Desktop à 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.

Marquez ou partagez un lien direct : cliquer sur Preview met à jour la barre d'adresse avec le paramètre ?url= que vous pouvez copier.

cursor command

La commande slash /responsive-preview.

C'est une commande slash Cursor — un fichier markdown qui demande à Claude d'exécuter un audit responsive lorsque vous tapez /responsive-preview dans le chat.

Configuration (une fois)

1. Ouvrez l’outil Responsive Preview Cursor Command et téléchargez ou copiez le fichier de commande
2. Copiez-le dans le dossier .cursor/commands/ de votre projet (créez-le s'il n'existe pas)
3. Démarrez votre serveur de dev local (npm run dev:html-presenter depuis site/ pour ce repo)
4. Tapez /responsive-preview dans n'importe quel chat Cursor

Fonctionnement

Claude prend des captures en Mobile (390px), Tablet (820px) et Desktop (1280px) via Claude Preview MCP. Puis il exécute une vérification structurée sur cinq dimensions — overflow, repli de nav, lisibilité du texte, taille des images et éléments fixes — et attribue pass, warn ou fail à chaque viewport. Il termine par des liens pour ouvrir le viewer côte à côte live à votre URL.

Prévisualiser une page précise

Passez un chemin en argument : /responsive-preview tools/my-tool prévisualise localhost:8787/tools/my-tool. Sans argument, la racine est la valeur par défaut.

fix in cursor

Utiliser Fix in Cursor avec Design Mode.

Chaque frame du viewer a un bouton Fix in Cursor. Cliquez pour copier un bloc de contexte structuré dans le presse-papiers :

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

Collez-le dans le chat Cursor. Passez au navigateur intégré de Cursor, naviguez vers la même page et utilisez Design Mode — pointez un élément, dessinez pour surligner une zone ou décrivez le changement. Cursor capture le xpath, les styles calculés et une capture de l'élément et les envoie à Claude avec votre contexte collé.

dépannage

Frames vides, limites de sync et liens partageables.

• Iframe blocked: De nombreux sites définissent X-Frame-Options ou Content-Security-Policy: frame-ancestors qui bloquent l'intégration. Google, Twitter et la plupart des SaaS connectés le bloquent. Les serveurs de dev local fonctionnent toujours. Pour les sites externes, utilisez /responsive-preview pour des captures IA.
• Scroll sync unavailable: Les chargements cross-origin (par ex. viewer production + cible localhost) s'affichent mais ne peuvent pas injecter le script de relais de scroll. Utilisez le viewer local à localhost:8787/tools/responsive-preview en développement local.
• Fix in Cursor: Cliquez sur le bouton sous le frame concerné. Collez le bloc copié dans le chat, puis annotez avec Design Mode pour que l'agent sache quel élément corriger.
• Shareable preview links: Après Preview, l'URL inclut ?url= — copiez-la depuis la barre d'adresse pour marquer ou partager.
• Privacy: L'URL saisie se charge directement dans les iframes de votre navigateur. Rien ne transite par un serveur TDS.

confidentialité

Viewer local navigateur, audit MCP local.

Le viewer charge les URL directement dans les iframes de votre navigateur — rien ne transite par un serveur TDS. La sync de scroll s'exécute entièrement en JavaScript sur la page. La commande /responsive-preview s'exécute localement via Claude Preview MCP dans votre session Cursor.