icon-generation

图标生成技能

使用 AI（Google Gemini）生成带透明背景的专业应用图标。

输出： 带透明背景的正方形 PNG，可直接用于应用商店、网站图标或 UI。

快速示例

用户说	结果
"为音乐应用创建一个图标"	生成带透明背景的正方形 PNG
"制作一个扁平风格的设置齿轮图标"	生成线条简洁的扁平设计图标
"生成一个 3D 购物车图标"	生成具有立体感和阴影的 3D 风格图标
"我需要一个博客的网站图标"	生成针对网页优化的小图标
"创建一组图标：主页、搜索、个人资料"	批量生成多个图标
"制作与此风格匹配的图标" + 图片	使用参考图片匹配风格
"生成更多类似这个图标的图标"	根据参考图创建风格一致的图标组

前置条件

• GOOGLE_API_KEY - 使用 Google Gemini 生成图像的必需项
  • 在此处获取密钥：https://aistudio.google.com/apikey

图标风格

风格	描述	最适合
flat	现代扁平设计、纯色、阴影极少	iOS、Material Design、网页
3d	立体感、渐变、逼真的阴影	macOS、高端应用
line	仅轮廓、细线条	极简 UI、工具栏
glyph	实心填充形状、单色	系统图标、标签栏
gradient	平滑的颜色过渡	现代应用图标
minimal	极度简洁，仅保留必要形状	专业、简洁的 UI

工作流

第 1 步：收集需求（必需）

针对每个问题使用 AskUserQuestion 工具。每次只问一个问题。

Q1：图标概念

"这个图标应该代表什么？

示例：设置齿轮、购物车、用户个人资料、主页、音符、相机"

等待回复。

Q2：风格

"你想要什么风格？

• Flat（现代、纯色）
• 3D（立体感、阴影）
• Line（仅轮廓）
• Glyph（实心填充形状）
• Gradient（颜色过渡）
• Minimal（极度简洁）"

等待回复。

Q3：尺寸

"你想要什么尺寸？（可以生成多个尺寸）

• 1024px（App Store、高分辨率）
• 512px（Android、网页）
• 256px（桌面应用）
• 128px（网站图标、小型 UI）
• 所有常用尺寸"

等待回复。

Q4：参考图片（可选，但对图标组很重要）

"你有用于匹配风格的参考图片吗？

• 有，我有一个现有图标可供匹配
• 没有，请生成全新风格"

如果有，请索要图片路径。等待回复。

Q5：颜色（可选）

"你对颜色有什么偏好吗？

• 让 AI 根据概念选择
• 指定颜色（例如，蓝色和白色）
• 单色（单一颜色 + 透明）
• 匹配品牌颜色"

等待回复。

Q6：输出格式

"你想要什么文件格式？

• PNG（支持透明，推荐）
• JPEG（文件较小，不支持透明）
• WebP（现代格式，压缩效果好）"

等待回复。

Q7：背景移除方式（适用于 PNG/WebP）

"应该如何移除背景？

• 内置方式（速度快，可能有轻微瑕疵）
• Rembg（基于 AI，质量高，在本地运行）
• 无（保留生成时的白色背景）"

等待回复。

第 2 步：编写提示词

将用户请求转换为专门用于图标的提示词：

模板：

A [STYLE] style icon of [CONCEPT] on a transparent background.
Square format, centered, clean edges, suitable for app icon.
[COLOR PREFERENCES]. Simple, recognizable, professional.

转换示例：

• 用户："音乐应用图标"

• 优化后："一个扁平风格的音符图标，背景透明。正方形格式，居中，边缘简洁，适合作为应用图标。鲜艳的紫粉渐变色。设计简洁、易于识别、专业，具有现代美感。"

• 用户："设置齿轮，极简风格"

• 优化后："一个极简风格的设置齿轮图标，背景透明。正方形格式，居中，边缘简洁。单色灰。设计极度简洁，仅保留必要形状，不添加多余细节。"

步骤 3：生成图标

执行脚本：

python3 ${CLAUDE_PLUGIN_ROOT}/skills/icon-generation/scripts/icon_generator.py \
  --prompt "your enhanced prompt" \
  --style "flat" \
  --size 1024 \
  --output "/path/to/icon.png"

生成多个尺寸：

python3 ${CLAUDE_PLUGIN_ROOT}/skills/icon-generation/scripts/icon_generator.py \
  --prompt "your enhanced prompt" \
  --style "flat" \
  --size 1024 512 256 128 \
  --output "/path/to/icon"

这会生成：icon_1024.png、icon_512.png、icon_256.png、icon_128.png

批量生成（多个图标）：

python3 ${CLAUDE_PLUGIN_ROOT}/skills/icon-generation/scripts/icon_generator.py \
  --batch '["home", "search", "profile", "settings"]' \
  --style "flat" \
  --size 512 \
  --output "/path/to/icons"

这会生成：home_512.png、search_512.png、profile_512.png、settings_512.png

步骤 4：交付结果

1. 向用户展示生成的图标
2. 提供所用的提示词
3. 提供以下选项：
   • 生成其他尺寸
   • 尝试其他风格
   • 创建多个变体
   • 生成为 ICO（网站图标格式）

脚本参数

参数	短参数	描述	默认值
--prompt	-p	图标描述	必填
--style	-s	图标样式预设	flat
--size	-z	尺寸（像素）	512（或根据参考图自动设置）
--format	-f	输出格式（png、jpeg、webp）	png
--bg-removal	--bg	背景移除方法（builtin、rembg、none）	builtin
--output	-o	输出路径	自动生成
--batch	-b	概念的 JSON 数组	None
--colors	-c	颜色偏好	AI 选择
--reference	-r	用于匹配风格的参考图像	None

背景移除方法

此技能使用 background-remove 技能生成透明背景。

方法	描述	适用场景
builtin	快速将白色转换为透明	快速迭代、大多数图标
rembg	使用 U2-Net 模型进行 AI 背景移除	高质量结果、复杂背景
none	保留白色背景	JPEG 输出、手动后期处理

要求

安装说明请参阅 background-remove skill。

# Install rembg for AI-based background removal
pip install rembg

# Or with GPU acceleration (requires CUDA)
pip install rembg[gpu]

样式提示词修饰语

脚本会自动添加以下特定样式的提示词修饰语：

样式	添加的修饰语
flat	“扁平设计、纯色、无渐变、阴影极简、简洁的矢量风格”
3d	“3D 风格、层次感、柔和阴影、微妙渐变、专业渲染”
line	“线描艺术、仅轮廓、线条纤细且粗细一致、无填充、极简主义”
glyph	“实心填充形状、单色、粗犷剪影、高对比度”
gradient	“平滑渐变色、现代鲜艳的过渡效果、光泽质感”
minimal	“超极简、仅保留必要形状、极致简洁、几何风格”

常见图标尺寸

尺寸	用途
1024px	iOS App Store、高分辨率显示屏
512px	Android Play Store、macOS 应用
256px	Windows 应用、桌面快捷方式
192px	Android 启动器图标
180px	iOS 主屏幕
128px	网站图标（高分辨率）、小型 UI
64px	工具栏图标
32px	标准网站图标
16px	最小网站图标

错误处理

缺少 API 密钥：

Error: GOOGLE_API_KEY not set. Get your key at https://aistudio.google.com/apikey

生成失败：

• 使用更简单的提示词重试
• 检查概念是否清晰且易于识别
• 确保样式适合该概念

输出不透明：

• 脚本会明确请求透明背景
• 如果背景仍不透明，尝试在提示词中添加“置于透明背景上”
• 对于复杂概念，结果可能有所不同

参考图像支持

使用参考图像创建风格一致的图标集。提供参考图像后，AI 会匹配以下内容：

• 视觉风格和设计语言
• 线条粗细和描边粗细
• 调色板和阴影
• 细节和复杂程度
• 整体比例和间距

何时使用参考图像

场景	使用参考图像？
为同一款应用创建多个图标	是 — 确保风格一致
匹配现有品牌图标	是 — 保持品牌形象
添加到现有图标集	是 — 确保自然融合
单个独立图标	可选 — 采用全新风格也可以
探索不同风格	否 — 让 AI 自由创作

参考图示例

与现有风格匹配的单个图标：

python3 ${CLAUDE_PLUGIN_ROOT}/skills/icon-generation/scripts/icon_generator.py \
  -p "settings gear" \
  -r /path/to/existing_icon.png \
  -z 512

风格统一的图标集：

python3 ${CLAUDE_PLUGIN_ROOT}/skills/icon-generation/scripts/icon_generator.py \
  -b '["home", "search", "profile", "settings", "notifications"]' \
  -r /path/to/brand_icon.png \
  -z 512 \
  -o "app_icons"

多张参考图（最多 14 张）：

python3 ${CLAUDE_PLUGIN_ROOT}/skills/icon-generation/scripts/icon_generator.py \
  -p "calendar" \
  -r /path/to/icon1.png \
  -r /path/to/icon2.png \
  -z 512

获得最佳效果的技巧

1. 明确描述概念：“购物车”比“电子商务”更好
2. 让风格适配平台：iOS/Android 适合扁平风格，macOS 适合 3D 风格
3. 保持简洁：图标应在较小尺寸下也清晰易辨
4. 在小尺寸下测试：生成 32px 的图标，确保清晰易读
5. 保持风格统一：对于图标集，所有图标都使用相同风格
6. 使用参考图：对于图标集，始终使用参考图以确保风格统一

示例

应用图标

python3 ${CLAUDE_PLUGIN_ROOT}/skills/icon-generation/scripts/icon_generator.py \
  -p "camera with colorful lens" \
  -s gradient \
  -z 1024 512 256 \
  -o "camera_icon"

网站图标

python3 ${CLAUDE_PLUGIN_ROOT}/skills/icon-generation/scripts/icon_generator.py \
  -p "letter B for blog" \
  -s minimal \
  -z 128 32 16 \
  -o "favicon"

图标集

python3 ${CLAUDE_PLUGIN_ROOT}/skills/icon-generation/scripts/icon_generator.py \
  -b '["home", "search", "notifications", "profile", "settings"]' \
  -s flat \
  -z 512 \
  -o "app_icons"

高质量背景移除（Rembg）

python3 ${CLAUDE_PLUGIN_ROOT}/skills/icon-generation/scripts/icon_generator.py \
  -p "detailed gear with shadows" \
  -s 3d \
  -z 512 \
  --bg rembg \
  -o "gear_icon"

内置背景移除功能的 WebP 格式

python3 ${CLAUDE_PLUGIN_ROOT}/skills/icon-generation/scripts/icon_generator.py \
  -p "lightning bolt" \
  -s gradient \
  -z 512 \
  -f webp \
  -o "bolt_icon"