Nano Banana Pro 的 mock window 生成提示詞（prompt）能讓你只用幾行文字，就快速產生逼真的「假截圖」效果。只要輸入正確的 Nano Banana Pro mock window UI 設計提示詞，就能立即視覺化 SaaS 儀表板、瀏覽器框架或桌面 App，看起來足以用在登陸頁、行銷素材或投影片提案中。以下提供可直接複製使用的提示詞，你可以依照品牌風格、排版與內容再做微調。
Part 1. Nano Banana Pro 如何協助 Mock Window UI 設計？
Nano Banana Pro 擅長生成乾淨、真實、看起來像「正在使用中的軟體介面」的假截圖。只要撰寫合適的 Nano Banana Pro mock window UI 設計提示詞，你就能快速打造桌面 App 視窗、瀏覽器框架、後台儀表板，品質高到足以直接用在行銷頁面、教學文章或投資簡報中。
什麼是「Mock Window」UI？
Mock Window UI 是一種 AI 生成的「假視窗」──看起來像真實桌面軟體、App 或瀏覽器視窗的截圖，但完全由 AI 繪製，不需要你在 Figma 裡畫出每個細節。你只需描述畫面，Nano Banana Pro 就能渲染出：
- 桌面背景搭配一個或多個 App 視窗
- 帶有分頁、網址列、功能按鈕的瀏覽器框架
- 置於視窗內的產品介面或控制面板排版
這類 Mock Window UI 非常適合作為 SaaS 首屏 hero 圖、產品導覽（product tour）、或 投影片提案 中的產品視覺素材，能快速提升專業度。
Part 2. Nano-Banana 特製提示詞 複製 & 粘貼【桌面 Mock Window + 手機 UI】
以下是可直接搭配 Nano Banana Pro 圖像模型使用的提示詞，讓你能快速生成高擬真的桌面 Mock Window 與手機 App UI 視覺。
只要複製、貼上，再視需要調整 App 名稱或配色即可。
撰寫提示詞的關鍵，是以層級分階段描述：先設定桌面背景 → 再描述視窗框架（瀏覽器或 App） → 接著是內部 UI 排版（側邊欄、導覽列、卡片、圖表） → 最後設定按鈕與標題的文字內容。
以下提供可直接貼進 Nano Banana Pro 的提示詞：
桌面模擬視窗 - 提示詞表格 (Nano Banana Pro)
主題 |
提示詞 |
複製 |
|---|---|---|
旅行 |
使用 Nano Banana Pro 的 mock window UI 設計提示詞，生成一個旅遊訂票網站的假瀏覽器視窗截圖。顯示模糊的 macOS 桌面，一個 Safari 樣式的瀏覽器視窗置中。頁面為旅遊網站首頁「Skyline Trips - Plan Your Next Adventure」。包含上方導覽列（Destinations、Deals、Guides、My Trips）。主畫面呈現海灘 hero 圖、標題「Discover your next city escape」、搜尋欄與「Search flights & hotels」按鈕。採用亮色模式與乾淨格線排版，所有文本需清晰可讀。 |
複製 |
工作 |
生成名為「FocusDesk Pro」的生產力 App 桌面 mock window。顯示 Windows 11 桌面，有一個置中的應用程式視窗，帶現代標題列與柔和陰影。內部為工作 dashboard UI：左側為側邊欄（Dashboard、Tasks、Calendar、Teams、Settings），主畫面為看板視圖（Backlog、In Progress、Review、Done）與任務卡片（標題、到期日、狀態標籤）。採用中性色亮色主題與柔和配色。 |
複製 |
日誌寫作 |
為一款名為「Daily Pages」的數位日記與習慣追蹤工具生成假 App 視窗截圖。採用 macOS 桌面風格，視窗有簡潔標題列，介面為左右雙欄：左側為日曆與日記列表；右側為今日日記頁面，含大標題、文字區與習慣追蹤（Sleep、Exercise、Water、Reading）。以柔和米色與淡色系呈現溫暖風格。 |
複製 |
電子商務 |
使用 AI fake browser window prompt 生成一個名為「GlowMart」的電商後台 dashboard。採用 Chrome 樣式瀏覽器框架，主畫面包含今日營收、訂單、轉換率等卡片，以及 7 天銷售折線圖。左側有側邊導覽列（Overview、Products、Orders、Customers、Marketing、Settings）。採亮色主題與醒目數字強調。 |
複製 |
行動裝置 UI - 提示詞表格 (Nano Banana Pro)
操作步驟示意：
Screen 1：「選擇照片」— 相簿縮圖＋「選擇此照片」。
Screen 2：「AI 編輯」— 編輯器介面＋AI 工具列（背景移除、美女、美型、濾鏡）。
Screen 3：「海報排版」— 套入海報模板與文字。
Screen 4：「導出與分享」— 儲存、分享到 IG / TikTok、下載 PNG。
使用 iOS 風格元件、亮色模式，所有文字需清晰。整體配色應符合 PixPretty 的霓虹粉＋深灰品牌風格。
主題 |
提示詞 |
複製 |
|---|---|---|
旅行 |
Nano Banana Pro 四頁式手機 UI 提示詞：生成一張包含「四個 iPhone 直式畫面」的旅遊 App「TripNest」示意圖。畫面水平排列，背景為柔和淺色。
|
複製 |
工作 |
使用 Nano Banana Pro 生成工作任務管理 App「TaskFlow」的單頁手機 UI。置中展示一台 iPhone，背景柔和漸層。
|
複製 |
日誌寫作 |
名為 「MoodJournal」 的日記與心情追蹤 App 生成一頁式手機 UI。採用柔和粉彩配色。
|
複製 |
電子商務 |
使用 Nano Banana Pro 生成時尚電商 App 「StyleStreet」 的分類頁 UI。iPhone 畫面包含：
|
複製 |
Part 3. 使用 Nano Banana Pro 的網站原型圖 提示詞
撰寫良好的 網站原型圖 AI 提示詞，能幫你生成看似真實的首頁截圖，再將其轉換為更成熟的設計稿。
在我們比較 ChatGPT 5.1 與 Nano Banana Pro 的 UI 生成結果時，Nano Banana Pro 在介面排版精準度、文字清晰度上表現更佳，尤其適合 mock window 與網站 mockup 的工作流程。
以下以 PixPretty（AI 照片編輯平台）作為示範。
| 主題 | 指令 | 照片 | 複製 |
| PixPretty 使用者介面佈局 |
使用 Nano Banana Pro 生成高擬真 mock window UI 的 PixPretty 網站截圖。顯示 macOS 桌面並置中 Safari-style 瀏覽器，網址列顯示「https://pixpretty.tenorshare.ai/」。 頁面為 PixPretty 的霓虹粉＋深灰 Neobrutalist 登陸頁：
- 導覽列：PixPretty logo、Features、Templates、AI Tools、Pricing、Blog、Login、亮色 CTA「Try PixPretty Free」。 整體需呈現厚框、邊線、立體卡片、可讀英文文本，並看起來像可直接用於行銷頁面。 |
|
複製 |
以下是更多可直接使用的範例，可當作 網站 mockup 提示詞 或擴充你的 UI mockup 提示庫。
主題 |
提示詞 |
複製 |
|---|---|---|
aaS 登陸頁面 |
為 SaaS「FlowMetrics」生成高擬真網站 mockup。展示桌面瀏覽器中的現代化登陸頁。頂部為導覽列（Product、Pricing、Resources、Login、Start free trial）。Hero 區包含標題「Understand your product metrics in minutes」、副標語與 CTA「Get started」，右側放 dashboard 預覽卡。下方包含三欄功能、推薦語、定價預覽。採白底、寬鬆留白、清晰英文。 |
複製 |
作品集首頁 |
建立 UI/UX 設計師「Alex Rivera」的個人作品集首頁 mockup。瀏覽器框架內含極簡導覽列（Work、About、Services、Contact）。Hero 區標題「Product designer creating clean, conversion-focused interfaces」，介紹段落與 CTA「View selected projects」。下方為作品方格卡，再下方為 Services（三項圖示）。頁尾含 Email、社群 icon、版權。採中性色強字體。 |
複製 |
部落格 / 內容中心 |
使用 Nano Banana Pro 生成科技部落格「Nano Insights」的首頁 mockup。頁首含 logo 與導覽（Articles、Guides、Tutorials、About、Subscribe）。Hero 為精選文章大圖＋標題＋摘要＋「Read now」。下方為文章格狀列表（縮圖、標題、分類、日期），右側為側欄（訂閱卡、熱門標籤）。頁尾含連結與社群 icon。採編輯式排版與清晰英文。 |
複製 |
結論
Nano Banana Pro 讓你能快速將簡單想法轉為高質感 UI 視覺，不論是桌面 Mock Window、多畫面手機流程，或網站 Hero mockup 都能輕鬆完成。只要撰寫完善的 Nano Banana Pro UI 提示詞，就能產生逼真的「假截圖」，在設計完成前就先展示產品樣貌。
這些 mockup 非常適合用來做概念驗證、強化行銷頁面或提案簡報，之後再將最好的版本帶到 Figma 或 Sketch 深化。久而久之，你也能累積出自己的 UI mockup 提示詞庫，跨產品與專案重複使用。
FAQ：關於 Nano Banana Pro UI 提示詞
Q1：Nano Banana Pro 能取代 UI 設計師嗎？
不能。Nano Banana Pro 很適合輔助發想、快速生成 mock window 截圖與視覺參考，但真正的 UI 設計仍需要專業設計師來確保無障礙性、一致性與產品化品質。你可以把 Nano Banana Pro 當成「快速草圖助手」。
Q2：UI mockup 與 Infographic 在 Nano Banana Pro 中有什麼差異？
UI mockup 專注在「介面」──例如導航列、按鈕、卡片、表單等互動元素，看起來像真實產品。Infographic 則專注於「資訊呈現」──時間軸、流程圖、統計圖等。UI mockup 看起來像應用程式；infographic 則像簡報或資料視覺化。
Q3：我的 UI mockup 提示詞需要寫得多詳細？
越清楚越好。建議明確說明平台（桌面、網頁、手機）、框架類型（瀏覽器/ App 視窗）、主要區塊（hero、側邊欄、卡片、圖表）、以及重要文字（標題、按鈕文案）。不需要描述到像素，但必須提供完整結構讓模型能準確渲染。
Q4：我可以重複使用同一個 4-screen mobile UI 提示詞嗎？
可以，而且非常推薦這麼做。好的四畫面流程（如 Onboarding → Home → Detail → Analytics）本質上就是可複用模板，你只需替換 App 名稱、介面元素與文案，就能快速套用到不同專案。
