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

# Recreate a design style from a reference

## Scenario

You already have a beautifully designed page and want to expand more screens with the same visual style.

## Challenge

Manually keeping visual consistency across new pages takes a lot of time and effort.

## How prompt.to.design helps

* Upload a reference image or select an existing **Figma Frame**
* Enter your prompt and choose the target device size
* Click **Generate** to let the plugin analyze the reference layout, spacing, colors, and style rules

<img src="https://mintcdn.com/uxarts/UM9wkb-xhueNg0Cg/images/design-from-reference/1.png?fit=max&auto=format&n=UM9wkb-xhueNg0Cg&q=85&s=4585863c37084be1faf15c67f0ab9561" alt="Reference setup and prompt input" style={{ marginTop: '1rem', borderRadius: '8px' }} width="1055" height="717" data-path="images/design-from-reference/1.png" />

* Generation begins. The right panel will show prompt.to.design's analysis of the reference style and your request.

<img src="https://mintcdn.com/uxarts/UM9wkb-xhueNg0Cg/images/design-from-reference/2.png?fit=max&auto=format&n=UM9wkb-xhueNg0Cg&q=85&s=23f0e09ce94c9db2af5ecef6593c994c" alt="AI analysis screen" style={{ marginTop: '1rem', borderRadius: '8px' }} width="724" height="566" data-path="images/design-from-reference/2.png" />

* Review the generated result, refine if needed, or **Import to Figma** to continue your work.

<img src="https://mintcdn.com/uxarts/UM9wkb-xhueNg0Cg/images/design-from-reference/3.png?fit=max&auto=format&n=UM9wkb-xhueNg0Cg&q=85&s=130fc3f10e0fa8ca3966ee2d85409a01" alt="Preview generated design" style={{ marginTop: '1rem', borderRadius: '8px' }} width="732" height="573" data-path="images/design-from-reference/3.png" />

***

## ✔ The generated page matches the reference visually and remains fully editable in Figma

<img src="https://mintcdn.com/uxarts/UM9wkb-xhueNg0Cg/images/design-from-reference/4.png?fit=max&auto=format&n=UM9wkb-xhueNg0Cg&q=85&s=57053563a7d25eb8043f96d1a42a5885" alt="Reference vs output comparison" style={{ marginTop: '1rem', borderRadius: '8px' }} width="1389" height="1228" data-path="images/design-from-reference/4.png" />