خلّ Claude Code يشوف موقعك على الجوال والآيباد واللابتوب مع ResponsivelyLet Claude Code See Your Site on Phone, Tablet and Laptop with Responsively

Key terms

Responsive design

A site that rearranges itself to fit the screen. The same page reads well on a phone, a tablet and a laptop.

Responsively App

A free, open source browser that shows your site on several devices side by side. A scroll or click in one device repeats in all of them.

MCP

A way to connect an AI tool to another app. Here it lets Claude Code open your site in Responsively, click around and take screenshots.

Viewport

The screen size a page is shown at, like the width of an iPhone or an iPad.

The steps

1. 1

   Step 1

   Download the v2 beta

   Open responsively.app/download, switch to Beta and download the build for your machine: Mac, Windows or Linux.

   MCP ships only in v2.0.0 beta. The stable v1.18.0 does not have it.

   responsively.app

   

   Tip: It is a beta. If you need full stability for daily work, keep the stable version installed too.

2. 2

   Step 2

   Open your site on every device

   Type your site's address in the address bar. It works with any live site and with the one you are building locally, like http://localhost:3000.

   Pick your devices from the device list, for example iPhone, iPad and laptop. There are 30+ built in profiles and you can add your own size.

   Scroll or click in one device and watch it repeat in all of them.

   

   Tip: Always keep one small phone in the list. Most layout bugs show up there first.

3. 3

   Step 3

   Turn on the MCP server and connect Claude Code

   v2 has an MCP panel inside the app. Check that the server is running there.

   Pick the tool you use from the list: Claude Code, Claude Desktop, Codex, Cursor or VS Code. The app writes the setting into that tool's config for you, for example ~/.claude.json for Claude Code.

   Then quit and reopen Claude Code so it loads the new setting.

   github.com

   

4. 4

   Step 4

   Check that Claude Code sees Responsively

   Open Claude Code in your project folder and run /mcp. Responsively should be in the server list, connected.

   If it is missing, make sure the Responsively app is open with the server running, then reopen Claude Code.

   

   Tip: The /mcp command lists every server connected to Claude Code and the status of each one.

5. 5

   Step 5

   Have Claude Code check your site on every screen

   Claude Code can now open your site in Responsively, read the page, click and screenshot each device. Ask for a check only, no edits, so you see the problems first.

   PromptCheck prompt

   Copy

   Use the Responsively tools. Open [your site URL or http://localhost:3000] on iPhone, iPad and laptop, and take a screenshot of each device.
   
   Tell me exactly where the layout breaks on each device: elements spilling off the screen, clipped text, buttons that are too small or crowded, stretched images.
   
   Do not change any code yet. I want a list of problems, worst first.

6. 6

   Step 6

   Let it fix and check again

   Once you have reviewed the list, have it fix the issues and screenshot every device again. That way you know the fix did not break something else.

   PromptFix prompt

   Copy

   Fix the problems you found in [file or folder]. Then open the site again in Responsively on the same devices, screenshot each one and compare before and after.
   
   If anything is still broken, keep fixing until it is all clean, then give me a summary of every change you made.

   Tip: Let Claude Code work on a new git branch so you can roll back easily.

Ready prompts to copy

Use the Responsively tools. Open [form page URL] on iPhone, fill the form with test data and press submit.

Tell me if a field hides under the keyboard, a button does not respond, or an error message never shows. Take a screenshot before and after submitting.

Use the Responsively tools. Open [site URL] on the smallest phone and the largest laptop in the list and go through [the key pages]. Give me a short report: ready to send or not, with a screenshot for every problem.