Nano Banana 2 線框轉 UI Mockup 工作流
很多人第一次搜 nanobanana、nanobanana2 或 Nano Banana，並不是為了做電商主圖，而是卡在產品評審前一天：線框還在 Figma 灰模，投資人要看「像真產品」的落地頁截圖；App 功能概念圖風格每週一變，團隊對不上審美；請不起專職 UI 設計師時，Nano Banana 2 正好能補上「線框 → UI mockup」這條流水線。
這篇不講遊戲 RPG HUD 玩法，也不堆無結構的提示詞合集，只講一條可複用的產品介面視覺流程：介面視覺 DNA → 低保真線框母版 → 高保真落地頁 / App 介面概念圖 → 多屏變體。同一套格線、主色與元件氣質，盡量一次鎖定、多輪微調。
為什麼產品 UI Mockup 特別適合 Nano Banana 2？
產品介面概念圖有三個硬需求：結構先於風格、按鈕與導覽要可讀、多屏同 DNA。
- 結構先於風格：評審真正要看的是資訊層級與 CTA 位置，不是霓虹濾鏡。用 Nano Banana 2 先出低保真線框，再升成高保真，比「一句話直接要賽博風落地頁」穩得多。
- 按鈕與導覽要可讀：落地頁 Hero、定價卡、App 底欄一旦亂碼，簡報就翻車。把會改的文案留給後期疊字，畫面與版面交給 Nano Banana 2，返工最少。相關圖內文字技巧也可對照圖內文字本地化。
- 多屏同 DNA：桌面落地頁、手機 App、功能彈層如果像三家產品，品牌感會碎。把主色、圓角、陰影與標題氣質寫進同一套提示詞骨架，nanobanana 出圖更容易一次多尺寸複用。
如果你還在對比 Nano Banana Pro 與 Nano Banana 2 Lite：週更概念圖優先 Nano Banana 2 標準檔——比 Lite 更適合帶清晰導覽與標題安全區的介面稿，又比 Pro 更適合一天連跑十幾張方向稿；最終簡報大螢幕或超清展板再上 Pro。
想先摸「對話式連續改」手感，可順帶看對話式影像編輯指南；本篇專注產品 UI 物料包，不重複 RPG 遊戲 HUD 那條玩法（那條見十大神級玩法）。
一套「線框 → UI Mockup」視覺包長什麼樣？
建議把一次評審／週更拆成四類畫面，而不是「想到哪截到哪」：
| 物料 | 用途 | 建議比例 | 產出目標 |
|---|---|---|---|
| 低保真線框母版 | 對齊資訊架構、評審結構 | 16:9 或 9:16 | 區塊清晰，灰階即可 |
| 落地頁 Hero 高保真 | 簡報、官網概念、廣告素材 | 16:9 | 導覽 + 標題區 + 產品預覽同框 |
| App / 手機介面概念圖 | 功能說明、商店預覽氛圍 | 9:16 或 3:4 | 底欄／頂欄齊全，主 CTA 可讀 |
| 多屏變體（定價 / 設定 / 空狀態） | 補齊故事板 | 與母版同比例 | 只換鉤子，不換 DNA |
真正省時間的關鍵，不是「每個螢幕重新發明審美」，而是：先鎖定介面視覺 DNA，再讓所有線框與高保真繼承同一套 DNA。
流水線 Step 1：先寫「介面視覺 DNA」
打開 text to image 之前，先用五行話把產品介面定住。後面所有 nanobanana 提示詞都套這副骨架：
- 產品類型：SaaS 專案管理、AI 影像工具、本地生活 App、B2B 數據看板……
- 平台與畫幅：桌面落地頁 16:9 / iOS App 9:16——一次只主打一種
- 主色板：高對比主色 + 1 個強調色（如深藍 + 亮琥珀）
- 元件氣質：大圓角卡片 / 細線極簡 / 玻璃擬態——一個系列只選一種
- 情緒鉤子：專業可信、輕快效率、安靜專注——封面優先一種主情緒
示例骨架（可直接改品類與色板）：
一套現代 SaaS 產品介面視覺系統，固定氣質為深藍主色與亮琥珀強調、大圓角白卡片、細陰影與 12 格線對齊，乾淨無襯線標題區留白，情緒為「專業可信」，真實產品介面截圖感，無雜亂貼紙，無浮水印。
把這段存進產品設計筆記。之後無論做線框還是落地頁 Hero，都先貼骨架，再追加當次螢幕鉤子——比每次只寫「高級、賽博、玻璃擬態拉滿」有效得多。
流水線 Step 2：低保真線框母版（先對齊結構）
很多 UI mockup 翻車，不是畫面不夠炫，而是第一張就把風格和文案一起賭。用 Nano Banana 2 先定一張灰階或淺色線框：導覽、Hero、功能三卡、定價區位置固定，之後再升保真。
生成一張橫版 16:9 低保真 SaaS 落地頁線框圖：頂部固定導覽（Logo 占位 + 選單占位 + 主按鈕占位），左側大標題安全區與副文案占位區，右側產品儀表板預覽框占位，下方三欄功能卡片占位，淺灰與白色灰階，細線框，12 格線對齊，無真實亂碼字，無漸層炫光，無浮水印，結構清晰可讀。驗收清單（出圖後 30 秒內過一遍）：
- 縮小到手機寬度，導覽與 Hero 分區是否仍可辨？
- 標題安全區是否夠大，後期疊真實 slogan 不會壓住產品預覽？
- 是否只有結構、沒有搶戲的霓虹背景？
- 與介面 DNA 的格線／卡片氣質是否一致？
若已有手繪草圖或 Figma 匯出，可上傳後改用圖生圖：「按此線框結構生成同版面低保真，僅清理線條與對齊，不改區塊順序。」
流水線 Step 3：升成高保真落地頁 / App 介面
結構過關後，在同一對話裡用對話式編輯升保真，或重新出一張 composition-first 高保真稿。關鍵句式：保持版面結構不變，只升級材質、色板與元件完成度。
基於同一介面視覺 DNA，生成一張橫版 16:9 高保真 SaaS 落地頁 UI mockup：深藍主色與亮琥珀 CTA，大圓角白卡片，頂部清晰導覽，左側大標題安全區留白（不要寫具體亂碼字），右側真實感產品儀表板預覽，下方三欄功能卡，柔和棚拍介面光，像可上線的產品截圖，高對比，無浮水印，無雜亂貼紙。
手機端同理，把比例改成 9:16，並寫明底欄圖示占位、頂部狀態列與主列表區。需要多屏故事時，只換「定價三卡 / 空狀態插畫 / 設定頁開關」等鉤子，主色與圓角不動。
電商與包裝場景若要和介面稿統一品牌色，可把已定 DNA 接到產品包裝視覺包，避免官網截圖與盒面像兩家公司。
一週怎麼排期（獨立產品 / 成長團隊）
| 日子 | 產出 | 鉤子 | 備註 |
|---|---|---|---|
| 週一 | 介面視覺 DNA + 線框母版 | 結構對齊 | 灰階即可，先過評審 |
| 週二 | 落地頁 Hero 高保真 | 主價值主張 | 標題後期疊字 |
| 週三 | App 首頁概念圖 | 核心功能入口 | 9:16 |
| 週四 | 定價 / 功能詳情變體 | 只換區塊鉤子 | 繼承 DNA |
| 週五 | 空狀態 / 設定 / 彈層 | 補故事板 | 保持元件氣質 |
| 週末 | 簡報拼版 | 選 3 張最佳 | 需要 4K 再上 Pro |
常見翻車與避坑
- 一上來就要「完整可上線 UI」：沒有線框階段，模型會亂加區塊。先結構後風格。
- 讓模型寫滿長中文按鈕：複雜文案易糊。安全區留白 + 後期疊字更穩。
- 風格天天變：今天玻璃擬態、明天新擬物，投資人記不住你。鎖 DNA 比追熱點重要。
- 把概念圖當最終產品承諾：Nano Banana 2 出的是視覺探索稿，真實互動與無障礙仍要在設計系統裡落地。
- 忽略版權與品牌標：上傳競品截圖或客戶 Logo 做參考前，先確認授權。
入口怎麼選？
搜 nanobanana / Nano Banana 2 時，你會看到多種入口：Google Gemini、AI Studio，以及本站的線上影像工具。對線框轉 UI mockup 而言，選型可以很簡單：
- 要快速試灰階結構 → Lite 或標準檔短回合
- 要帶清晰導覽與標題安全區的週更概念圖 → Nano Banana 2
- 要簡報大螢幕或印刷展板 → 定稿後再上 Pro
一條可落地的組合拳：Lite 試結構情緒稿 → Nano Banana 2 出線框母版與高保真介面 → 必要時 Pro 放大交稿。
搜 Nano Banana 2 UI mockup 或「線框轉介面」時，缺的不是又能出一張炫圖的模型，而是一條獨立產品團隊也能週更的介面視覺流水線。把產品類型、畫幅、主色、元件氣質與情緒鉤子寫進提示詞骨架，用 Nano Banana 2 分別拿下線框母版、落地頁 Hero 與 App 概念圖，再依螢幕微調比例——這比收藏一百條散亂的 nanobanana 提示詞更管用。