nano-banana-pro

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Nano Banana Pro - Gemini Image Generation

Nano Banana Pro - Gemini 图像生成

Generate custom images using Google's Gemini 2.5 Flash model for integration into frontend designs.

借助Google的Gemini 2.5 Flash模型生成自定义图片，以便集成到前端设计中。

Prerequisites

前置条件

Set the

GEMINI_API_KEY

environment variable with your Google AI API key.

使用你的Google AI API密钥设置

GEMINI_API_KEY

环境变量。

Image Generation Workflow

图片生成流程

Step 1: Generate the Image

步骤1：生成图片

Use

scripts/image.py

with uv. The script is located in the skill directory at

skills/nano-banana-pro/scripts/image.py

bash

uv run "${SKILL_DIR}/scripts/image.py" \
  --prompt "Your image description" \
  --output "/path/to/output.png"

Where

${SKILL_DIR}

is the directory containing this SKILL.md file.

Options:

```
--prompt
```
(required): Detailed description of the image to generate
```
--output
```
(required): Output file path (PNG format)
```
--aspect
```
(optional): Aspect ratio - "square", "landscape", "portrait" (default: square)
```
--reference
```
(optional): Path to a reference image for style, composition, or content guidance

使用uv运行

scripts/image.py

脚本，该脚本位于Skill目录的

skills/nano-banana-pro/scripts/image.py

路径下：

bash

uv run "${SKILL_DIR}/scripts/image.py" \
  --prompt "Your image description" \
  --output "/path/to/output.png"

其中

${SKILL_DIR}

是包含此SKILL.md文件的目录。

可选参数：

```
--prompt
```
（必填）：图片的详细描述
```
--output
```
（必填）：输出文件路径（PNG格式）
```
--aspect
```
（可选）：宽高比 - "square"（正方形）、"landscape"（横屏）、"portrait"（竖屏）（默认值：square）
```
--reference
```
（可选）：参考图片路径，用于提供风格、构图或内容指导

Using a Reference Image

使用参考图片

To generate an image based on an existing reference:

bash

uv run "${SKILL_DIR}/scripts/image.py" \
  --prompt "Create a similar abstract pattern with warmer colors" \
  --output "/path/to/output.png" \
  --reference "/path/to/reference.png"

The reference image helps Gemini understand the desired style, composition, or visual elements you want in the generated image.

基于现有参考图片生成新图片：

bash

uv run "${SKILL_DIR}/scripts/image.py" \
  --prompt "Create a similar abstract pattern with warmer colors" \
  --output "/path/to/output.png" \
  --reference "/path/to/reference.png"

参考图片可帮助Gemini理解你期望在生成图片中呈现的风格、构图或视觉元素。

Step 2: Integrate with Frontend Design

步骤2：集成到前端设计

After generating images, incorporate them into frontend code:

HTML/CSS:

html

<img src="./generated-hero.png" alt="Description" class="hero-image" />

React:

jsx

import heroImage from './assets/generated-hero.png';
<img src={heroImage} alt="Description" className="hero-image" />

CSS Background:

css

.hero-section {
  background-image: url('./generated-hero.png');
  background-size: cover;
  background-position: center;
}

生成图片后，将其整合到前端代码中：

HTML/CSS：

html

<img src="./generated-hero.png" alt="Description" class="hero-image" />

React：

jsx

import heroImage from './assets/generated-hero.png';
<img src={heroImage} alt="Description" className="hero-image" />

CSS背景图：

css

.hero-section {
  background-image: url('./generated-hero.png');
  background-size: cover;
  background-position: center;
}

Crafting Effective Prompts

撰写有效的提示词

Write detailed, specific prompts for best results:

Good prompt:

A minimalist geometric pattern with overlapping translucent circles in coral, teal, and gold on a deep navy background, suitable for a modern fintech landing page hero section

Avoid vague prompts:

A nice background image

为获得最佳效果，请编写详细、具体的提示词：

优秀示例：

一个极简几何图案，由珊瑚色、蓝绿色和金色的半透明重叠圆形构成，背景为深邃的藏青色，适用于现代金融科技着陆页的首屏区域

避免模糊表述：

一张好看的背景图

Prompt Elements to Include

提示词应包含的元素

Subject: What the image depicts
Style: Artistic style (minimalist, abstract, photorealistic, illustrated)
Colors: Specific color palette matching the design system
Mood: Atmosphere (professional, playful, elegant, bold)
Context: How it will be used (hero image, icon, texture, illustration)
Technical: Aspect ratio needs, transparency requirements

主体：图片所描绘的内容
风格：艺术风格（极简、抽象、写实、插画）
色彩：与设计系统匹配的特定调色板
氛围：整体基调（专业、活泼、优雅、大胆）
使用场景：图片的用途（首屏图、图标、纹理、插画）
技术要求：宽高比需求、透明度要求

Integration with Frontend-Design Skill

与前端设计Skill的集成

When used alongside the frontend-design skill:

Plan the visual hierarchy - Identify where generated images add value
Match the aesthetic - Ensure prompts align with the chosen design direction (brutalist, minimalist, maximalist, etc.)
Generate images first - Create visual assets before coding the frontend
Reference in code - Use relative paths to generated images in your HTML/CSS/React

与frontend-design Skill配合使用时：

规划视觉层级：确定生成图片能提升价值的位置
匹配美学风格：确保提示词与选定的设计方向（粗野主义、极简主义、极繁主义等）保持一致
先生成图片：在编写前端代码前创建视觉资产
在代码中引用：在HTML/CSS/React中使用生成图片的相对路径

Example Workflow

示例流程

User requests a landing page with custom hero imagery
Invoke nano-banana-pro to generate the hero image with a prompt matching the design aesthetic
Invoke frontend-design to build the page, referencing the generated image
Result: A cohesive design with custom AI-generated visuals

用户请求一个带有自定义首屏图的着陆页
调用nano-banana-pro，使用符合设计美学的提示词生成首屏图
调用frontend-design Skill构建页面，并引用生成的图片
结果：一个包含自定义AI生成视觉元素的协调设计

Output Location

输出位置

By default, save generated images to the project's assets directory:

```
./assets/
```
for simple HTML projects
```
./src/assets/
```
or
```
./public/
```
for React/Vue projects

Use descriptive filenames:

hero-abstract-gradient.png

icon-user-avatar.png

默认情况下，将生成的图片保存到项目的资源目录：

简单HTML项目保存至
```
./assets/
```
React/Vue项目保存至
```
./src/assets/
```
或
```
./public/
```

使用描述性文件名：

hero-abstract-gradient.png

、

icon-user-avatar.png