# 如何撰寫 UI Mockup 的 GPT Image 提示詞

如何用提示詞讓 GPT Image 2 產生版面可控、標籤清楚可讀的儀表板、App 畫面和裝置 Mockup。

URL: https://www.gptimagehub.com/zh-TW/guides/gpt-image-ui-mockup-prompts
Category: UI / UX 設計
Updated: 2026-10-20
Reading time: 3 minutes

## Direct answer

好的 UI Mockup GPT Image 提示詞，會寫明產品、畫面及其主要元件、所在的裝置或外框、視覺風格，以及必須清楚可讀的精確文字。依閱讀順序列出元件，並保持介面文案簡短，因為模型渲染少量大字標籤，遠比渲染成段的介面文字可靠。

## 像畫線框圖一樣描述畫面

先說明這個畫面的用途和包含的內容，並依使用者閱讀的順序展開：導覽列、頁首、主要內容、次要面板和操作按鈕。逐項列出元件時，模型的版面會比只用「現代儀表板」這類風格詞暗示時更容易預測。

- 寫明產品和畫面：「SaaS 帳務工具的數據分析儀表板」或「冥想 App 的新手導覽畫面」。
- 依序列出區塊：側邊欄導覽、附搜尋框的頂部列、三張 KPI 卡片、一張折線圖，以及一個近期交易表格。
- 說明疏密程度：寬鬆的間距、一致的卡片尺寸、清楚的對齊。

## 選擇呈現方式：平面畫面、裝置或場景

先決定你需要的是用於作品集案例的平面介面截圖、用於到達網頁的裝置 Mockup，還是用於行銷的實景照片。每種情況需要不同的寫法。

- 平面：「扁平 UI 截圖，無裝置外框，16:9」。
- 裝置：「顯示在一台輕薄筆電上，略微傾斜，螢幕朝向鏡頭，帶柔和反光」。
- 場景：「自然日光下木質書桌上的筆電，淺景深」；介面會變小，文字也更難辨識。

## 介面文字要簡短、精確

文字無法辨識是生成 UI 時最常見的問題。只替少數關鍵標籤加上引號，其餘部分用佔位文字行帶過即可。

- 精確引用標題和按鈕文字：「營收」「升級方案」。
- 內文改用佔位文字行。
- 避免使用含有真實資料的長表格；改為要求五列範例交易資料。

## 定義視覺系統

玻璃擬態之類的風格詞有一定幫助，但一套簡短的視覺系統能讓多個畫面的效果更一致。

- 顏色：背景色、表面色、主要強調色和狀態色。
- 字體：一種無襯線字體家族、清楚的字重層級，以及標題與標籤之間的字級對比。
- 元件：圓角、陰影、邊框和圖示風格。

## Checklist

- 已寫明產品、畫面用途和目標使用者。
- 元件依閱讀順序列出。
- 已選定呈現方式：平面截圖、裝置或場景。
- 只有簡短且加上引號的文字需要清楚可讀。
- 已定義顏色、字體和元件風格。
- 畫面比例符合目標：桌機用 16:9，手機用 9:16。

## FAQ

### GPT Image 2 能產生可用的 UI 設計嗎？

它能產生逼真的視覺概念和 Mockup，適合用於簡報、到達網頁和情緒板。請把輸出視為視覺參考而非正式上線的設計，因為間距、圖示和小字都不夠精確，無法當作設計規格直接交付。

### 如何讓 UI Mockup 中的文字清楚可讀？

把需要清楚可讀的文字限制在少數幾個加上引號的標籤，字放大，其他內容都描述為佔位文字行。以簡潔無襯線字體呈現的短詞，渲染效果最穩定。

### 如何讓多個畫面保持一致？

在每則提示詞中重複使用同一段視覺系統描述，只修改畫面描述的部分。用同一個模板產生的畫面，會比每次從頭描述的畫面更一致。