技能 nano-banana-builder
🍌
nano-banana-builder
安全 ⚙️
外部命令🌐
网络访问🔑
环境变量📁
文件系统访问
使用 Gemini Nano Banana 構建網頁應用程式
使用 Google Gemini 創建圖像生成網頁應用程式需要理解對話式 AI 模式、速率限制和儲存策略。此技能為 Next.js 應用程式提供可用於生產環境的程式碼模式,配合 Gemini Nano Banana APIs。
支持: Claude Codex Code(CC)
1
下载技能 ZIP
2
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
3
开启并开始使用
测试它
正在使用“nano-banana-builder”。 使用 gemini-2.5-flash-image 構建 Next.js 圖像生成器
预期结果:
- 使用 @ai-sdk/google 的伺服器動作,配合 responseModalities: ['IMAGE']
- 使用 useChat hook 實現對話式介面的 React 元件
- 配置 GEMINI_API_KEY 的環境設定
- 載入狀態和錯誤處理模式
正在使用“nano-banana-builder”。 創建具有速率限制的圖像庫
预期结果:
- Upstash Redis 速率限制器配置(每分鐘 10 個請求)
- 具有無限滾動的圖庫元件
- 429 速率限制回應的錯誤處理
- 指數退避的重試邏輯
安全审计
安全v5 • 1/16/2026
Documentation-only skill containing TypeScript code examples for building web applications with Google Gemini APIs. All static findings are false positives triggered by documentation patterns. The skill contains no executable code, scripts, or network calls - only markdown documentation and code examples demonstrating legitimate API integration patterns. The previous audit (2026-01-10) already classified this as safe.
4
已扫描文件
1,333
分析行数
4
发现项
5
审计总数
风险因素
⚙️ 外部命令 (96)
references/advanced-patterns.md:9-49 references/advanced-patterns.md:49-55 references/advanced-patterns.md:55-57 references/advanced-patterns.md:57-61 references/advanced-patterns.md:61-101 references/advanced-patterns.md:101-108 references/advanced-patterns.md:108-112 references/advanced-patterns.md:112-134 references/advanced-patterns.md:134-142 references/advanced-patterns.md:142-179 references/advanced-patterns.md:181-187 references/advanced-patterns.md:189-201 references/advanced-patterns.md:201-231 references/advanced-patterns.md:231-235 references/advanced-patterns.md:235-319 references/advanced-patterns.md:319-327 references/advanced-patterns.md:327-353 references/advanced-patterns.md:353-357 references/advanced-patterns.md:357-377 references/advanced-patterns.md:377-381 references/advanced-patterns.md:381-400 references/advanced-patterns.md:400-408 references/advanced-patterns.md:408-434 references/advanced-patterns.md:434-438 references/advanced-patterns.md:438-453 references/configuration.md:9-16 references/configuration.md:16-19 references/configuration.md:19-20 references/configuration.md:20-24 references/configuration.md:24-33 references/configuration.md:33-47 references/configuration.md:47-56 references/configuration.md:56-59 references/configuration.md:59-60 references/configuration.md:60-61 references/configuration.md:61-62 references/configuration.md:62-70 references/configuration.md:70-81 references/configuration.md:81-98 references/configuration.md:98-101 references/configuration.md:101-116 references/configuration.md:116-120 references/configuration.md:120-138 references/configuration.md:138-150 references/configuration.md:150-165 references/configuration.md:165-169 references/configuration.md:169-172 references/configuration.md:172-174 references/configuration.md:174-197 references/configuration.md:197-214 references/configuration.md:214-215 references/configuration.md:215-232 references/configuration.md:232-236 references/configuration.md:236-271 references/configuration.md:271-276 references/configuration.md:276-282 references/configuration.md:282-284 references/configuration.md:284-285 references/configuration.md:285-289 references/configuration.md:289-292 references/configuration.md:292-293 references/configuration.md:293-300 references/configuration.md:300-303 references/configuration.md:303-306 references/configuration.md:306-316 references/configuration.md:316-368 references/configuration.md:368-372 references/configuration.md:372-381 references/configuration.md:381-387 references/configuration.md:387-410 SKILL.md:23 SKILL.md:24 SKILL.md:27 SKILL.md:28 SKILL.md:29 SKILL.md:30 SKILL.md:32 SKILL.md:32 SKILL.md:55 SKILL.md:55 SKILL.md:66 SKILL.md:67 SKILL.md:68 SKILL.md:70 SKILL.md:78-99 SKILL.md:99-103 SKILL.md:103-138 SKILL.md:138-169 SKILL.md:169-170 SKILL.md:170 SKILL.md:170-174 SKILL.md:174 SKILL.md:174-232 SKILL.md:232-248 SKILL.md:248-250 SKILL.md:250-256
🌐 网络访问 (8)
🔑 环境变量 (23)
references/configuration.md:85 references/configuration.md:105 references/configuration.md:126 references/configuration.md:128 references/configuration.md:129 references/configuration.md:141 references/configuration.md:150 references/configuration.md:159 references/configuration.md:85 references/configuration.md:105 references/configuration.md:126 references/configuration.md:128 references/configuration.md:129 references/configuration.md:141 references/configuration.md:150 references/configuration.md:159 references/configuration.md:390 references/configuration.md:390 references/configuration.md:399 skill-report.json:80 skill-report.json:128 SKILL.md:234 SKILL.md:234
📁 文件系统访问 (1)
审计者: claude 查看审计历史 →
质量评分
41
架构
100
可维护性
87
内容
20
社区
100
安全
91
规范符合性
你能构建什么
圖像生成器應用程式
構建使用 Gemini Nano Banana APIs 從文字提示生成圖像的 Next.js 應用程式。
生產環境 API 後端
為圖像生成服務創建具有適當速率限制、儲存和錯誤處理的伺服器端 APIs。
迭代編輯工具
實現多輪圖像編輯體驗,讓使用者透過對話來優化圖像。
试试这些提示
基本生成器
使用 gemini-2.5-flash-image 構建一個 Next.js 圖像生成器,包含伺服器動作和 React 客戶端元件。包含環境設定說明。
迭代編輯器
使用 Next.js 創建迭代式圖像編輯器,允許使用者上傳圖像並使用 gemini-3-pro-image-preview 透過對話描述編輯內容。
全端應用程式
構建完整的全端圖像生成應用程式,具備 Vercel Blob 儲存、Upstash Redis 速率限制,以及生成圖像的圖庫檢視。
批次處理
實現具有進度追蹤、帶重試的錯誤處理的批次圖像生成,並使用 Nano 進行草稿、Pro 進行最終輸出以優化成本。
最佳实践
- 使用 gemini-2.5-flash-image 進行快速迭代,使用 gemini-3-pro-image-preview 輸出高品質最終結果
- 將圖像儲存在物件儲存(Vercel Blob/S3)中,而非資料庫中的 base64 格式
- 在達到 API 配額之前實施速率限制,以避免生產環境中出現 429 錯誤
避免
- 在客戶端程式碼中硬編碼 API 金鑰,而不是使用伺服器動作
- 使用錯誤的模型名稱,如 gemini-2.5-flash-preview-05-20 或 gemini-pro-vision
- 在每次按鍵時生成圖像,而沒有防抖動或使用者確認
常见问题
我應該使用哪個 Gemini 模型來生成圖像?
使用 gemini-2.5-flash-image 以獲得速度和迭代效能,或使用 gemini-3-pro-image-preview 以獲得品質和文字渲染。
如何處理 Gemini APIs 的速率限制?
使用 Upstash Redis 或記憶體計數器實現速率限制。設定合理的請求時間窗口(免費方案為每分鐘 10 個請求)。
我可以將此技能用於其他 AI 提供商嗎?
不可以。此技能專門涵蓋 Google Gemini 圖像生成 APIs。請使用其他技能來處理 OpenAI DALL-E 或 Stability AI。
我的 API 金鑰是否會被儲存或傳輸到任何地方?
不會。此技能僅為文件說明。您的 API 金鑰保留在環境變數中,僅由您的應用程式程式碼使用。
為什麼我會收到 429 錯誤?
您已超過速率限制。實施速率限制、降低請求頻率,或升級您的 Gemini API 方案以獲得更高配額。
如何部署這些應用程式?
部署到 Vercel 以獲得與 Blob 儲存的最佳整合。在您的部署儀表板中配置環境變數。