⚡

纳米香蕉构建器Skill nano-banana-builder

构建由谷歌纳米香蕉图像生成API驱动的全栈Web应用程序，从简单的文本到图像生成器到复杂的迭代编辑器，与多轮对话配合使用。

AIGC 0 次安装 0 次浏览 更新于 3/3/2026

name: nano-banana-builder description: > 构建由谷歌双子星的纳米香蕉和纳米香蕉Pro图像生成API驱动的全栈Web应用程序。用于创建Next.js图像生成器、编辑器、画廊， 或任何集成gemini-2.5-flash-image或gemini-3-pro-image-preview模型的Web应用程序。涵盖React组件、服务器操作、API路由、存储、速率限制， 以及生产部署模式。

纳米香蕉构建器

构建由谷歌纳米香蕉图像生成API驱动的生产就绪Web应用程序——从简单的文本到图像生成器到复杂的迭代编辑器， 与多轮对话配合使用。

重要：确切的模型名称

仅使用这些确切的模型字符串。不要发明、猜测或添加日期后缀。

模型字符串（精确使用） 别名 用例
gemini-2.5-flash-image 纳米香蕉 快速迭代、草稿、高容量
gemini-3-pro-image-preview 纳米香蕉Pro 输出质量、文本渲染、2K

常见错误：

  • ❌ gemini-2.5-flash-preview-05-20 — 错误，日期后缀是文本模型专用
  • ❌ gemini-2.5-pro-image — 错误，2.5 Pro不生成图像
  • ❌ gemini-3-flash-image — 错误，不存在
  • ❌ gemini-pro-vision — 错误，那是图像输入，不是生成

唯一有效的图像生成模型是gemini-2.5-flash-image和gemini-3-pro-image-preview。

理念：对话式图像生成

纳米香蕉不仅仅是另一个图像API——它按设计是对话式的。核心观点是图像生成作为对话工作效果最佳，而不是一次性提示。

想象一下与AI艺术总监合作：

  • 迭代细化 → 通过对话构建图像，而不是一次性提示中的完美
  • 上下文感知 → 模型“记住”之前的生成和编辑
  • 自然语言编辑 → 用对话描述更改，而不是参数

构建前，问

  • 主要用途是什么？ 文本到图像生成？图像编辑？多图像组合？风格转换？
  • 哪个模型适合需求？ 纳米香蕉（速度/迭代）或纳米香蕉Pro（质量/复杂提示）？
  • 用户旅程是什么？ 单次生成？迭代细化？画廊浏览？
  • 生产限制是什么？ 速率限制？存储？每张图片的成本？用户量？

核心原则

  1. 对话优于配置：利用纳米香蕉的迭代编辑而不是复杂的参数UI
  2. 模型选择很重要：使用gemini-2.5-flash-image以速度/迭代，gemini-3-pro-image-preview以质量/复杂性
  3. 状态作为对话历史：跟踪生成作为聊天记录，以实现多轮编辑
  4. 速率限制意识：图像生成有严格的配额——实现排队和缓存
  5. 存储策略：存储生成的图像（Vercel Blob/S3），不仅仅是内联base64

模型选择框架

根据用例选择：

用例 模型 为什么
快速迭代、草稿 gemini-2.5-flash-image 快速（2-5秒），每张图片成本更低
最终输出、质量 gemini-3-pro-image-preview 更高的质量，思考，文本渲染
文本密集型图像 gemini-3-pro-image-preview 最佳排版，2K分辨率
多轮编辑 任一 两者都支持对话式编辑
高容量 gemini-2.5-flash-image 成本更低，吞吐量更快

快速开始

基本服务器操作

// app/actions/generate.ts
'use server'

import { google } from '@ai-sdk/google'
import { generateText } from 'ai'

export async function generateImage(prompt: string) {
  const result = await generateText({
    model: google('gemini-2.5-flash-image'),
    prompt,
    providerOptions: {
      google: {
        responseModalities: ['IMAGE'],
        imageConfig: { aspectRatio: '16:9' }
      }
    }
  })

  return result.files[0] // { base64, uint8Array, mediaType }
}

客户端组件与useChat

// app/components/ImageGenerator.tsx
'use client'

import { useChat } from '@ai-sdk/react'

export function ImageGenerator() {
  const { append, messages, isLoading } = useChat({
    api: '/api/generate'
  })

  return (
    <div>
      {messages.map(m => (
        <div key={m.id}>
          {m.parts?.map((part, i) =>
            part.type === 'image' && (
              <img key={i} src={part.url} alt="Generated" />
            )
          )}
        </div>
      ))}

      <button
        disabled={isLoading}
        onClick={() => append({
          role: 'user',
          content: 'A futuristic cityscape at dusk'
        })}
      >
        生成
      </button>
    </div>
  )
}

高级实现

对于包括：

  • 服务器操作与模型选择、存储和错误处理
  • API路由与流式响应
  • 客户端组件与迭代编辑和画廊
  • 高级模式如多图像组合和批量生成

见references/advanced-patterns.md

配置与运维

对于详细的配置和运维问题：

  • 提供商选项（responseModalities、imageConfig、thinkingConfig）
  • 存储策略（Vercel Blob、S3/R2实现）
  • 速率限制（Upstash Redis模式、配额管理）
  • 成本优化策略

见references/configuration.md

避免的反模式

❌ 发明模型名称或添加日期后缀： 为什么错误：图像生成模型有特定名称；日期后缀如-preview-05-20仅用于文本模型 更好：精确使用gemini-2.5-flash-image或gemini-3-pro-image-preview——无变化

❌ 使用Gemini 2.5 Pro生成图像： 为什么错误：Gemini 2.5 Pro不直接生成图像 更好：使用gemini-2.5-flash-image或gemini-3-pro-image-preview

❌ 仅在数据库中存储base64： 为什么错误：Blobs数据库，昂贵的存储，慢速检索 更好：在对象存储中存储（Vercel Blob/S3），仅保存URL

❌ 没有速率限制处理： 为什么错误：在生产中会碰到429错误，用户体验差 更好：实现速率限制，并提供用户友好的错误消息

❌ 忽略多轮上下文： 为什么错误：浪费纳米香蕉的对话式编辑优势 更好：跟踪聊天记录以进行迭代细化

❌ 在客户端硬编码API密钥： 为什么错误：暴露凭证，安全风险 更好：使用服务器操作/API路由与环境变量

❌ 使用错误的纵横比： 为什么错误：21:9在1:1请求上浪费令牌，意外裁剪 更好：将纵横比与预期用例匹配

❌ 没有加载状态： 为什么错误：图像生成需要5-30秒，用户认为它坏了 更好：显示进度指示器和预计等待时间

❌ 每次按键都生成： 为什么错误：浪费配额，响应慢 更好：防抖提示，需要明确操作

变体指导

重要：每个应用程序都应该为其特定目的独特设计。

在维度上变化：

  • UI风格：最小化、残酷、有趣、专业、黑暗、光明
  • 色彩方案：温暖、凉爽、单色、生动、柔和
  • 布局：单页、多步骤向导、侧边栏、网格、列表
  • 交互：点击生成、拖放、实时打字、批量

避免过度使用的模式：

  • ❌ 默认Tailwind紫色渐变
  • ❌ 通用"AI创业"美学
  • ❌ 每个项目相同的组件库
  • ❌ 未经思考的Inter/Roboto字体

上下文应驱动设计：

  • 梗图生成器 → 粗体，有趣，随意
  • 产品原型工具 → 干净，专业，基于网格
  • 艺术探索 → 画廊优先，视觉重
  • 品牌资产创建器 → 精致，模板引导

环境设置

# .env.local
GEMINI_API_KEY=your_api_key_here

# For Vercel Blob storage
BLOB_READ_WRITE_TOKEN=your_vercel_token

# For S3 (optional)
S3_BUCKET=your-bucket
S3_ENDPOINT=https://your-endpoint.r2.cloudflarestorage.com
S3_ACCESS_KEY_ID=your_key
S3_SECRET_ACCESS_KEY=your_secret

# For Upstash rate limiting (optional)
UPSTASH_REDIS_REST_URL=your_url
UPSTASH_REDIS_REST_TOKEN=your_token

# Install dependencies
npm install @ai-sdk/google ai @ai-sdk/react @vercel/blob

# Or if using separate packages
npm install google-genai

记住

纳米香蕉实现了对话式图像生成，感觉就像与创意伙伴合作，而不是工具。

最好的应用程序：

  • 利用多轮编辑进行细化
  • 有意识地选择模型（速度vs质量）
  • 优雅地处理速率限制
  • 高效存储图像
  • 提供出色的加载状态
  • 为它们的目的独特设计

你不仅仅是在构建一个图像生成器——你在创造一个创意体验。深思熟虑地设计它。