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

# 更新或改造現有設計

## 場景

您想要對舊的 UI 進行現代化改造,但保留其結構.

## 挑戰

手動重構 UI 速度慢且容易出錯.

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

* 選擇您想要刷新的舊 **Prompt.to.design 框架**
* 輸入現代化提示,例如:
  **“使此設置頁面現代化,同時保持相同的佈局結構.使用更清晰的排版,更新的表單組件,改進的間距和更精美的側邊欄設計.”**
* 單擊**生成**以應用煥然一新的現代風格

<img src="https://mintcdn.com/uxarts/AyY1SLtgmf3f_Ggt/images/update-oldframe/1.png?fit=max&auto=format&n=AyY1SLtgmf3f_Ggt&q=85&s=0da2d64338d31d6d8c341f18d4775417" alt="Select old frame and apply modernization prompt" style={{ marginTop: '1rem', borderRadius: '8px' }} width="1586" height="663" data-path="images/update-oldframe/1.png" />

* 生成開始.右側面板顯示AI對舊版佈局的分析結果及推薦的風格改進方案.

<img src="https://mintcdn.com/uxarts/AyY1SLtgmf3f_Ggt/images/update-oldframe/2.png?fit=max&auto=format&n=AyY1SLtgmf3f_Ggt&q=85&s=474e50db748709cd738173c49a8d73dd" alt="Modernization analysis" style={{ marginTop: '1rem', borderRadius: '8px' }} width="725" height="558" data-path="images/update-oldframe/2.png" />

* 在預覽中查看更新的設計,如有必要進行完善,或**導入到 Figma**.

<img src="https://mintcdn.com/uxarts/AyY1SLtgmf3f_Ggt/images/update-oldframe/3.png?fit=max&auto=format&n=AyY1SLtgmf3f_Ggt&q=85&s=0757808d1328eafbdf39429723515134" alt="Preview modernized UI output" style={{ marginTop: '1rem', borderRadius: '8px' }} width="719" height="557" data-path="images/update-oldframe/3.png" />

***

## ✔ 設置頁面使用現代 UI 組件進行升級 - 同時保留原始佈局結構

<img src="https://mintcdn.com/uxarts/AyY1SLtgmf3f_Ggt/images/update-oldframe/4.png?fit=max&auto=format&n=AyY1SLtgmf3f_Ggt&q=85&s=aebc117b1450bd949f3bb993bb85211e" alt="Before and after modernization comparison" style={{ marginTop: '1rem', borderRadius: '8px' }} width="1738" height="674" data-path="images/update-oldframe/4.png" />