nano-banana-pro

Nano Banana Pro - Gemini 图像生成

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

前置条件

设置 GEMINI_API_KEY 环境变量，并填入你的 Google AI API 密钥。

图像生成工作流

步骤 1：生成图像

使用 uv 运行 scripts/image.py。该脚本位于技能目录 skills/nano-banana-pro/scripts/image.py 中：

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（可选）：参考图像的路径，用于提供风格、构图或内容方面的指导

使用参考图像

要基于现有参考图像生成图像：

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 理解你希望生成的图像所采用的风格、构图或视觉元素。

步骤 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-pro，根据符合设计美学的提示词生成主视觉图像
3. 调用 frontend-design 构建页面，并引用生成的图像
4. 结果：设计协调统一，并包含 AI 生成的自定义视觉素材

输出位置

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

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