> ## 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.

# 生成移動響應的變體

## 場景

您設計了一個桌面頁面,但現在您還需要一個移動佈局.

## 挑戰

手動將大屏幕轉換為響應式移動設計需要時間\
（間距,堆疊,調整大小,組件調整）.

## 如何讓 prompt.to.design 提供協助

* 選擇您的桌面Frame或準備您的桌面圖片
* 輸入移動轉換提示
* 單擊**生成**立即生成重排的移動佈局
* 該插件自動重組佈局,調整間距,並確保觸摸友好的可用性

<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" />

* 查看生成的移動佈局,如有必要進行完善,或**導入到 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" />

***

## ✔ 您的桌面設計變成乾淨,響應靈敏的移動佈局 - 無需手動重建整個屏幕

<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" />