> ## Documentation Index
> Fetch the complete documentation index at: https://docs.superun.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Generate mobile-responsive variations

## Scenario

You designed a desktop page, but now you also need a mobile layout.

## Challenge

Manually converting large screens to responsive mobile design takes time\
(spacing, stacking, resizing, component adjustments).

## How prompt.to.design helps

* Select your desktop frame or prepare your desktop picture
* Enter a mobile conversion prompt
* Click **Generate** to instantly produce a reflowed mobile layout
* The plugin automatically restructures layout, adjusts spacing, and ensures touch-friendly usability

<img src="https://mintcdn.com/uxarts/UM9wkb-xhueNg0Cg/images/convert-mobile/1.png?fit=max&auto=format&n=UM9wkb-xhueNg0Cg&q=85&s=65b31f58ecbd1c2238c9b5410f7d0467" alt="Desktop frame selected and mobile conversion prompt entered" style={{ marginTop: '1rem', borderRadius: '8px' }} width="1639" height="1234" data-path="images/convert-mobile/1.png" />

* Generation begins. The right panel shows prompt.to.design’s analysis of layout structure, spacing rules, and mobile adaptation logic.

<img src="https://mintcdn.com/uxarts/UM9wkb-xhueNg0Cg/images/convert-mobile/2.png?fit=max&auto=format&n=UM9wkb-xhueNg0Cg&q=85&s=03e047909026df5865174f9b9dfbe267" alt="AI analysis for mobile conversion" style={{ marginTop: '1rem', borderRadius: '8px' }} width="731" height="575" data-path="images/convert-mobile/2.png" />

* Review the generated mobile layout, refine if necessary, or **Import to Figma**

<img src="https://mintcdn.com/uxarts/UM9wkb-xhueNg0Cg/images/convert-mobile/3.png?fit=max&auto=format&n=UM9wkb-xhueNg0Cg&q=85&s=73562a9694f7f7ab6a0730f76571eafb" alt="Preview of mobile layout output" style={{ marginTop: '1rem', borderRadius: '8px' }} width="738" height="567" data-path="images/convert-mobile/3.png" />

***

## ✔ Your desktop design becomes a clean, responsive mobile layout — without manually rebuilding the entire screen

<img src="https://mintcdn.com/uxarts/UM9wkb-xhueNg0Cg/images/convert-mobile/4.png?fit=max&auto=format&n=UM9wkb-xhueNg0Cg&q=85&s=56bc0796171ee2087e13da233721f730" alt="Desktop vs mobile layout comparison" style={{ marginTop: '1rem', borderRadius: '8px' }} width="1179" height="1254" data-path="images/convert-mobile/4.png" />