generate-icon

アイコン生成スキル

Gemini AI を使用してあらゆるプラットフォーム向けのプロフェッショナルなアイコンを生成し、背景の自動削除、トリミング、複数サイズへの書き出しを行います。

クイックスタート

# Favicon for website
bun run --cwd ${CLAUDE_PLUGIN_ROOT} ${CLAUDE_PLUGIN_ROOT}/skills/generate-icon/scripts/generate.ts "modern tech startup logo letter S" --preset favicon --output ./icons/favicon

# iOS App Store icons
bun run --cwd ${CLAUDE_PLUGIN_ROOT} ${CLAUDE_PLUGIN_ROOT}/skills/generate-icon/scripts/generate.ts "meditation app lotus flower" --preset apple-app-icon --output ./icons/ios

# Android Play Store + adaptive icons
bun run --cwd ${CLAUDE_PLUGIN_ROOT} ${CLAUDE_PLUGIN_ROOT}/skills/generate-icon/scripts/generate.ts "fitness tracker flame icon" --preset android-app-icon --output ./icons/android

# PWA manifest icons
bun run --cwd ${CLAUDE_PLUGIN_ROOT} ${CLAUDE_PLUGIN_ROOT}/skills/generate-icon/scripts/generate.ts "productivity app checkmark" --preset pwa --output ./icons/pwa

# macOS desktop app
bun run --cwd ${CLAUDE_PLUGIN_ROOT} ${CLAUDE_PLUGIN_ROOT}/skills/generate-icon/scripts/generate.ts "code editor brackets symbol" --preset macos-icns --output ./icons/macos

# Windows desktop app
bun run --cwd ${CLAUDE_PLUGIN_ROOT} ${CLAUDE_PLUGIN_ROOT}/skills/generate-icon/scripts/generate.ts "music player note icon" --preset windows-ico --output ./icons/windows

# General UI icons
bun run --cwd ${CLAUDE_PLUGIN_ROOT} ${CLAUDE_PLUGIN_ROOT}/skills/generate-icon/scripts/generate.ts "settings gear" --preset ui-icons --output ./icons/ui

プリセット

プリセット	説明	サイズ	バンドル
apple-app-icon	iOS/iPadOS App Store	18 サイズ（1024-20px）	いいえ
android-app-icon	Google Play + アダプティブレイヤー	11 サイズ + 前景	いいえ
favicon	ブラウザーのタブアイコン	8 サイズ + ICO	はい（.ico）
pwa	プログレッシブウェブアプリ	11 サイズ + マスカブル	いいえ
macos-icns	macOS デスクトップ	10 サイズ	はい（.icns）
windows-ico	Windows デスクトップ	7 サイズ	はい（.ico）
ui-icons	アプリ内アイコン	9 サイズ（512-16px）	いいえ

パイプライン

1. 生成 - Gemini を介して高解像度のマスターアイコンを作成します
2. 背景の削除 - Replicate rembg を使用してエッジをきれいにします
3. トリミングと中央配置 - 余白を切り取り、5% のパディングを設けて正方形のキャンバスの中央に配置します
4. サイズ変更 - lanczos3 補間を使用して、すべてのプリセットサイズを書き出します
5. バンドル - 必要に応じて ICO/ICNS バンドルを作成します

オプション

bun run --cwd ${CLAUDE_PLUGIN_ROOT} ${CLAUDE_PLUGIN_ROOT}/skills/generate-icon/scripts/generate.ts "prompt" --preset <name> --output <dir> [options]

Required:
  --preset <name>       Platform preset (see table above)
  --output <dir>        Output directory

Optional:
  --input <image>       Reference image for style guidance
  --master-image <path> Use existing master instead of generating
  --skip-generate       Skip AI generation (requires --master-image)
  --skip-remove-bg      Skip background removal
  --bg-color <hex>      Background color for non-transparent presets

例

参照画像を使用する

bun run --cwd ${CLAUDE_PLUGIN_ROOT} ${CLAUDE_PLUGIN_ROOT}/skills/generate-icon/scripts/generate.ts "clean app icon version" --preset pwa --input ./existing-logo.png --output ./icons

既存のマスターを使用する

bun run --cwd ${CLAUDE_PLUGIN_ROOT} ${CLAUDE_PLUGIN_ROOT}/skills/generate-icon/scripts/generate.ts "" --preset ui-icons --master-image ./my-icon.png --skip-generate --output ./icons

カスタム背景色を使用した iOS

bun run --cwd ${CLAUDE_PLUGIN_ROOT} ${CLAUDE_PLUGIN_ROOT}/skills/generate-icon/scripts/generate.ts "weather app sun" --preset apple-app-icon --bg-color "#0066CC" --output ./icons/ios

アイコンデザインのヒント

推奨事項：

• シンプルで大胆、ひと目で認識できるシルエットにする
• 焦点を 1 つに絞る
• コントラストを高くする
• エッジをきれいにする
• 16x16px でも機能するようにする

避けること：

• 小さいサイズで消えてしまう細部
• テキスト（アイコンサイズでは読めません）
• 複雑なグラデーション（バンディングが発生します）
• 競合する複数の要素
• 写真やリアルな画像

環境変数

変数	必須	説明
GEMINI_API_KEY	はい	Google AI Studio API キー
REPLICATE_API_TOKEN	はい	背景削除用の Replicate API トークン

出力構造

output/
├── master-raw.png        # Original generated image
├── master-nobg.png       # Background removed
├── master-cropped.png    # Cropped and centered
├── master-final.png      # With background (iOS only)
├── favicon.ico           # ICO bundle (favicon preset)
├── AppIcon.icns          # ICNS bundle (macos preset)
├── icon-512.png          # Size variants...
├── icon-256.png
└── ...

コンテキストの管理

生成したアイコン画像をコンテキストに読み戻さないでください。 スクリプトは、生成したすべてのサイズのファイルパスを出力します。ユーザーに結果を目視で確認するよう依頼してください。アイコンセットは複数のサイズで多数のファイルを生成するため、画像を読み戻すとコンテキストウィンドウをすぐに使い切ってしまいます。

トラブルシューティング

問題	解決策
「GEMINI_API_KEY not set」	API キーをエクスポートします：export GEMINI_API_KEY=your-key
「REPLICATE_API_TOKEN not set」	トークンをエクスポートします：export REPLICATE_API_TOKEN=your-token
ICO が生成されない	ImageMagick をインストールします：brew install imagemagick
ICNS が生成されない	macOS でのみ動作します（iconutil が必要です）
背景がきれいに削除されない	背景を単色にした、よりシンプルなプロンプトを試します
アイコンが複雑すぎる	プロンプトをシンプルにし、「詳細な」または「リアルな」といった指定を避けます