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

# Template Remix

Template Remix 讓你可以把任意一個現有版型,快速「復刻」出一個符合自己品牌與內容的新版本.

你只需要輸入提示,設定語氣與方向,Prompt.to.design 就會在 Figma 內直接幫你改造模板,非常適合:

* 想要速度與一致性的設計師
* 想沿用結構,但更新風格與文案
* 想在短時間內產生多個版本做比較或測試

***

## 功能總覽

下面這支短片示範了 Template Remix 在 Prompt.to.design 外掛中的實際操作流程.

<div style={{ position: "relative", paddingBottom: "56.25%", height: 0, marginBottom: "2rem" }}>
  <iframe src="https://www.youtube.com/embed/pb9wZkvgQxw" title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen style={{ position: "absolute", top: 0, left: 0, width: "100%", height: "100%" }} />
</div>

***

## 核心優點

* 復刻並改造上千種版型,填入你自己的內容與品牌
* 保留原本結構,同時更新視覺風格與訊息表達
* 幾秒內就能產生新的頁面變化
* 結果可直接插入 Figma 畫布,完全可編輯
* 非常適合原型設計,A/B 測試與快速探索

***

## 操作步驟:Template Remix 怎麼用

### 1. 在外掛中打開 Template Remix

從外掛上方導覽列中點選 **Template Remix**.

接著點擊 **Select templates**,你會看到依類別整理好的模板清單,例如 **Home**,**Sign-in**,**Dashboard**,**Products** 等.

### 2. 瀏覽並選擇要復刻的模板

點擊任一模板卡片即可預覽.\
預覽可以幫助你先理解版面結構,再決定是否用它當作基底.

### 3. 用提示描述你想要的新設計

在描述欄位中輸入簡單的文字,說明你想產生的是什麼頁面,給誰用,主要目標是什麼.

### 4. 點擊「Remix」產生新版面

superun 會讀取選定的模板 → 套用你的提示 → 產生一個新的設計,\
同時兼顧原有結構與你在內容／風格上的需求.

你可以無限次重新產生不同變化.

### 5. 將結果插入 Figma

當你看到喜歡的版本時,點擊 **Insert into Figma**.\
生成的版面會直接加入目前的畫布中,所有圖層都可以像一般 Figma 元件一樣編輯.

***

## 使用小技巧

* 在提示中清楚說明產品用途與目標族群
* 補充你想要的視覺氛圍（例如:極簡,活潑,未來感,溫暖）
* 如果有必備區塊（CTA,表單欄位,主 Hero 文案等）,可以在提示裡點名
* 多生成幾個版本,比較不同方向會比較有收穫

***

## 總結

Template Remix 提供了一種又快又穩定的方式,\
讓你在不必手動重建 UI 結構的情況下,把專業模板轉換成自家品牌的版面.

試著搭配不同提示與模板,探索更多你原本不一定會想到的版型組合.

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