機能概要
2つのツール、1つのワークフロー。
Responsive Preview toolは、同一オリジンの場合はスクロール同期付きで3つのライブiframeを横並びに表示します——URLを貼り付けて、3つすべてを同時に操作できます。/responsive-preview CursorコマンドはAIレイヤーを追加し、3つのビューポートでスクリーンショットを撮影し、レイアウトの問題を報告し、ライブビューアへのリンクを返します。
2つを組み合わせて使いましょう：ビューアで視覚的に問題を発見し、コマンドで構造化されたpass/warn/fail監査を取得して、Claudeに修正を依頼します。
ライブビューア
URLを貼り付けて3つの幅を比較。
tinydesignshop.com/tools/responsive-previewを開き、URLを貼り付けてPreviewをクリックします。3つのiframeが読み込まれます——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.
ブックマークまたは直接リンクを共有：Previewをクリックするとアドレスバーが?url=パラメータ付きで更新され、コピーできます。
cursor command
/responsive-previewスラッシュコマンド。
これはCursorスラッシュコマンド——チャットで/responsive-previewと入力するとClaudeにレスポンシブ監査を実行させるMarkdownファイルです。
セットアップ（初回のみ）
- Responsive Preview Cursor Command ツールを開き、コマンドファイルをダウンロードまたはコピーします
- プロジェクトの
.cursor/commands/フォルダにコピーします（フォルダがなければ作成してください） - ローカル開発サーバーを起動します（このリポジトリでは
site/からnpm run dev:html-presenter） - 任意のCursorチャットで
/responsive-previewと入力します
機能
ClaudeはClaude Preview MCPを使い、Mobile（390px）、Tablet（820px）、Desktop（1280px）でスクリーンショットを撮影します。次に、オーバーフロー、ナビ折りたたみ、テキスト可読性、画像サイズ、固定要素の5つの観点で構造化チェックを実行し、各ビューポートにpass、warn、またはfailを付けます。最後に、URLでライブ並列ビューアを開くリンクを返します。
特定ページをプレビュー
パスを引数に渡します：/responsive-preview tools/my-toolはlocalhost:8787/tools/my-toolをプレビューします。引数なしの場合はルートがデフォルトです。
fix in cursor
Fix in CursorとDesign Modeの使い方。
ビューアの各フレームにはFix in Cursorボタンがあります。クリックすると構造化コンテキストブロックがクリップボードにコピーされます：
[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.
これをCursorチャットに貼り付けます。次にCursorの組み込みブラウザに切り替え、同じページに移動し、Design Modeを使用します——要素をクリックして指定したり、領域を描いてハイライトしたり、音声で変更を説明したりできます。Cursorは要素のxpath、計算済みスタイル、スクリーンショットをキャプチャし、貼り付けたコンテキストと一緒にClaudeに送信します。
トラブルシューティング
空白フレーム、同期制限、共有可能リンク。
- Iframe blocked: 多くのサイトは
X-Frame-OptionsやContent-Security-Policy: frame-ancestorsを設定して埋め込みをブロックします。Google、Twitter、ほとんどのログイン必須SaaSアプリもブロックします。ローカル開発サーバーは常に動作します。外部サイトの場合は、代わりに/responsive-previewでAIスクリーンショットを使用してください。 - Scroll sync unavailable: クロスオリジン読み込み（例：本番ビューア + localhostターゲット）は表示されますが、スクロールリレースクリプトを注入できません。ローカル開発時は
localhost:8787/tools/responsive-previewのローカルビューアを使用してください。 - Fix in Cursor: 問題のあるフレーム下のボタンをクリックします。コピーしたブロックをチャットに貼り付け、Design Modeで注釈を付けて、エージェントが修正すべき要素を特定できるようにします。
- Shareable preview links: Previewをクリックすると、ページURLに
?url=が含まれます——アドレスバーからコピーしてブックマークまたは共有できます。 - Privacy: 入力したURLはブラウザのiframeに直接読み込まれます。TDSサーバーを経由するデータはありません。
プライバシー
ブラウザローカルビューア、ローカルMCP監査。
ビューアはURLをブラウザのiframeに直接読み込みます——TDSサーバーを経由するデータはありません。スクロール同期はページ上のJavaScriptのみで実行されます。/responsive-previewコマンドは、Cursorセッション内のClaude Preview MCP経由でローカルに実行されます。