Single-Screen App UI Design Mockup (8pt Grid, Clear Hierarchy)

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

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

[ Log in to see the full prompt ]

Use this to quickly turn an idea for an app screen into a high-fidelity mockup you can show a client or hand to engineering — good for freelance designers, small MVP teams, and PMs communicating a screen to developers. Three keys to getting GPT Image 2 to cooperate: first, describe the layout skeleton (top bar / content area / primary button / bottom navigation) before adding content, or it will scatter components randomly; second, explicitly state '8pt grid, spacing in multiples of 8' — this is the shared language of real UI design, and naming it visibly tightens the layout; third, emphasize 'design mockup, not a real screenshot' and 'screen content only, no phone frame,' otherwise it often gives you a lifestyle photo of someone holding a phone. Worth noting: this is a visual mockup, not working software — button and icon placement can be nudged but they aren't real components; Chinese characters occasionally break at small sizes, so keep content light — a 4–6 item list is most reliable, and anything longer tends to crowd and blur. If the first version has the wrong number of bottom nav tabs, just tell it to 'change the bottom nav to N tabs, leave everything else unchanged' and regenerate.