> ## 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 提供协助

* 上传参考图像或选择现有 **Figma 框架**
* 输入提示并选择目标设备尺寸
* 点击**生成**让插件分析参考布局,间距,color和样式规则

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

* 生成开始.右側面板将显示 prompt.to.design 对参考风格与您请求的分析结果.

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

* 查看生成的结果,如有需要进行完善,或**导入到 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" />