如何撰寫 UI Mockup 的 GPT Image 提示詞
如何用提示詞讓 GPT Image 2 產生版面可控、標籤清楚可讀的儀表板、App 畫面和裝置 Mockup。
好的 UI Mockup GPT Image 提示詞，會寫明產品、畫面及其主要元件、所在的裝置或外框、視覺風格，以及必須清楚可讀的精確文字。依閱讀順序列出元件，並保持介面文案簡短，因為模型渲染少量大字標籤，遠比渲染成段的介面文字可靠。
像畫線框圖一樣描述畫面
先說明這個畫面的用途和包含的內容，並依使用者閱讀的順序展開：導覽列、頁首、主要內容、次要面板和操作按鈕。逐項列出元件時，模型的版面會比只用「現代儀表板」這類風格詞暗示時更容易預測。
- 寫明產品和畫面：「SaaS 帳務工具的數據分析儀表板」或「冥想 App 的新手導覽畫面」。
- 依序列出區塊：側邊欄導覽、附搜尋框的頂部列、三張 KPI 卡片、一張折線圖，以及一個近期交易表格。
- 說明疏密程度：寬鬆的間距、一致的卡片尺寸、清楚的對齊。
選擇呈現方式：平面畫面、裝置或場景
先決定你需要的是用於作品集案例的平面介面截圖、用於到達網頁的裝置 Mockup，還是用於行銷的實景照片。每種情況需要不同的寫法。
- 平面：「扁平 UI 截圖，無裝置外框，16:9」。
- 裝置：「顯示在一台輕薄筆電上，略微傾斜，螢幕朝向鏡頭，帶柔和反光」。
- 場景：「自然日光下木質書桌上的筆電，淺景深」；介面會變小，文字也更難辨識。
介面文字要簡短、精確
文字無法辨識是生成 UI 時最常見的問題。只替少數關鍵標籤加上引號，其餘部分用佔位文字行帶過即可。
- 精確引用標題和按鈕文字：「營收」「升級方案」。
- 內文改用佔位文字行。
- 避免使用含有真實資料的長表格；改為要求五列範例交易資料。
定義視覺系統
玻璃擬態之類的風格詞有一定幫助，但一套簡短的視覺系統能讓多個畫面的效果更一致。
- 顏色：背景色、表面色、主要強調色和狀態色。
- 字體：一種無襯線字體家族、清楚的字重層級，以及標題與標籤之間的字級對比。
- 元件：圓角、陰影、邊框和圖示風格。
提示詞檢查清單
- 已寫明產品、畫面用途和目標使用者。
- 元件依閱讀順序列出。
- 已選定呈現方式：平面截圖、裝置或場景。
- 只有簡短且加上引號的文字需要清楚可讀。
- 已定義顏色、字體和元件風格。
- 畫面比例符合目標：桌機用 16:9，手機用 9:16。
常見問題
GPT Image 2 能產生可用的 UI 設計嗎？
它能產生逼真的視覺概念和 Mockup，適合用於簡報、到達網頁和情緒板。請把輸出視為視覺參考而非正式上線的設計，因為間距、圖示和小字都不夠精確，無法當作設計規格直接交付。
如何讓 UI Mockup 中的文字清楚可讀？
把需要清楚可讀的文字限制在少數幾個加上引號的標籤，字放大，其他內容都描述為佔位文字行。以簡潔無襯線字體呈現的短詞，渲染效果最穩定。
如何讓多個畫面保持一致？
在每則提示詞中重複使用同一段視覺系統描述，只修改畫面描述的部分。用同一個模板產生的畫面，會比每次從頭描述的畫面更一致。
相關提示詞模板
搭配實際提示詞使用本指南
瀏覽提示詞庫中對應分類的提示詞模板，並將其結構套用到你自己的圖像工作流程。