Como pré-visualizar layouts responsive no Cursor

o que faz

Duas ferramentas, um fluxo de trabalho.

A Responsive Preview tool oferece três iframes live lado a lado com scroll sincronizado quando same-origin — cole qualquer URL e interaja com os três de uma vez. O comando /responsive-preview Cursor adiciona uma camada de IA: capturas nos três viewports, relatório de problemas de layout e links para o viewer live.

Use-as em conjunto: o viewer para detetar problemas visualmente, o comando para uma auditoria estruturada pass/warn/fail e pedir ao Claude para corrigir.

viewer live

Cole um URL e compare três larguras.

Abra tinydesignshop.com/tools/responsive-preview, cole o seu URL e clique em Preview. Carregam três 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.

Marque ou partilhe um link direto: ao clicar em Preview, a barra de endereços atualiza com o parâmetro ?url= que pode copiar.

cursor command

O comando slash /responsive-preview.

É um comando slash do Cursor — um ficheiro markdown que instrui o Claude a executar uma auditoria responsive quando escreve /responsive-preview no chat.

Configuração (uma vez)

1. Abra a ferramenta Responsive Preview Cursor Command e descarregue ou copie o ficheiro do comando
2. Copie para a pasta .cursor/commands/ do projeto (crie a pasta se não existir)
3. Inicie o servidor de desenvolvimento local (npm run dev:html-presenter a partir de site/ neste repo)
4. Escreva /responsive-preview em qualquer chat do Cursor

O que faz

O Claude tira capturas em Mobile (390px), Tablet (820px) e Desktop (1280px) usando Claude Preview MCP. Depois executa uma verificação estruturada em cinco dimensões — overflow, colapso de nav, legibilidade de texto, tamanho de imagens e elementos fixos — e atribui pass, warn ou fail a cada viewport. Termina com links para abrir o viewer lado a lado live no seu URL.

Pré-visualizar uma página específica

Passe um caminho como argumento: /responsive-preview tools/my-tool pré-visualiza localhost:8787/tools/my-tool. Sem argumento, a raiz é o padrão.

fix in cursor

Usar Fix in Cursor com Design Mode.

Cada frame no viewer tem um botão Fix in Cursor. Clique para copiar um bloco de contexto estruturado para a área de transferência:

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

Cole no chat do Cursor. Mude para o browser integrado do Cursor, navegue para a mesma página e use Design Mode — aponte para um elemento, desenhe para realçar uma região ou descreva a alteração. O Cursor captura o xpath, estilos calculados e captura do elemento e envia ao Claude com o contexto colado.

resolução de problemas

Frames em branco, limites de sync e links partilháveis.

• Iframe blocked: Muitos sites definem X-Frame-Options ou Content-Security-Policy: frame-ancestors que bloqueiam embedding. Google, Twitter e a maioria dos SaaS com login bloqueiam. Servidores de dev local funcionam sempre. Para sites externos, use /responsive-preview para capturas com IA.
• Scroll sync unavailable: Carregamentos cross-origin (por exemplo, viewer de produção + destino localhost) ainda renderizam mas não podem injetar o script de relay de scroll. Use o viewer local em localhost:8787/tools/responsive-preview ao desenvolver localmente.
• Fix in Cursor: Clique no botão sob o frame com o problema. Cole o bloco copiado no chat e anote com Design Mode para o agente saber qual elemento corrigir.
• Shareable preview links: Após clicar em Preview, o URL da página inclui ?url= — copie da barra de endereços para marcar ou partilhar.
• Privacy: O URL que introduz carrega diretamente nos iframes do browser. Nada passa por um servidor TDS.

privacidade

Viewer local no browser, auditoria MCP local.

O viewer carrega URLs diretamente nos iframes do browser — nada passa por um servidor TDS. O scroll sync corre inteiramente em JavaScript na página. O comando /responsive-preview executa localmente via Claude Preview MCP na sua sessão Cursor.