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

# Real Prototype

Real Prototype 可以把一個**原本只是靜態畫面**的版型,直接轉換成可點擊的互動原型——\
而且只需要一段簡短的提示.

你不必自己手動連接畫面或設定互動,superun 會自動幫你建立導覽,容器結構與互動流程.

***

## 操作步驟:Real Prototype 怎麼用

### 1. 在外掛中打開 Real Prototype

<img src="https://mintcdn.com/uxarts/WSckgWxPdkW7qJpK/images/prototype/1.gif?s=fba2d55f36197cdebe19439e77c5bca3" alt="在 Prompt.to.design 中打開 Real Prototype 功能" width={600} data-path="images/prototype/1.gif" />

打開 **Prompt.to.design** 外掛,切換到 **Real Prototype** 分頁.

這個模式會讓系統用「互動流程」的角度來理解你的版面,而不是純靜態設計.

***

### 2. 選擇 Frame 並描述使用者流程

<img src="https://mintcdn.com/uxarts/WSckgWxPdkW7qJpK/images/prototype/2.gif?s=f4f99ee919b7cd87b00b5cb5cdb378a4" alt="選擇 Frame 並輸入 Real Prototype 提示" width={900} data-path="images/prototype/2.gif" />

選擇你想轉成互動原型的 Frame.

在範例中,這個 Frame 只是**單一張靜態圖片**:\
沒有圖層,沒有容器,沒有任何互動,只是一張扁平的圖.

接著描述你想要的行為,例如:`Make this into a clickable signup flow prototype.`

superun 會分析 Frame 裡的視覺布局,準備把它轉換成可以互動的 UI 元件結構.

***

### 3. 產生,匯入並體驗互動原型

<img src="https://mintcdn.com/uxarts/WSckgWxPdkW7qJpK/images/prototype/3.gif?s=83e389982ca88a9c71a929bfd1d373a3" alt="產生具結構與可點擊元素的互動原型" width={900} data-path="images/prototype/3.gif" />

產生完成後,結果就**不再只是一張圖片**.

superun 會自動:

* 切分畫面成有意義的容器
* 偵測按鈕,輸入框與可互動區域
* 建立對應的導覽與流程邏輯
* 產生一個可以實際點擊操作的原型

將原型匯入 Figma 之後,你可以直接在畫布上做使用者測試,流程調整或動效實驗.

Real Prototype 讓你在投入工程或手動原型製作之前,就先拿到一個「可用的互動模型」,\
非常適合快速驗證想法.

<div
  style={{
marginTop: '2rem',
display: 'flex',
justifyContent: 'center',
}}
>
  <a
    href="https://www.figma.com/community/plugin/1528325292196938261/prompt-to-design-by-superun-ai-10x-faster-with-ai-design-like-a-pro-prototype-instantly"
    style={{
  backgroundColor: '#0F172A',
  color: 'white',
  padding: '12px 28px',
  borderRadius: '8px',
  fontSize: '16px',
  fontWeight: '600',
  textDecoration: 'none',
  boxShadow: '0 4px 12px rgba(0,0,0,0.08)',
  transition: 'all 0.2s ease',
}}
    onMouseOver="this.style.backgroundColor='#1E293B'"
    onMouseOut="this.style.backgroundColor='#0F172A'"
  >
    開始使用 Prompt.to.design 設計
  </a>
</div>