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	渐进式 Web 应用	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

图标设计技巧

建议：

• 轮廓简单、醒目且易于识别
• 单一视觉焦点
• 高对比度
• 边缘清晰
• 在 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”	导出 API 密钥：export GEMINI_API_KEY=your-key
“未设置 REPLICATE_API_TOKEN”	导出令牌：export REPLICATE_API_TOKEN=your-token
未生成 ICO	安装 ImageMagick：brew install imagemagick
未生成 ICNS	仅适用于 macOS（需要 iconutil）
背景未能干净移除	尝试使用纯色背景的简单提示词
图标过于复杂	简化提示词，避免使用“详细”或“逼真”