Using Nano Banana to Create Quick Mockups

1. Introduction

In software product development, creating mockups (draft UI layouts) is an important step to:

• Align ideas between developers, designers, and business teams.
• Help clients visualize the product early in the presales phase.

Traditionally, this requires a designer and tools such as Figma or Adobe XD, which takes time if we only want to illustrate an idea quickly.

Recently, Google Gemini introduced a new experimental feature, codenamed Nano Banana. This feature allows you to generate mockups or visual layouts directly from a natural language prompt.

We will investigate how Nano Banana works, try it with practical prompts, and evaluate how it can be applied for presales or early draft designs.

2. What is Nano Banana?

Nano Banana is the codename for Gemini 2.5 Flash Image Editing/Generation, an AI feature by Google DeepMind.

It allows users to generate and edit images based on text prompts:

• Create visuals from scratch.
• Edit backgrounds, styles, and blend multiple images.
• Maintain consistency of subjects across edits.

In our context, it can be used to generate UI mockups quickly.

👉 Reference: Unleashing the Power of Nano Banana: Prompt Guide and Hands-On Experience

3. How to Use Nano Banana for Mockups

Step 1: Access

• Open the Google Gemini app (latest version with Nano Banana support).
• Or try community demos like the Zenn article.

Step 2: Write a Prompt

Boutique E-commerce App — 4-screen user journey

Prompt:
Create a professional iOS app mockup figure
Show exactly 4 iPhone screens arranged horizontally in a single high-resolution image. The screens show discovery, product detail, cart, and order confirmation for a boutique e-commerce app.

APP SPECIFIC CUSTOMIZATION
Application Core: Curated boutique shopping with editorial content, product stories, and premium checkout.
Primary Features:
1. Discover / Editorial - Curated collections, editorial banners, shoppable images.
2. Product Detail - High-res photos, size guide, reviews, add-to-cart.
3. Cart & Shipping - Cart items, shipping options, gift wrap.
4. Order Confirmation - Order summary, tracking, recommended complementary items.
Visual Theme: Premium minimal (off-white, charcoal, gold accents), elegant typography, large photography.
Target Audience: Style-conscious buyers aged 25-45.
Design Notes: Use full-bleed photography on product page, size selector, recommended items carousel in confirmation screen. Export at 3840×960 px, PNG.
END CUSTOMIZATION

Step 3: Generate the Mockup

Gemini will return a basic mockup layout.

👉 Result:
The generated mockup shows four screens (Discovery, Product Detail, Cart, Order Confirmation). The overall layout matches the request, but the color scheme is not fully aligned with the “premium minimal” theme.

Step 4: Refine the Prompt

Refine the boutique e-commerce app mockup with:
- Four iPhone screens aligned horizontally
- Higher resolution output (3840×960 px, PNG)
- Consistent premium minimal theme: off-white background, charcoal text, gold accent elements, elegant typography
- Screen 1: Discover — editorial banner with curated collections and shoppable images
- Screen 2: Product Detail — full-bleed product photo, size selector, reviews, add-to-cart button
- Screen 3: Cart & Shipping — list of items with thumbnails, shipping options, gift wrap toggle
- Screen 4: Order Confirmation — order summary, delivery tracking, and a carousel of recommended complementary products

👉 Result:
The output is much clearer this time: the four screens are consistent with the off-white + charcoal + gold accents theme. The Discover screen shows an editorial banner, the Product Detail page includes a full-bleed photo, and the Order Confirmation screen contains a carousel of recommended products.

4. Practical Examples

Example 1: Mental Health & Wellness App — 4-screen user journey

Prompt:
Create a professional iOS app mockup figure
Show exactly 4 iPhone screens arranged horizontally in a single high-resolution image. The screens demonstrate onboarding, daily check-in, guided session, and mood analytics for a mental wellness app.

APP SPECIFIC CUSTOMIZATION
Application Core: Mental wellness with daily check-ins, guided meditations, and mood analytics.
Primary Features:
1. Onboarding - Quick mood assessment, preferences, goals.
2. Daily Check-in - Mood slider, short journaling prompt, recommended micro-actions.
3. Guided Session - Audio player for meditation with session length control.
4. Analytics - Mood trends, triggers, recommended exercises.
Visual Theme: Calm muted tones (sage green, soft blue), lots of white space, soothing illustrations.
Target Audience: Adults seeking daily wellbeing support aged 20-55.
Design Notes: Show mood trend chart on analytics screen, audio progress bar for guided session, gentle microcopy. Export at 3840×960 px, PNG.
END CUSTOMIZATION

👉 Result:
Gemini generates four screens correctly (Onboarding, Daily Check-in, Guided Session, Analytics). The mood trend chart and audio progress bar are displayed, with sage green and soft blue as the main tones.

Example 2: Project Management App — 4-screen user journey

Prompt:
Create a professional iOS app mockup figure
Show exactly 4 iPhone screens arranged horizontally in a single high-resolution image. The screens demonstrate task creation, board view, task detail, and timeline for a project management app.

APP SPECIFIC CUSTOMIZATION
Application Core: Lightweight project management with kanban, timeline, and team chat.
Primary Features:
1. Dashboard - Active projects, quick add task, team status.
2. Board View - Columns for To Do / Doing / Done, drag handles, avatars.
3. Task Detail - Description, attachments, subtasks, assignees, comments.
4. Timeline / Gantt - Tasks mapped on a timeline with dependencies.
Visual Theme: Professional cool grays with accent colors per project, clear typography, minimal chrome.
Target Audience: Small teams and freelancers aged 24-50.
Design Notes: Show drag handles and avatars, task priority tags, interactive timeline markers. Export at 3840×960 px, PNG.
END CUSTOMIZATION

👉 Result:
The mockup shows a board view with To Do / Doing / Done columns, complete with avatars and drag handles. The timeline is presented in a simple form, enough to illustrate the project management concept.

Example 3: Language Learning App — 4-screen user journey

Prompt:
Create a professional iOS app mockup figure
Show exactly 4 iPhone screens arranged horizontally in a single high-resolution image. The screens illustrate onboarding, lesson player, practice exercises, and progress dashboard for a language learning app.

APP SPECIFIC CUSTOMIZATION
Application Core: Personalized language learning with micro-lessons, spaced repetition, and AI pronunciation feedback.
Primary Features:
1. Onboarding & Level Test - Quick placement test, goals selection.
2. Lesson Player - Short interactive lesson with audio, text, and replay controls.
3. Practice / Quiz - Flashcards, multiple choice, speaking practice with waveform and scoring.
4. Progress Dashboard - Streak, XP, fluency estimate, recommended next lessons.
Visual Theme: Friendly pastel palette (mint, soft purple), playful icons, clear progress bars.
Target Audience: Learners aged 16-45 learning a second language.
Design Notes: Emphasize audio controls and speaking feedback UI; show streak badges and recommendation chips. Export at 3840×960 px, PNG.
END CUSTOMIZATION

👉 Result:
Gemini outputs four accurate screens: Onboarding, Lesson Player, Practice, and Dashboard. Streak badges, progress bars, and waveform feedback are included as described.

5. Real-World Applications

✅ Presales

• Quickly present ideas to clients without needing polished designs.
• Saves preparation time for proposals and demos.

✅ Internal brainstorming

• Helps teams align on initial UI/UX direction.
• Use as a draft before refining in Figma.

❌ Limitations

• Cannot export directly to design tools or code.
• Results are still rough compared to professional mockups.
• Highly dependent on prompt quality (prompt engineering).

6. Comparison with Traditional Tools

7. Conclusion

Nano Banana (Google Gemini feature) does not replace designers, but it’s an excellent assistant for presales and early drafts.

• If you need quick concepts → Nano Banana is perfect.
• If you need production-ready UI → still use Figma, Sketch, or XD.