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

# Update or refactor an existing design

## Scenario

You want to modernize an old UI but keep its structure.

## Challenge

Refactoring UI by hand is slow and error-prone.

## How prompt.to.design helps

* Select the old **Figma Frame** you want to refresh
* Enter a modernization prompt, such as:\
  **“Modernize this settings page while keeping the same layout structure. Use cleaner typography, updated form components, improved spacing, and a more polished sidebar design.”**
* Click **Generate** to apply a refreshed, modern style

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

* Generation begins. The right panel displays AI’s analysis of the old layout and recommended style improvements.

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

* Review the updated design in the preview, refine if necessary, or **Import to 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" />

***

## ✔ The settings page is upgraded with modern UI components — while preserving the original layout structure

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