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.
The prompt
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.
Highlighted [brackets] are blanks to replace with your own details.
Fill in the blanks and use this promptMore Product & UX Design prompts
What to fill in
- WHAT USERS DO HERE
- e.g. responsive web 360-768px; native app
- e.g. bottom sheet, tabs, accordion, cards
How this prompt is built
This prompt follows the Few-Shot structure (Few-shot prompting). A few-shot prompt includes one or more worked examples of the input and the output you want, so the model can copy the pattern instead of guessing it.
Related prompts
- Set up readable, responsive typography for my websiteProduction-ready CSS for body text, a type scale, font loading, and responsive sizing based on proven typography rules.
- Plan a card sort or tree test to fix my navigationSets up an information architecture study, including the method, cards or tree, tasks, participants, and how to read the results.
- Turn research insights into problem statements and How Might We questionsConverts research findings into sharp problem statements and well-scoped How Might We questions ready for an ideation session.
- Turn a vague stakeholder request into a clear problem statementA one-page problem brief that separates the ask from the underlying need, before anyone commits to a solution.