Come fare anteprima di layout responsive in Cursor

cosa fa

Due strumenti, un flusso di lavoro.

Il Responsive Preview tool offre tre iframe live affiancati con scroll sincronizzato in same-origin — incolla qualsiasi URL e interagisci con tutti e tre insieme. Il comando /responsive-preview Cursor aggiunge un livello IA: screenshot ai tre viewport, segnala problemi di layout e collega al viewer live.

Usali insieme: il viewer per individuare problemi visivamente, il comando per un audit strutturato pass/warn/fail e chiedere a Claude di correggere.

viewer live

Incolla un URL e confronta tre larghezze.

Apri tinydesignshop.com/tools/responsive-preview, incolla l'URL e clicca Preview. Caricano tre iframe — Mobile a 390px, Tablet a 820px, Desktop a 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.

Segnalibro o link diretto: cliccando Preview la barra degli indirizzi si aggiorna con il parametro ?url= copiabile.

cursor command

Il comando slash /responsive-preview.

È un comando slash Cursor — un file markdown che istruisce Claude a eseguire un audit responsive quando digiti /responsive-preview in chat.

Configurazione (una volta)

1. Apri lo strumento Responsive Preview Cursor Command e scarica o copia il file del comando
2. Copialo nella cartella .cursor/commands/ del progetto (creala se non esiste)
3. Avvia il server di sviluppo locale (npm run dev:html-presenter da site/ per questo repo)
4. Digita /responsive-preview in qualsiasi chat Cursor

Cosa fa

Claude cattura screenshot su Mobile (390px), Tablet (820px) e Desktop (1280px) con Claude Preview MCP. Poi esegue un controllo strutturato su cinque dimensioni — overflow, collasso nav, leggibilità testo, dimensione immagini ed elementi fissi — e assegna pass, warn o fail a ogni viewport. Conclude con link per aprire il viewer affiancato live al tuo URL.

Anteprima di una pagina specifica

Passa un percorso come argomento: /responsive-preview tools/my-tool anteprima localhost:8787/tools/my-tool. Senza argomento, la root è predefinita.

fix in cursor

Usare Fix in Cursor con Design Mode.

Ogni frame nel viewer ha un pulsante Fix in Cursor. Clicca per copiare un blocco di contesto strutturato negli appunti:

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

Incollalo nella chat Cursor. Passa al browser integrato di Cursor, naviga alla stessa pagina e usa Design Mode — punta un elemento, disegna per evidenziare una regione o descrivi la modifica. Cursor cattura xpath, stili calcolati e screenshot dell'elemento e li invia a Claude con il contesto incollato.

risoluzione problemi

Frame vuoti, limiti di sync e link condivisibili.

• Iframe blocked: Molti siti impostano X-Frame-Options o Content-Security-Policy: frame-ancestors che bloccano l'embedding. Google, Twitter e la maggior parte dei SaaS con login lo bloccano. I server di dev locali funzionano sempre. Per siti esterni, usa /responsive-preview per screenshot IA.
• Scroll sync unavailable: Caricamenti cross-origin (es. viewer produzione + destinazione localhost) renderizzano ma non possono iniettare lo script di relay scroll. Usa il viewer locale su localhost:8787/tools/responsive-preview in sviluppo locale.
• Fix in Cursor: Clicca il pulsante sotto il frame con il problema. Incolla il blocco copiato in chat e annota con Design Mode così l'agente sa quale elemento correggere.
• Shareable preview links: Dopo Preview, l'URL include ?url= — copialo dalla barra degli indirizzi per segnalibro o condivisione.
• Privacy: L'URL inserito si carica direttamente negli iframe del browser. Nulla passa da un server TDS.

privacy

Viewer locale nel browser, audit MCP locale.

Il viewer carica URL direttamente negli iframe del browser — nulla passa da un server TDS. Lo scroll sync gira interamente in JavaScript sulla pagina. Il comando /responsive-preview gira localmente via Claude Preview MCP nella sessione Cursor.