Question 1

What does Responsive Preview do?

Accepted Answer

Paste any URL and see it rendered in three live iframes side by side — Mobile (390px), Tablet (820px), and Desktop (1280px). Scrolling syncs across all three frames so you can compare layouts at a glance. Everything runs in your browser.

Question 2

Why does a frame show a blank page or an error?

Accepted Answer

Many websites set an X-Frame-Options or Content-Security-Policy header that blocks them from loading inside iframes. This is a browser security restriction — the tool cannot override it. For pages you control (like a localhost dev server), this will always work. For external sites, try the URL directly; if it loads there but not in the preview frames, the site has blocked iframe embedding.

Question 3

How do I use this with Cursor Design Mode?

Accepted Answer

Preview your page here to spot which viewport has a layout issue. Click 'Fix in Cursor' under that frame to copy a structured context block — the viewport width, page URL, and a prompt placeholder — to your clipboard. Paste it into Cursor chat, then use Cursor Design Mode (point, draw, or narrate) to annotate the specific element. Cursor's agent will fix the code.

Question 4

Can I add this preview command to my own Cursor project?

Accepted Answer

Yes. Open the Responsive Preview Cursor Command tool at tinydesignshop.com/tools/responsive-preview-cursor-command, download the command file, and drop it into your project's .cursor/commands/ folder. Then type /responsive-preview in any Cursor chat to get AI screenshots and a pass/warn/fail report across all three viewports.