Cómo previsualizar diseños responsive en Cursor

qué hace

Dos herramientas, un flujo de trabajo.

La Responsive Preview tool te da tres iframes en vivo lado a lado con scroll sincronizado cuando es same-origin — pega cualquier URL e interactúa con los tres a la vez. El comando /responsive-preview Cursor añade una capa de IA: toma capturas en los tres viewports, informa problemas de layout y enlaza al visor en vivo.

Úsalas juntas: el visor para detectar problemas visualmente, el comando para obtener una auditoría estructurada pass/warn/fail y pedir a Claude que corrija lo roto.

visor en vivo

Pega una URL y compara tres anchos.

Abre tinydesignshop.com/tools/responsive-preview, pega tu URL y haz clic en Preview. Cargan tres iframes — 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.

Marca o comparte un enlace directo: al hacer clic en Preview, la barra de direcciones se actualiza con el parámetro ?url= que puedes copiar.

cursor command

El comando slash /responsive-preview.

Es un comando slash de Cursor — un archivo markdown que instruye a Claude a ejecutar una auditoría responsive cuando escribes /responsive-preview en el chat.

Configuración (una vez)

1. Abre la herramienta Responsive Preview Cursor Command y descarga o copia el archivo del comando
2. Cópialo en la carpeta .cursor/commands/ de tu proyecto (créala si no existe)
3. Inicia tu servidor de desarrollo local (npm run dev:html-presenter desde site/ en este repo)
4. Escribe /responsive-preview en cualquier chat de Cursor

Qué hace

Claude toma capturas en Mobile (390px), Tablet (820px) y Desktop (1280px) usando Claude Preview MCP. Luego ejecuta una comprobación estructurada en cinco dimensiones — overflow, colapso de nav, legibilidad de texto, tamaño de imágenes y elementos fijos — y asigna pass, warn o fail a cada viewport. Termina con enlaces para abrir el visor lado a lado en vivo en tu URL.

Previsualizar una página concreta

Pasa una ruta como argumento: /responsive-preview tools/my-tool previsualiza localhost:8787/tools/my-tool. Sin argumento, el root es el predeterminado.

fix in cursor

Usar Fix in Cursor con Design Mode.

Cada frame del visor tiene un botón Fix in Cursor. Haz clic para copiar un bloque de contexto estructurado al portapapeles:

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

Pégalo en el chat de Cursor. Cambia al navegador integrado de Cursor, navega a la misma página y usa Design Mode — señala un elemento, dibuja para resaltar una región o narra el cambio. Cursor captura el xpath, estilos calculados y captura del elemento y lo envía a Claude junto con tu contexto pegado.

solución de problemas

Frames en blanco, límites de sync y enlaces compartibles.

• Iframe blocked: Muchos sitios configuran X-Frame-Options o Content-Security-Policy: frame-ancestors que bloquean la inserción. Google, Twitter y la mayoría de SaaS con login lo bloquean. Los servidores de desarrollo local siempre funcionan. Para sitios externos, usa /responsive-preview para capturas con IA.
• Scroll sync unavailable: Las cargas cross-origin (por ejemplo, visor en producción + destino localhost) siguen renderizando pero no pueden inyectar el script de relay de scroll. Usa el visor local en localhost:8787/tools/responsive-preview al desarrollar localmente.
• Fix in Cursor: Haz clic en el botón bajo el frame con el problema. Pega el bloque copiado en el chat y anota con Design Mode para que el agente sepa qué elemento corregir.
• Shareable preview links: Tras hacer clic en Preview, la URL incluye ?url= — cópiala de la barra de direcciones para marcar o compartir.
• Privacy: La URL que introduces se carga directamente en los iframes de tu navegador. Nada pasa por un servidor TDS.

privacidad

Visor local en el navegador, auditoría MCP local.

El visor carga URLs directamente en los iframes de tu navegador — nada pasa por un servidor TDS. El scroll sync corre enteramente en JavaScript en la página. El comando /responsive-preview se ejecuta localmente vía Claude Preview MCP en tu sesión de Cursor.