16 Sep’ 25

【網站知識】圖像AI新星!Nano Banana 席捲設計圈,網頁設計的3大實用方式一次看

【網站知識】圖像 AI 新星!Nano banana 席捲設計圈,網頁設計的3大實用方式一次看

你試過nano banana了嗎?他可以生成驚人的3D公仔!

您試過近期最熱門的 nano banana 生成公仔了嗎?圖片來源:Google AI 生成


圖片的公仔想必許多讀者都能在社群平台上看見,而令人驚艷的是,他是透過 AI 所生成的。近兩年生成式AI技術突飛猛進,都在改變我們工作與創作的方式。然而這個月有一個全新名字開始在社群上竄紅,那就是 Nano Banana。這不是一種水果品牌,而是一款定位在「設計與創意輔助」的新型 AI 工具。本文將帶您快速了解 Nano Banana 的特色、以及從網頁設計的角度上如何實際運用。


文章目錄


  • 不是新水果!Nano Banana 是什麼?
  • 【2025最新】設計師全新的秘密武器!Nano Banana 實戰應用案例
  • 香蕉浪潮之後,生成式 AI 下一步的趨勢會在哪?

不是新水果!Nano Banana 是什麼?


由 Google 開發,Nano Banana 是一款專注於圖像生成的生成式 AI 模型,他幫助創作者在「圖像+資料視覺化」上加速,能夠在幾分鐘內生成 2D 插圖與 3D 模型,這對設計師與行銷人員來說,這意味者從提案、草稿到客製化都能更快速完成。也因為在圖像生成的亮點,Nano Banana 被視為 Open AI 的新對手,因為它補足了 OpenAI 在圖像應用上的不足。


【2025最新】設計師全新利器!Nano Banana 實際運用案例


在圖像生成 AI 快速演進的浪潮中,Nano Banana 以其優異的影像處理能力脫穎而出。其主要的三大特色為 – 照片置換、多圖合成、可連續對話編輯,讓它在創意發想與設計上展現出極高的靈活性。除了目前最社群上火紅的 3D 模型生成之外,我們也從網頁設計的角度來看他如何運用,以下是我們整理出的運用:


3D 公仔模型


中文提示詞:


根據照片,生成一個  1/7 比例公仔模型,風格為寫實,擺放在設計師的電腦桌上。公仔底座為 透明壓克力圓盤,無任何文字。電腦螢幕顯示該公仔在 ZBrush 建模中的畫面,螢幕旁有一個設計完成的公仔包裝盒,盒子採 圓角設計+透明視窗,清晰展示內部的公仔。

英文提示詞:


Create a 1/7 scale commercialized figurine of the characters in the picture, in a realistic style, in a real environment. The figurine is placed on a computer desk. The figurine has a round transparent acrylic base, with no text on the base. The content on the computer screen is the Zbrush modeling process of this figurine. Next to the computer screen is a packaging box with rounded corner design and a transparent front window, the figure inside is clearly visible.

網頁 UI 設計


由nano banana生成的網頁UI設計

在 UI 生成上banana的效果十分精準,但在語言上英文會是最好的,很適合做網頁或APP的demo。

圖片來源:Google AI 生成


中文提示詞:


請生成極簡清爽風格的UI設計,語言是英文,UI應用於健身習慣紀錄APP,目標客群為健身新手,主要目標是協助新手培養與紀錄健身習慣畫面淺綠底、留白感強,聚焦於健身紀錄與資訊。並讓畫面呈現在iPhone(或任一裝置上)。

英文提示詞:


Generate a UI design in a minimalist and clean style, with the interface language set to English. The design is for a fitness habit app, targeting beginner users whose main goal is to build and track workout habits. The screen should feature a light green background with strong use of white space, focusing on workout records and fitness information. Display the final design as if it were shown on an iPhone screen.

產品 mockup


由nano banana 生成的網頁mock up

除了產品包裝之外,banana所呈現的網站 mock up 效果十分突出,甚至也能一口氣合成不同螢幕尺寸。

圖片來源:Google AI 生成


中文提示詞:


生成一個真實感的 網站設計 Mockup,畫面同時呈現在 桌上型電腦螢幕 與 手機螢幕 上。Mockup 需清楚展示 響應式版面,表現同一個網頁在不同裝置上的適應方式。整體風格請保持 乾淨、現代化,桌機版本顯示於 大尺寸電腦螢幕,手機版本則顯示於 智慧型手機,並排呈現。重點需凸顯 視覺一致性、字體排版與介面元素 在多平台間的對應。

英文提示詞:


Generate a realistic mockup of a website design displayed on both a desktop monitor and a mobile phone screen. The mockup should clearly showcase the responsive layout, demonstrating how the same webpage adapts across different devices. Use a clean and modern style, with the desktop version shown on a large computer screen and the mobile version displayed on a smartphone placed beside it. Focus on highlighting the visual consistency, typography, and user interface elements across both platforms.

產品資訊圖


由nano banana生成的產品圖表

相較於其他模型,banana 能夠生產出產品剖面圖,若能搭配產品技術文件與3D模型,成品會更加細緻。

圖片來源:Google AI 生成


中文提示詞:


請根據這一台發電機圖片,生成一張 3D 剖面示意圖,完整呈現零件的內部結構。各零件需 依序拆解排列,並加上 清晰的英文標籤,標示其結構與功能。整體設計需兼具 專業性與科技感,版面清晰有條理,適合用於技術展示。

英文提示詞:


Referring to the accompanying diagram, a 3D cross-sectional design was created to depict the mechanical parts, meticulously depicting their internal structure with high fidelity. Each component was disassembled and arranged in sequence, with clear English labels indicating its structure and function. The overall layout combines professionalism with visual logic, resulting in a clear, organized, and technologically advanced analytical diagram

香蕉熱潮之後,AI 生成的下一步趨勢在哪?


隨者科技進步,不同產業或工作任務開始出現專屬的 AI 工具,從設計到醫療、從教育到製造都有。例如對網頁設計產業來說,透過 AI 不只能夠生成網站文案,也能直接協助「生成整個網站雛形」。未來影片生成、網頁設計、甚至是品牌企劃,相關專屬的 AI 工具都會如雨後春筍般的出現,我們認為這個熱潮不會退燒,而是將成為新世代設計工作趨勢。


香蕉熱潮之後,生成式AI的下一步在哪?

不同工作場域的專屬 AI 工具可能會接下來的趨勢。圖片來源:Google AI 生成


您好
有什麼問題需要我協助嗎?

請問創造力提供哪些網頁設計服務?

請問網站設計大約花多久完成?

創造力網站設計的優勢

我想聯絡業務人員