generate

Nano Banana - Gemini 图像生成

使用 Google 的 Gemini 模型生成自定义图像，以集成到前端设计中。

前提条件

此技能需要 GEMINI_API_KEY。对于任何需要此密钥的任务，必须确保密钥可用。

首先，检查环境中是否已设置密钥：

echo "${GEMINI_API_KEY:+SET (length: ${#GEMINI_API_KEY})}" || echo "NOT SET"

如果已设置，请直接使用现有密钥。已有密钥优先。请勿从 .env 覆盖它。

如果未设置，请尝试从项目的 .env 文件加载。请在项目根目录（用户的工作目录，而非技能目录）运行以下 EXACT 命令：

LINE=$(grep '^GEMINI_API_KEY=' .env 2>/dev/null) && export "$LINE" && echo "SET (length: ${#GEMINI_API_KEY})" || echo "NOT SET"

如果完成以上两项检查后仍未设置密钥，请告知用户并停止。

重要安全规则：

• 从项目根目录运行——请勿先 cd 到技能目录
• 请严格按上述内容运行命令——不要替换路径或添加标志
• 切勿在没有参数的情况下运行裸 export（这会转储所有环境变量，包括密钥）
• 切勿将 cat .env 的输出通过管道传给 export（如果 grep 返回空内容，export $() 会泄露所有环境变量）
• 切勿尝试读取、回显、打印或以其他方式传输 API 密钥或任何机密
• 如果完成以上两项检查后仍未设置密钥，请告知用户并停止
• 切勿尝试其他加载方法

可用模型

模型	标志	ID	最适合	最高分辨率
Flash (Nano Banana)	flash	gemini-2.5-flash-image	速度、大批量任务	1024px
Pro (Nano Banana Pro)	pro	gemini-3-pro-image-preview	专业品质、复杂场景	最高 4K
2 (Nano Banana 2)	2	gemini-3.1-flash-image-preview	快速、高分辨率、综合表现最佳	最高 4K

图像生成工作流

步骤 1：生成图像

使用 uv 运行 scripts/image.py。该脚本位于技能目录中的 skills/generate/scripts/image.py：

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

其中 ${SKILL_DIR} 是包含此 SKILL.md 文件的目录。

--output 中的文件扩展名会自动替换为模型返回的格式（Pro 和 Nano Banana 2 通常返回 .jpg，Flash 通常返回 .png，但最终由 API 决定）。请查看脚本打印的路径（“Image saved to: …”），以确定代码中应引用的最终文件名。

选项：

• --prompt（必需）：要生成的图像的详细描述
• --output（必需）：输出文件路径。扩展名会替换为模型返回的格式。
• --aspect（可选）：命名快捷方式（square、landscape、portrait）或直接使用比例（1:1、1:4、1:8、2:3、3:2、3:4、4:1、4:3、4:5、5:4、8:1、9:16、16:9、21:9）。默认值：square
• --reference（可选，可重复）：用于指导风格、构图或内容的参考图像路径。可多次指定，以提供多张参考图像。
• --model（可选）：要使用的模型——flash（快速）、pro（高品质）或 2（Nano Banana 2，快速且高分辨率）。默认值：2
• --size（可选）：适用于 pro/2 模型的图像分辨率——512（仅限 2）、1K、2K、4K。默认值：1K。对 flash 无效。

各模型支持的宽高比

比例	Flash	Pro	2
1:1、2:3、3:2、3:4、4:3、4:5、5:4、9:16、16:9、21:9	是	是	是
1:4、1:8、4:1、8:1	否	否	是

使用不同模型

Flash 模型 - 生成速度快，适合迭代：

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

Pro 模型 - 品质更高，适合最终素材：

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

Nano Banana 2（默认） - 生成速度快，支持高分辨率输出和更多宽高比：

uv run "${SKILL_DIR}/scripts/image.py" \
  --prompt "A vibrant infographic about photosynthesis" \
  --output "/path/to/infographic.png" \
  --model 2 \
  --size 2K \
  --aspect 16:9

使用参考图像

根据现有参考图像生成图像：

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"

使用多张参考图像（例如，融合多个来源的风格）：

uv run "${SKILL_DIR}/scripts/image.py" \
  --prompt "Combine the color palette of the first image with the composition of the second" \
  --output "/path/to/output.png" \
  --reference "/path/to/style-ref.png" \
  --reference "/path/to/composition-ref.png"

参考图像有助于 Gemini 理解你希望生成的图像采用何种风格、构图或视觉元素。提供多张参考图像时，所有图像都会一起发送给模型。

参考图像数量限制：

• Flash：最多 3 张参考图像
• Pro：最多 6 张物体图像 + 5 张角色图像（共 14 张）
• 2：最多 10 张物体图像 + 4 张角色图像（共 14 张）

第 2 步：集成到前端设计中

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

HTML/CSS：

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

React：

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

CSS 背景：

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

编写有效的提示词

编写详细、具体的提示词，以获得最佳结果：

好的提示词：

深海军蓝背景上的极简几何图案，由珊瑚色、青绿色和金色的半透明圆形交叠构成，适合用作现代金融科技落地页的主视觉区域

避免使用含糊的提示词：

一张好看的背景图

提示词应包含的要素

1. 主体：图像描绘的内容
2. 风格：艺术风格（极简、抽象、照片级真实、插画）
3. 颜色：与设计系统匹配的具体配色方案
4. 氛围：整体感觉（专业、活泼、优雅、大胆）
5. 用途：图像的使用场景（主视觉图、图标、纹理、插画）
6. 技术要求：宽高比要求、透明度要求

与 Frontend-Design 技能集成

与 frontend-design 技能配合使用时：

1. 规划视觉层级 - 确定生成的图像在哪些位置能发挥作用
2. 匹配美学风格 - 确保提示词符合选定的设计方向（粗野主义、极简主义、极繁主义等）
3. 优先生成图像 - 在编写前端代码之前创建视觉素材
4. 在代码中引用 - 在 HTML/CSS/React 中使用生成图像的相对路径

工作流示例

1. 用户请求制作一个带有定制主视觉图像的落地页
2. 调用 nano-banana，根据符合设计美学的提示词生成主视觉图像
3. 调用 frontend-design 构建页面，并引用生成的图像
4. 结果：设计风格统一，并采用定制的 AI 生成视觉素材

输出位置

默认情况下，将生成的图像保存到项目的素材目录：

• 简单 HTML 项目使用 ./assets/
• React/Vue 项目使用 ./src/assets/ 或 ./public/
• 使用描述性文件名：hero-abstract-gradient.png、icon-user-avatar.png