# Adapt a desktop design for mobile screens

Plans how each part of a desktop layout should change on small screens: what to stack, hide, collapse, or redesign for touch.

- Topic: Product & UX Design
- Framework: Few-Shot
- Level: Standard
- Tags: Rewrite & Edit, Fill-in Template
- Source: https://www.thinkwithprompt.com/prompts/adapt-a-desktop-design-for-mobile-screens

## Prompt

```text
Help me adapt a desktop design to work well on mobile.

**Screen and its main job:** [WHAT USERS DO HERE]
**Desktop layout:** [DESCRIBE REGIONS - e.g. left nav, toolbar, 6-column data table, right panel with details]
**What mobile users do differently:** [TASKS, CONTEXT, DATA IF ANY - e.g. "mostly check status, rarely edit"]
**Breakpoints and platform:** [e.g. responsive web 360-768px; native app]
**Design system components available:** [e.g. bottom sheet, tabs, accordion, cards]

For each region, recommend one approach and say why: keep, stack, collapse (accordion, tabs, "more"), move (to bottom nav, a sheet, or a separate screen), transform (e.g. table to card list with key fields), or remove on mobile, only if users truly do not need it there.

Also cover:
- Content priority order for the single column.
- Navigation pattern and where the primary action lives (thumb reach).
- Touch targets (at least 44x44 pt or 48x48 dp), spacing, and gesture alternatives that are always visible.
- Data tables: which columns survive, and how to reach the rest.
- Forms and inputs: correct keyboards, sticky actions, avoiding the keyboard covering fields.
- Performance and image handling.

Return a region-by-region table (Desktop region | Mobile approach | Notes) and a short wireframe description of the mobile screen from top to bottom.
```

## What to fill in

- WHAT USERS DO HERE
- e.g. responsive web 360-768px; native app
- e.g. bottom sheet, tabs, accordion, cards

Free to copy and use. From ThinkWithPrompt (https://www.thinkwithprompt.com/), a library of 2,663 curated AI prompts.