기능
두 도구, 하나의 워크플로.
Responsive Preview tool은 동일 출처일 때 스크롤 동기화와 함께 세 개의 라이브 iframe을 나란히 제공합니다——URL을 붙여넣고 세 개 모두를 동시에 조작하세요. /responsive-preview Cursor 명령은 AI 레이어를 추가합니다: 세 뷰포트에서 스크린샷을 찍고, 레이아웃 문제를 보고하며, 라이브 뷰어로 연결되는 링크를 제공합니다.
함께 사용하세요: 뷰어로 시각적으로 문제를 발견하고, 명령으로 구조화된 pass/warn/fail 감사를 받아 Claude에게 수정을 요청하세요.
라이브 뷰어
URL을 붙여넣고 세 너비를 비교하세요.
tinydesignshop.com/tools/responsive-preview를 열고, URL을 붙여넣은 뒤 Preview를 클릭하세요. 세 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)에서 스크린샷을 찍습니다. 그다음 오버플로, 내비 접힘, 텍스트 가독성, 이미지 크기, 고정 요소 다섯 가지 차원에서 구조화된 검사를 실행하고 각 뷰포트에 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를 통해 로컬에서 실행됩니다.