generate

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 models for integration into frontend designs.

借助Google的Gemini模型生成自定义图片，用于集成到前端设计中。

Prerequisites

前置条件

Set the

GEMINI_API_KEY

environment variable with your Google AI API key.

设置

GEMINI_API_KEY

环境变量，填入你的Google AI API密钥。

Available Models

可用模型

Model	ID	Best For	Max Resolution
Flash	`gemini-2.5-flash-image`	Speed, high-volume tasks	1024px
Pro	`gemini-3-pro-image-preview`	Professional quality, complex scenes	Up to 4K

模型	ID	最佳适用场景	最大分辨率
Flash	`gemini-2.5-flash-image`	快速生成、高吞吐量任务	1024px
Pro	`gemini-3-pro-image-preview`	专业画质、复杂场景	最高4K

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/generate/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
```
--model
```
(optional): Model to use - "flash" (fast) or "pro" (high-quality) (default: flash)
```
--size
```
(optional): Image resolution for pro model - "1K", "2K", "4K" (default: 1K, ignored for flash)

使用uv运行

scripts/image.py

脚本，该脚本位于技能目录的

skills/generate/scripts/image.py

路径下：

bash

uv run "${SKILL_DIR}/scripts/image.py" \
  --prompt "你的图片描述" \
  --output "/path/to/output.png"

其中

${SKILL_DIR}

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

可选参数：

```
--prompt
```
（必填）：图片的详细描述
```
--output
```
（必填）：输出文件路径（PNG格式）
```
--aspect
```
（可选）：宽高比 - "square"（正方形）、"landscape"（横屏）、"portrait"（竖屏）（默认：正方形）
```
--reference
```
（可选）：参考图片路径，用于指导风格、构图或内容
```
--model
```
（可选）：使用的模型 - "flash"（快速）或"pro"（高质量）（默认：flash）
```
--size
```
（可选）：Pro模型的图像分辨率 - "1K"、"2K"、"4K"（默认：1K，Flash模型忽略此参数）

Using Different Models

使用不同模型

Flash model (default) - Fast generation, good for iterations:

bash

uv run "${SKILL_DIR}/scripts/image.py" \
  --prompt "A minimalist logo design" \
  --output "/path/to/logo.png" \
  --model flash

Pro model - Higher quality for final assets:

bash

uv run "${SKILL_DIR}/scripts/image.py" \
  --prompt "A detailed hero illustration for a tech landing page" \
  --output "/path/to/hero.png" \
  --model pro \
  --size 2K

Flash模型（默认） - 生成速度快，适合迭代：

bash

uv run "${SKILL_DIR}/scripts/image.py" \
  --prompt "极简风格的logo设计" \
  --output "/path/to/logo.png" \
  --model flash

Pro模型 - 画质更高，适合最终资源：

bash

uv run "${SKILL_DIR}/scripts/image.py" \
  --prompt "为科技类落地页制作的详细首屏插画" \
  --output "/path/to/hero.png" \
  --model pro \
  --size 2K

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 "创建类似的抽象图案，使用更暖的色调" \
  --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="描述" class="hero-image" />

React：

jsx

import heroImage from './assets/generated-hero.png';
<img src={heroImage} alt="描述" 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

与前端设计技能的集成

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技能配合使用时：

规划视觉层级：确定生成的图片能在哪些地方提升价值
匹配美学风格：确保提示词与选定的设计方向（brutalist、极简、极繁等）保持一致
先生成图片：在编写前端代码前创建视觉资源
在代码中引用：在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技能构建页面，并引用生成的图片
结果：一个包含定制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