App 單畫面 UI 設計稿（8pt 格線＋層級分明）

【用途】產出一張高保真的 [App類型] 行動 App 單畫面 UI 設計稿（design mockup，不是真實截圖），畫面：[畫面名稱]，整體風格 [設計風格]。

【版面骨架｜先定格線再放元件】
- 用 8pt 格線系統，所有間距是 8 的倍數（8／16／24／32）。
- 安全邊距左右各 16，元件不貼邊。
- 由上而下分四層：
  1. 頂部列：狀態列 + 標題「[畫面標題]」+ 一個返回／選單圖示。
  2. 主內容區：依「內容清單」放卡片或列表。

[ Log in to see the full prompt ]

要把 App 某一頁的構想快速變成「給客戶看、給工程接的高保真設計稿」時用這條，適合接案設計師、做 MVP 的小團隊、想跟工程溝通畫面的 PM。三個關鍵讓 GPT Image 2 聽話：一是先把版面骨架（頂部列／內容區／主按鈕／底部導覽）描述清楚再放內容，否則它會自己亂塞元件；二是明寫「8pt 格線、間距是 8 的倍數」，這是真實 UI 設計的共通語言，講出來它排得明顯更整齊；三是強調「design mockup 不是真實截圖」「只要螢幕內容、不要手機外框」，不然它常給你一張握著手機的情境照。要提醒的是：這是視覺稿不是能跑的程式，按鈕、圖示位置可微調但不會是真元件；中文字偶爾會在小字級出錯，內容別塞太多，4-6 項列表最穩，超過容易擠小開始糊字。第一版若底部導覽分頁數不對，叫它「底部導覽改成 N 個分頁、其餘不動」重生即可。