本文へ移動
cccskills
無料GitHub で公開

image-studio

AI image generation and editing: e-commerce templates (hero/banner/detail/lifestyle), image refinement (background replace/remove, enhance, retouch, style transfer), icon extraction (bg-removal + detect + smart crop with transparent output).

インストール方法を見る

含まれるファイル(11)

  • SKILL.md17.3 KB
  • agents/openai.yaml199 B
  • evals/evals.json1.0 KB
  • nanobanana1.8 KB
  • references/api_reference.md7.7 KB
  • scripts/auth.py3.4 KB
  • scripts/credential_store.py9.1 KB
  • scripts/generate.py11.8 KB
  • scripts/icon_extract.py22.7 KB
  • scripts/nanobanana_api.py14.8 KB
  • scripts/refine.py9.4 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

Nano Banana — AI Image Generation & Editing

Unified CLI: ./nanobanana <module> [options] Full API reference: references/api_reference.md

First-Use Detection

Before executing any command, verify credentials:

Path 1: Environment Variable (Agent preferred, zero setup)

If any of GEMINI_API_KEY, GOOGLE_API_KEY, or NANOBANANA_API_KEY is set, no init needed — the client resolves automatically.

Path 2: Non-Interactive Init (Agent usable)

Ask user for their Google API key, then run:

./nanobanana auth init --api-key "<their-gemini-api-key>"

This verifies connectivity and persists credentials to ~/.nanobanana/credentials.json (chmod 600).

How to get an API Key

  1. Go to Google AI Studio
  2. Create API key
  3. Copy (the key typically starts with AIza)

After init succeeds, credentials auto-persist. No further user action needed.

Available Models

Gemini Model IDAliasMax ResBest For
gemini-2.5-flash-imageNano Banana1024pxSpeed + efficiency
gemini-3.1-flash-image-previewNano Banana 22KDefault. Speed + quality
gemini-3-pro-image-previewNano Banana Pro4KStudio quality, 4K, Thinking

Shortcut aliases: nano-banana-2 (default), nano-banana-pro, nano-banana, flash, pro, fast.

Users can override the model with --model <name>. Default is nano-banana-2 (Gemini 3.1 Flash Image).

Workflow 1: E-commerce Image Generation

./nanobanana generate "<product description>" [options]

Templates

Templates auto-enhance prompts with professional photography directives:

TemplateRatioSizeUse Case
hero1:12KProduct hero shot on white background
banner16:92KPromotional marketing banner
detail3:42KClose-up material/texture shot
lifestyle4:32KProduct in aspirational scene
grid1:12KFour-panel detail page showcase
social4:51KSocial media / Instagram post

Icon Templates (extraction-optimized)

Icon templates use the surrounding prompt pattern — the user's description is wrapped between a layout-constraining prefix and a style-constraining suffix. This forces the model to produce structured, grid-aligned output that the extraction pipeline can reliably split.

TemplateGridRatioSizeUse Case
icon1×11:11KSingle icon, centered, 80% fill
icon-set3×31:12K9 related icons in uniform grid
icon-set-63×23:22K6 related icons in landscape grid
icon-set-42×21:12K4 related icons in grid
icon-variants2×21:12KSame icon in 4 visual styles

Examples

# Product hero shot with white studio background
./nanobanana generate "luxury leather handbag, brown Italian calfskin" --template hero

# Marketing banner for a campaign
./nanobanana generate "summer skincare collection" --template banner --model nano-banana-pro

# Lifestyle scene
./nanobanana generate "minimalist desk setup with mechanical keyboard" --template lifestyle

# Custom prompt with explicit parameters
./nanobanana generate "organic tea packaging in zen garden setting" --ratio 16:9 --size 2K

# With reference images (automatically switches to image-to-image)
./nanobanana generate "same style but in blue colorway" --ref-image product_red.jpg

# Save with specific name and directory
./nanobanana generate "wireless earbuds" --template hero -o ./output -n earbuds_hero

# --- Icon Templates ---
# Single icon: centered, white bg, 80% canvas fill
./nanobanana generate "settings gear" --template icon

# 9-icon set in 3×3 grid (then split with icon-extract)
./nanobanana generate "social media: like, comment, share, save, follow, message, search, notification, profile" --template icon-set

# 4-icon set in 2×2 grid
./nanobanana generate "e-commerce: cart, payment, delivery, return" --template icon-set-4

# Same icon in 4 styles (flat, line-art, filled, 3D)
./nanobanana generate "cloud computing" --template icon-variants

Key Options

OptionDescription
--templateE-commerce template (auto-sets ratio/size/prompt)
--modelModel override (default: nano-banana-2)
--ratioAspect ratio override
--sizeResolution override (1K/2K/4K)
--formatOutput format (png/jpeg/webp)
--ref-imageReference image file (repeatable, up to 14 for Gemini 3+)
--rawUse prompt as-is, skip template enhancement
-o/--outputOutput directory
-n/--nameOutput filename (without extension)

Workflow 2: Image Refinement

./nanobanana refine <input-image> [prompt] [options]

Templates

TemplateNeeds PromptUse Case
bg-replace✓Replace background with specified scene
bg-white✗White e-commerce background
bg-remove✗Chromakey green for compositing
enhance✗Quality boost (sharp, color, noise)
retouch✗Natural portrait retouching
object-swap✓Replace specific object in scene
style-transfer✓Apply artistic style
color-grade✓Professional color grading
extend✓Extend/outpaint canvas

Examples

# White background for e-commerce
./nanobanana refine product.jpg --template bg-white

# Replace background
./nanobanana refine product.jpg "modern kitchen counter with marble surface" --template bg-replace

# General quality enhancement
./nanobanana refine photo.jpg --template enhance --size 4K --model nano-banana-pro

# Portrait retouching
./nanobanana refine portrait.jpg --template retouch

# Object swap
./nanobanana refine room.jpg "the wooden table with a glass coffee table" --template object-swap

# Style transfer
./nanobanana refine photo.jpg "Japanese woodblock print" --template style-transfer

# Free-form editing without template
./nanobanana refine photo.jpg "make the lighting warmer and add golden hour glow"

Workflow 3: Icon Extraction

./nanobanana icon-extract <input-image> [options]

Full pipeline: background removal → detection (grid or auto) → smart crop → individual RGBA PNGs + manifest.

Detection Strategies (--layout)

StrategySyntaxBest For
auto--layout autoUnstructured images, unknown layout (default)
grid--layout grid-CxRTemplate-generated sprite sheets (reliable!)

Why grid mode is critical: When using icon-set / icon-set-4 / icon-set-6 templates, the model is prompted to produce a grid layout. Grid splitting (--layout grid-3x3) is deterministic and far more reliable than component analysis — it divides the image into N×M equal cells, then refines each cell's bounding box by scanning the alpha channel for actual content. Empty cells are discarded.

Key Options

OptionDefaultDescription
-o / --output.Output directory
--prefixiconFilename prefix (→ icon_001.png, icon_002.png, ...)
-l / --layoutautoDetection: auto or grid-CxR (e.g., grid-3x3)
--modelbirefnet-general-literembg model for bg removal
--skip-bg-removaloffSkip bg removal (input already transparent)
--padding0.10Padding ratio around each icon (0.10 = 10%)
--min-size24Minimum bounding box side (px) to qualify as icon
--merge-distance0.05Merge threshold for auto mode (ratio of image diagonal)
--output-size512Export size (square px). Use 0 to keep original size
--no-squareoffKeep original aspect ratio instead of squaring
--keep-intermediateoffSave the background-removed intermediate image

Examples

# Grid split — for template-generated sprite sheets (most reliable)
./nanobanana icon-extract sprite_3x3.png --layout grid-3x3 -o ./icons/
./nanobanana icon-extract quad.png --layout grid-2x2 --output-size 256

# Auto detect — for unstructured images
./nanobanana icon-extract icon_sheet.png -o ./icons/

# Skip bg removal (already transparent)
./nanobanana icon-extract transparent.png --skip-bg-removal --layout grid-3x2

# Debug: keep intermediate bg-removed image
./nanobanana icon-extract app_icons.png --model birefnet-general --keep-intermediate

End-to-End Chaining: Generate → Extract

The most reliable icon workflow chains generation with extraction:

# Step 1: Generate 9-icon sprite sheet
./nanobanana generate "navigation: home, search, favorites, cart, profile, settings, notifications, messages, help" --template icon-set

# Step 2: Extract with matching grid
./nanobanana icon-extract generated_image.png --layout grid-3x3 -o ./icons/

The generate output prints a layout hint (e.g., Layout: 3x3 grid) — the Agent should automatically chain to icon-extract with the matching --layout grid-CxR.

Agent Decision Guide

The icon pipeline is a default tool — the Agent decides autonomously:

ScenarioAgent Action
"生成9个App图标"generate --template icon-set → icon-extract --layout grid-3x3
"生成4个图标"generate --template icon-set-4 → icon-extract --layout grid-2x2
"生成单个图标"generate --template icon (no extraction needed)
User provides icon sheet with known gridicon-extract --layout grid-CxR directly
User provides unstructured imageicon-extract (auto mode)
"图标风格对比"generate --template icon-variants → icon-extract --layout grid-2x2

Intent → Command Mapping

E-commerce Generation

User IntentCommand
"生成商品主图"generate "<描述>" --template hero
"做一个促销 Banner"generate "<描述>" --template banner
"产品细节图"generate "<描述>" --template detail
"生活场景图"generate "<描述>" --template lifestyle
"详情页四宫格"generate "<描述>" --template grid
"社交媒体图片"generate "<描述>" --template social
"高清4K产品图"generate "<描述>" --template hero --size 4K --model nano-banana-pro
"AI图片" (generic)generate "<描述>" (no template)

Icon Generation + Extraction

User IntentCommand
"生成单个图标"generate "<描述>" --template icon
"生成9个图标集"generate --template icon-set → icon-extract --layout grid-3x3
"生成6个图标"generate --template icon-set-6 → icon-extract --layout grid-3x2
"生成4个图标"generate --template icon-set-4 → icon-extract --layout grid-2x2
"图标风格对比"generate --template icon-variants → icon-extract --layout grid-2x2
"提取图标"icon-extract <img> -o ./icons/
"切割图标/icon sheet"icon-extract <img> --layout grid-NxM
"去背景+裁切"icon-extract <img>
"小图标256px"icon-extract <img> --output-size 256
"保持原比例"icon-extract <img> --no-square

Image Refinement

User IntentCommand
"换白色背景"refine <img> --template bg-white
"换背景/抠图"refine <img> "<new bg>" --template bg-replace
"去背景"refine <img> --template bg-remove
"图片增强/精修"refine <img> --template enhance
"人像修图"refine <img> --template retouch
"替换物品"refine <img> "<swap>" --template object-swap
"风格迁移"refine <img> "<style>" --template style-transfer
"调色"refine <img> "<mood>" --template color-grade
"扩展画面"refine <img> "<direction>" --template extend

Auth Management

CommandAction
auth init --api-key <KEY>Store and verify API key
auth init --api-key <KEY> --no-verifyStore without verification
auth statusShow current auth configuration
auth cleanRemove stored credentials

Error Recovery

SituationAgent Action
No API keyTrigger First-Use Detection flow
401 Invalid keyauth status, guide to https://aistudio.google.com/apikey
403 Permission deniedCheck API key restrictions / project settings
429 Rate limitedWait and retry
File not foundVerify path, suggest alternatives
File too large (>20MB)Suggest resizing before upload
IMAGE_SAFETY blockRephrase prompt, avoid safety-filtered content
No image in responseCheck finishReason, may need prompt adjustment

Structure

image-studio/
├── nanobanana             ← Unified CLI entry point (bash)
├── SKILL.md               ← This file (Agent instruction)
├── scripts/
│   ├── nanobanana_api.py  ← Core engine (Google Gemini API client)
│   ├── auth.py            ← Credential management (init / status / clean)
│   ├── generate.py        ← E-commerce image generation (6 templates)
│   ├── refine.py          ← Image refinement and editing (9 templates)
│   └── icon_extract.py   ← Icon extraction pipeline (bg-removal + detect + crop)
├── evals/
│   └── evals.json         ← Test cases for skill evaluation
└── references/
    └── api_reference.md   ← Full API parameter reference

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

adb-mysql

無料

阿里云 AnalyticDB (ADB) for MySQL 只读数据分析。 多维分析(计数/聚合/时间序列)、交叉验证、Schema 文档生成、多 Profile。

日本語の概要は準備中です。原文の説明を表示しています。

northseadl/norix-skills62026年4月10日 更新

Multi-agent brainstorming: async opinion collision with expert personas. Mixed Codex/Claude Code engine. Use when multiple AI agents need to collaboratively discuss, debate, and converge on solutions through structured dialog. Triggers: brainstorm, multi-perspective discussion, opinion collision, expert debate, war room, collective intelligence, 头脑风暴, 多视角讨论, 集思广益.

日本語の概要は準備中です。原文の説明を表示しています。

northseadl/norix-skills62026年4月10日 更新

Frontend design blueprints with craftsmanship scoring, self-critique loops, and engineering handoff. Aesthetic intelligence against AI homogeneity. Use for: UI/UX design specs, design system creation, visual direction exploration, component design review, design-to-engineering handoff.

日本語の概要は準備中です。原文の説明を表示しています。

northseadl/norix-skills62026年4月10日 更新

Multi-agent SWE team built on the Workshop model. Full-stack vertical workers, meeting room with @mention notification, private pipes, shared task board. Git worktree isolation, Leader-driven coordination. Mixed Codex/Claude Code engine. Use when a task needs engineering depth beyond a single agent. NOT for simple task parallelism (use agent-task-orchestration) or design discussions (use agent-brainstorm).

日本語の概要は準備中です。原文の説明を表示しています。

northseadl/norix-skills62026年4月10日 更新

Task decomposition and multi-agent orchestration with retry, checkpoint recovery, and real-time monitoring. Mixed Codex/Claude Code engine. Parallel/sequential execution.

日本語の概要は準備中です。原文の説明を表示しています。

northseadl/norix-skills62026年4月10日 更新

针对 cnb.cool 的云原生构建(CNB Build):生成/修改 .cnb.yml 流水线、触发规则、 构建环境、runner 资源、缓存、环境变量、手动触发与调试。 在接入、迁移、优化或排查 CNB 构建配置时使用。

日本語の概要は準備中です。原文の説明を表示しています。

northseadl/norix-skills62026年4月10日 更新

northseadl のスキルをすべて見る

このスキルの問題を報告する