Unlock Stunning UI Designs with Google’s Nano Banana AI: 3 Practical Prompts

Google Nano Banana is the code name for Google’s latest image generation and editing model Gemini 2.5 Flash Image, representing a major upgrade in visual creation capabilities. The model supports advanced natural‑language image editing, character consistency, and easy style transfer.

I had the chance to try Nano Banana and share three useful prompts for everyday design tasks; the model can be accessed for free in Google AI Studio.

Quick Tips:

Getting great results from Nano Banana requires clear context, defined constraints, and a specified output format—think of it as briefing a junior designer: the more detail you provide, the better the outcome.

1. Ideation & Brainstorming

Use these prompts early in a project to quickly explore different concepts.

UI Concept Generation (Template)

为 [产品或功能] 在 [平台，例如 iOS、网页、智能显示屏] 上生成 [数量] 个不同的 UI 概念。
目标受众是 [用户画像描述]。
主要目标是 [关键用户操作]。
重点关注以下主题或风格：
1. [风格 1，例如：极简主义 & 清洁]
2. [风格 2，例如：数据丰富 & 专业]
3. [风格 3，例如：有趣 & 游戏化]
为每个概念提供布局、关键组件以及整体用户体验理由的简要描述。

Example

为 Android 设备上的个人理财应用的仪表盘生成 3 个不同的 UI 概念。
目标受众是刚接触预算的大学生。
主要目标是帮助他们快速查看支出概览。
重点关注以下主题或风格：
1. 极简主义 & 清洁
2. 数据丰富 & 专业
3. 有趣 & 游戏化
为每个概念提供布局、关键组件以及整体用户体验理由的简要描述。

Below is one of the three UI concepts Nano Banana generated – a minimalist & clean example. I omitted the brief textual description to let you evaluate the visual quality.

2. Wireframes & Layout Structures

These prompts quickly generate structured ideas for specific screens or components.

Low‑Fidelity Wireframe Structure (Template)

Quick Tips:

For this prompt I used Markdown format, but I tried both Markdown and plain text without noticing a big difference.

为 [产品类型] 应用的 [屏幕名称] 创建一个低保真线框图。平台是 [平台]。
- **主要目标：** [屏幕的主要目标]
- **关键信息/元素包括：**
  - [元素 1，例如：用户头像]
  - [元素 2，例如：搜索栏]
  - [元素 3，例如：带缩略图的项目列表]
  - [主要 CTA，例如：“加入购物车”按钮]
- **用户上下文：** [用户到达此处时可能的想法或行为]
- **约束条件：** [任何约束条件，例如：“将搜索栏优先放在顶部”，“这必须是一个单页滚动页面”]
标注线框图的信息层级和元素放置（例如：“页眉包含……”，“主要内容区域是一个两列网格……”）。

Example

为酒店预订网站的“搜索结果”页面创建一个低保真线框图。平台是桌面网页。
- **主要目标：** 帮助用户轻松扫描和比较酒店选项。
- **关键信息/元素包括：**
  - 排序 & 筛选选项
  - 交互式地图视图
  - 酒店卡片列表（带图片、价格、评分、关键设施）
  - 主要 CTA：“查看优惠”按钮，每个卡片上都有
- **用户上下文：** 用户刚刚输入了目的地和日期，现在想找到性价比最高的酒店。
- **约束条件：** 筛选选项必须始终显示在屏幕左侧。
标注线框图的信息层级和元素放置。

3. Component Design & Systematization

These prompts help you think about individual UI components and their various states.

UI Component State Analysis (Template)

生成一个 [保真度级别，例如：详细 UI 组件，线框图表示]，用于 [UI 组件例如：切换开关、多选下拉菜单、视频播放器控制栏] 的 [特定状态例如：活动状态、错误状态、禁用状态]。
- **产品上下文：** [该组件的使用位置，例如：SaaS 仪表盘、电子商务结账表单]
- **设计系统/风格：** [例如：Material Design、Apple HIG、平面设计、新拟物主义]
- **关键视觉元素：** [描述重要图标、颜色、文本或形状]
- **交互提示（对于活动状态）：** [处于此状态时会发生什么，例如：“显示加载旋转器”，“展开以显示选项”]

Example

生成一个详细 UI 组件，用于“多选下拉菜单”处于活动（打开）状态。
- **产品上下文：** 项目管理工具的任务分配模态框。
- **设计系统/风格：** 清洁、专业，使用极简主义美学，带有微妙的阴影。
- **关键视觉元素：** 输入字段显示为小标签的选定项目、带有复选框的下拉列表以及滚动条。
- **交互提示：** 下拉菜单应清楚显示当前选定的项目。

Prompt Tips

Be Specific : Instead of “design a login screen,” say “design a login screen for a mobile banking app that supports biometric login and includes a ‘Forgot Password’ button.”

Provide Visual References : Supplying current UI designs or style attributes helps Nano Banana generate outputs that match your brand, such as specifying brand colors in the prompt.

Iterate Repeatedly : Treat the first response as a starting point. Refine the prompt with more details to get closer to your needs, e.g., “This is a good start. Now make concept #2 more data‑dense for power users.”

Set Constraints : Constraints are your friend. Specify character limits, target platforms, or design systems (e.g., Material Design) to obtain more focused results.