Nano Banana驱动的UI设计

我使用这个 AI 工具的 5 个最喜欢的案例

Nano Banana Pro（Gemini 3 图像模型）在 UI 设计方面特别强大，因为它具有 99% 的文本准确度、理解空间布局的能力以及支持 高分辨率 4K 输出。

在这篇文章中，我想分享我使用这个模型进行 UI 设计任务的 5 个最喜欢案例。（快速说明：在这篇文章中，我不会深入批判 AI 生成的输出，让你自己决定是否喜欢）

1、使用特定视觉风格创建 UI

这是探索工具如何帮助我们构思和探索视觉概念的好机会。我将使用工具为 SaaS 仪表板创建现代的玻璃外观 UI。

提示词示例

设计一个用于 SaaS 分析仪表板的高保真桌面 UI。
风格：带有磨砂玻璃卡片的现代玻璃态，背景为深海军蓝和紫色网格渐变。
布局：左侧带有图标的侧边栏和主要内容区域，包含 3 个独特的 KPI 卡片。使用干净的白色无衬线字体渲染标题"月度增长"和"24% 增长"标签。
4K 分辨率，16:9 纵横比。

Nano Banana 生成的输出

2、产品居中的 UI

通常，我们需要在页面/屏幕上显示特定产品。对于我的示例，我将在移动端 UI 中展示豪华手表。为此，我将上传照片并要求 AI 为我生成设计。

我将附加手表的图像：

提示词示例

为豪华手表商店创建一个移动应用 UI。
将上传图像中的手表放在带有柔焦大理石背景的居中产品卡片中。在下方，添加一个金色的"立即购买"按钮和一个白色的"添加到购物车"按钮。使用极简主义的高端编辑美学，具有充足的留白。

Nano Banana 生成的输出

3、草图转高保真原型

将餐巾纸上的草图转换为高保真原型从未如此简单。您可以将手绘的餐巾纸草图上传到 Nano Banana，让它转换为原型。虽然只需附加参考草图并要求工具将其转换为原型就能获得还可以的结果，但您可以通过提供基本的设计上下文获得出色的输出，这正是我在提示词中要做的。

提示词示例

将此线框草图转换为可持续咖啡品牌的专业、高保真着陆页。
使用大地色调、有机形状和简洁的"Inter"字体样式。
用人们在阳光充足的厨房里喝咖啡的高质量生活方式照片替换我手绘的圆圈。

AI 生成的输出

4、复杂数据可视化

可以雇佣 Nano Banana 生成复杂的 UI，例如财务仪表板。在我的示例中，我将让工具为金融数据生成 Bloomberg 风格的仪表板。

提示词示例

创建一个可视化前 5 大科技公司实时股市数据的桌面 UI 面板。
使用 Google 搜索以确保徽标和当前公司名称准确。
布局：右侧有一个垂直列表，中间有一个大型蜡烛图。
使用"Bloomberg 风格"的专业深色界面，带有绿色和红色数据高亮。

AI 生成的输出

5、灵感 / 情绪板

最后，可以使用 Nano Banana 生成 UI 以获取灵感。只要你知道想看到什么风格，就可以提示工具将其可视化。

提示词示例

为音乐流媒体网站生成"Cyber-Y2K" 1990 年代美学的 UI 概念。
在深灰色背景上使用霓虹酸橙绿色文本，像素化边框和受"Windows 95"启发的按钮。
在顶部使用粗体、失真的数字字体渲染文本"GEN-Z RADIO"。

Nano Banana 生成的输出

原文链接：UI Design with Nano Banana Pro

汇智网翻译整理，转载请标明出处