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

## 使用情境

你已经有一个粗略的线框稿,或只是由几个矩形和占位区块组成的简单排版,
想要把它快速变成一个看起来像成品的高保真界面.

## 挑战

如果手动处理,想把线框变成像素级精致的画面,通常要花上好几个小时:
调整颜色,间距,字体,阶层结构,网格与元件样式等细节.

## 如何让 Prompt.to.design 帮你完成

* 在 Figma 中选择你的线框 Frame
* 在 Prompt.to.design 中输入一段描述「理想成品」的提示
* AI 会自动优化间距,颜色,排版,网格,组件与阶层结构
* 产生一个干净,精致,完全可编辑的高保真版面

<img src="https://mintcdn.com/uxarts/AyY1SLtgmf3f_Ggt/images/wireframe/1.png?fit=max&auto=format&n=AyY1SLtgmf3f_Ggt&q=85&s=d3926dca7c23a027758addb7063f531f" alt="Wireframe selected with prompt entered" style={{ marginTop: '1rem', borderRadius: '8px' }} width="1449" height="552" data-path="images/wireframe/1.png" />

* 产生过程中,右側面板会显示结构分析,元件对应与设计优化说明.

<img src="https://mintcdn.com/uxarts/AyY1SLtgmf3f_Ggt/images/wireframe/2.png?fit=max&auto=format&n=AyY1SLtgmf3f_Ggt&q=85&s=8ea49c81c39ad28f457eb993b4b71708" alt="AI analysis converting wireframe to high fidelity" style={{ marginTop: '1rem', borderRadius: '8px' }} width="729" height="564" data-path="images/wireframe/2.png" />

* 检查高保真草稿,如果需要可以再微调提示,\
  或直接点击 **Insert into Figma** 导入到 Figma 中继续修改.

<img src="https://mintcdn.com/uxarts/AyY1SLtgmf3f_Ggt/images/wireframe/3.png?fit=max&auto=format&n=AyY1SLtgmf3f_Ggt&q=85&s=d3cbd97ffa42e468dd1bc6b071ea34f4" alt="Preview of high-fidelity output" style={{ marginTop: '1rem', borderRadius: '8px' }} width="723" height="561" data-path="images/wireframe/3.png" />

***

## ✔ 从低保真线框,一步到位产出高保真布局

<img src="https://mintcdn.com/uxarts/AyY1SLtgmf3f_Ggt/images/wireframe/4.png?fit=max&auto=format&n=AyY1SLtgmf3f_Ggt&q=85&s=d35c719525f16f683c130f8a768b5cc0" alt="Final high-fidelity layout" style={{ marginTop: '1rem', borderRadius: '8px' }} width="1690" height="639" data-path="images/wireframe/4.png" />