Back to Details

gemini-nano-banana

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Gemini Nano Banana Skill

Gemini Nano Banana Skill

Overview

概述

Claude can use Gemini's Nano Banana feature (via gemini.google.com) to generate images, logos, icons, and visual assets. This is the primary tool for creating development assets, UI mockups, and graphic design elements.
Claude可借助Gemini的Nano Banana功能（通过gemini.google.com）生成图片、标志、图标及视觉资产。这是创建开发资产、UI原型和平面设计元素的主要工具。

Quick Install

快速安装

bash
curl -sSL https://canifi.com/skills/gemini-nano-banana/install.sh | bash
Or manually:
bash
cp -r skills/gemini-nano-banana ~/.canifi/skills/
bash
curl -sSL https://canifi.com/skills/gemini-nano-banana/install.sh | bash
或手动安装：
bash
cp -r skills/gemini-nano-banana ~/.canifi/skills/

Setup

配置设置

Configure via canifi-env:
bash
undefined
通过canifi-env进行配置：
bash
undefined

First, ensure canifi-env is installed:

首先，确保已安装canifi-env：

curl -sSL https://canifi.com/install.sh | bash

curl -sSL https://canifi.com/install.sh | bash

canifi-env set GOOGLE_EMAIL "your-email@gmail.com"
undefined
canifi-env set GOOGLE_EMAIL "your-email@gmail.com"
undefined

Privacy & Authentication

隐私与认证

Your credentials, your choice. Canifi LifeOS respects your privacy.
你的凭证，由你掌控。Canifi LifeOS尊重你的隐私。

Option 1: Manual Browser Login (Recommended)

选项1：手动浏览器登录（推荐）

If you prefer not to share credentials with Claude Code:
  1. Complete the Browser Automation Setup using CDP mode
  2. Login to the service manually in the Playwright-controlled Chrome window
  3. Claude will use your authenticated session without ever seeing your password
如果你不想与Claude Code共享凭证：
  1. 使用CDP模式完成浏览器自动化设置
  2. 在Playwright控制的Chrome窗口中手动登录该服务
  3. Claude将使用你的已认证会话，且全程不会获取你的密码

Option 2: Environment Variables

选项2：环境变量

If you're comfortable sharing credentials, you can store them locally:
bash
canifi-env set SERVICE_EMAIL "your-email"
canifi-env set SERVICE_PASSWORD "your-password"
Note: Credentials stored in canifi-env are only accessible locally on your machine and are never transmitted.
如果你愿意共享凭证，可将其存储在本地：
bash
canifi-env set SERVICE_EMAIL "your-email"
canifi-env set SERVICE_PASSWORD "your-password"
注意：存储在canifi-env中的凭证仅可在你的本地设备访问，绝不会被传输至外部。

Capabilities

功能特性

  • Generate logos and brand assets
  • Create UI mockups and wireframes
  • Design icons and graphics
  • Produce illustrations
  • Generate concept art
  • Create marketing visuals
  • Design social media graphics
  • Generate avatars and characters
  • Create infographics layouts
  • Produce presentation visuals
  • 生成标志及品牌资产
  • 创建UI原型和线框图
  • 设计图标和图形
  • 制作插画
  • 生成概念艺术图
  • 创建营销视觉素材
  • 设计社交媒体图形
  • 生成头像和角色
  • 创建信息图表布局
  • 制作演示文稿视觉素材

Usage Examples

使用示例

Example 1: Create Logo

示例1：创建标志

User: "Create a logo for my app called 'TaskFlow'"
Claude: Opens Gemini, requests image generation:
        "Create a modern, minimalist logo for an app called TaskFlow.
        Use flowing lines and blue/green gradient colors."
        Downloads and provides the generated logo.
用户："为我的应用'TaskFlow'创建一个标志"
Claude：打开Gemini，请求图像生成：
        "为名为TaskFlow的应用创建一个现代简约风格的标志。
        使用流畅线条和蓝绿渐变配色。"
        下载并提供生成的标志。

Example 2: UI Mockup

示例2：UI原型

User: "Generate a dashboard mockup for my fitness app"
Claude: Generates image with prompt:
        "Modern mobile app dashboard mockup for fitness tracking.
        Shows daily steps, calories, workout progress. Clean UI."
        Returns generated mockup image.
用户："为我的健身应用生成一个仪表盘原型"
Claude：使用以下提示生成图像：
        "用于健身追踪的现代移动应用仪表盘原型。
        展示每日步数、卡路里消耗、锻炼进度。界面简洁。"
        返回生成的原型图像。

Example 3: Icon Set

示例3：图标集

User: "Create icons for home, settings, and profile"
Claude: Generates each icon with consistent style:
        "Minimalist outline icon for [purpose], consistent style,
        suitable for mobile app navigation."
        Provides set of generated icons.
用户："创建主页、设置和个人资料的图标"
Claude：生成风格统一的各个图标：
        "用于[用途]的简约轮廓图标，风格统一，
        适用于移动应用导航栏。"
        提供生成的图标集。

Example 4: Marketing Graphic

示例4：营销图形

User: "Make a social media banner for our product launch"
Claude: Generates banner with dimensions and style:
        "Social media banner 1200x628px for product launch.
        Modern design with product showcase, exciting colors."
用户："为我们的产品发布制作一个社交媒体横幅"
Claude：生成指定尺寸和风格的横幅：
        "用于产品发布的1200x628px社交媒体横幅。
        采用现代设计，展示产品，配色醒目。"

Authentication Flow

认证流程

  1. Claude navigates to gemini.google.com via Playwright MCP
  2. Authenticates with GOOGLE_EMAIL if needed
  3. Handles 2FA if prompted (notifies user via iMessage)
  4. Accesses image generation feature
  1. Claude通过Playwright MCP访问gemini.google.com
  2. 如有需要，使用GOOGLE_EMAIL进行认证
  3. 若提示二次验证，将通过iMessage通知用户
  4. 访问图像生成功能

Image Generation Process

图像生成流程

1. Navigate to gemini.google.com
2. Enter image generation prompt
3. Wait for generation (typically 10-30 seconds)
4. Review generated options
5. Download preferred image(s)
6. Provide to user or save to project
1. 访问gemini.google.com
2. 输入图像生成提示词
3. 等待生成完成（通常10-30秒）
4. 查看生成的多个选项
5. 下载首选图像
6. 提供给用户或保存至项目目录

Selectors Reference

选择器参考

javascript
// Chat input
'[aria-label="Enter a prompt here"]' or 'rich-textarea'

// Submit button
'[aria-label="Send message"]'

// Generated images
'.generated-image' or 'img[alt*="Generated"]'

// Download button
'[aria-label="Download"]'

// Regenerate button
'[aria-label="Regenerate"]'

// Image options
'.image-option'

// Response container
'.model-response'
javascript
// 聊天输入框
'[aria-label="Enter a prompt here"]' or 'rich-textarea'

// 提交按钮
'[aria-label="Send message"]'

// 生成的图像
'.generated-image' or 'img[alt*="Generated"]'

// 下载按钮
'[aria-label="Download"]'

// 重新生成按钮
'[aria-label="Regenerate"]'

// 图像选项
'.image-option'

// 响应容器
'.model-response'

Prompt Best Practices

提示词最佳实践

Logo Prompts:
- Specify style: minimalist, vintage, modern, playful
- Define colors: "blue and white", "gradient from X to Y"
- Mention use case: "for tech startup", "for mobile app"

UI Mockups:
- Specify device: mobile, tablet, desktop
- Describe layout: dashboard, list view, card layout
- Include content hints: what data should appear

Icons:
- Define style: outline, filled, flat, 3D
- Specify size context: "for navigation bar"
- Request consistency: "matching style to existing set"
标志提示词：
- 指定风格：简约、复古、现代、活泼
- 定义配色："蓝白配色"、"从X到Y的渐变"
- 提及使用场景："科技创业公司使用"、"移动应用使用"

UI原型提示词：
- 指定设备：手机、平板、桌面端
- 描述布局：仪表盘、列表视图、卡片布局
- 包含内容提示：应显示哪些数据

图标提示词：
- 定义风格：轮廓、填充、扁平化、3D
- 指定尺寸场景："用于导航栏"
- 要求风格统一："与现有图标集风格匹配"

Error Handling

错误处理

  • Login Failed: Retry 3 times, notify user via iMessage
  • Session Expired: Re-authenticate automatically
  • Generation Failed: Retry with modified prompt
  • Content Policy Block: Rephrase prompt to comply with policies
  • Download Failed: Retry download, try alternative method
  • Quality Issues: Regenerate with more specific prompt
  • 登录失败：重试3次，通过iMessage通知用户
  • 会话过期：自动重新认证
  • 生成失败：修改提示词后重试
  • 内容政策拦截：改写提示词以符合政策要求
  • 下载失败：重试下载，尝试替代方法
  • 质量问题：使用更具体的提示词重新生成

Self-Improvement Instructions

自我优化说明

When you learn a better way to generate images with Gemini:
  1. Document the improvement in your response
  2. Suggest updating this skill file with the new approach
  3. Include specific prompt formulations that produce better results
  4. Note any style keywords that work particularly well
当你掌握了使用Gemini生成图像的更好方法时：
  1. 在响应中记录该优化方法
  2. 建议使用新方法更新此技能文件
  3. 包含能产生更好结果的具体提示词表述
  4. 记录效果特别好的风格关键词

Notes

注意事项

  • Nano Banana is the designated tool for LifeOS asset creation
  • Generated images may require multiple attempts for best results
  • Be specific in prompts for better output quality
  • Save generated assets to project directories
  • Consider multiple variations for important assets
  • Image generation subject to Google's content policies
  • Higher quality prompts yield better results
  • Can generate multiple options to choose from
  • Nano Banana是LifeOS资产创建的指定工具
  • 生成的图像可能需要多次尝试才能获得最佳效果
  • 提示词越具体，输出质量越高
  • 将生成的资产保存至项目目录
  • 重要资产可考虑生成多个版本备选
  • 图像生成需遵守Google的内容政策
  • 高质量提示词产出高质量结果
  • 可生成多个选项供选择