Turn a desktop design into a mobile layout plan

Attach a desktop screenshot and get a section-by-section plan for how it should work on a phone.

You'll attach

Needs screenshot

Works with

ChatGPTClaudeGeminiGrokCopilot

How to use it

1. Open chatgpt.com or claude.ai (or another AI listed here).
2. Attach the screenshot (or paste it straight into the chat).
3. Fill in the highlighted blank ([PAGE OR SCREEN NAME]) below, or edit them after pasting.
4. Copy the prompt, paste it into the chat and send.
5. Paste the plan into Cursor or Claude Code with your code to make the changes.

The attached screenshot is the desktop version of [PAGE OR SCREEN NAME].

Plan the mobile version (about 390px wide):
1. List every section top to bottom and say what happens to it on mobile: stack, shrink, collapse, hide, or move.
2. Navigation: how the menu should work.
3. Anything that won't fit, such as wide tables, side-by-side columns or hover effects, and what to do instead.
4. Tap targets and text sizes to check.
5. The order of content on mobile if it should change, and why.

Then write the CSS media query changes as a starting point if the page uses simple HTML and CSS.