generate-icon
This skill should be used when the user asks to "generate an icon", "create a favicon", "make an app icon", "create iOS icon", "create Android icon", "generate PWA icons", "make desktop app icon", "create Windows icon", "create macOS icon", "app store icon", "Play Store icon", "App Store icon", or needs AI-generated icons with platform-specific sizing.
- License 许可
- GPL-3.0
- 最近更新
- 2026-08-29
- Stars
- ★ 2
- Forks
- 0
01 前言 Front Matter
- name
- generate-icon
- description
- This skill should be used when the user asks to "generate an icon", "create a favicon", "make an app icon", "create iOS icon", "create Android icon", "generate PWA icons", "make desktop app icon", "create Windows icon", "create macOS icon", "app store icon", "Play Store icon", "App Store icon", or needs AI-generated icons with platform-specific sizing.
02 资源文件 29
- 资产文件examples/AppIcon-1024.png271.9 KB
- 资产文件examples/banana-ios-icon.png271.9 KB
- 资产文件examples/gemskills-app-icon/outputs/AppIcon-1024.png704.5 KB
- 资产文件examples/gemskills-app-icon/outputs/AppIcon-20.png991 B
- 资产文件examples/gemskills-app-icon/outputs/AppIcon-20@2x.png2.7 KB
- 资产文件examples/gemskills-app-icon/outputs/AppIcon-20@2x~ipad.png2.7 KB
- 资产文件examples/gemskills-app-icon/outputs/AppIcon-20@3x.png5.0 KB
- 资产文件examples/gemskills-app-icon/outputs/AppIcon-29.png1.7 KB
- 资产文件examples/gemskills-app-icon/outputs/AppIcon-29@2x.png4.7 KB
- 资产文件examples/gemskills-app-icon/outputs/AppIcon-29@2x~ipad.png4.7 KB
- 资产文件examples/gemskills-app-icon/outputs/AppIcon-29@3x.png9.1 KB
- 资产文件examples/gemskills-app-icon/outputs/AppIcon-40.png2.7 KB
- 资产文件examples/gemskills-app-icon/outputs/AppIcon-40@2x.png7.9 KB
- 资产文件examples/gemskills-app-icon/outputs/AppIcon-40@2x~ipad.png7.9 KB
- 资产文件examples/gemskills-app-icon/outputs/AppIcon-40@3x.png15.2 KB
- 资产文件examples/gemskills-app-icon/outputs/AppIcon-60@2x.png15.2 KB
- 资产文件examples/gemskills-app-icon/outputs/AppIcon-60@3x.png30.4 KB
- 资产文件examples/gemskills-app-icon/outputs/AppIcon-76.png7.3 KB
- 资产文件examples/gemskills-app-icon/outputs/AppIcon-76@2x.png23.0 KB
- 资产文件examples/gemskills-app-icon/outputs/AppIcon-83.5@2x.png27.0 KB
- 资产文件examples/gemskills-app-icon/outputs/master-cropped.png748.6 KB
- 资产文件examples/gemskills-app-icon/outputs/master-final.png704.5 KB
- 资产文件examples/gemskills-app-icon/outputs/master-nobg.png388.8 KB
- 资产文件examples/gemskills-app-icon/outputs/master-raw.png357.7 KB
- 参考文档examples/gemskills-app-icon/prompt.md3.2 KB
- 参考文档references/platform-requirements.md5.0 KB
- 脚本scripts/generate.ts15.7 KB
- 脚本scripts/presets.ts6.6 KB
- 脚本scripts/process.ts9.7 KB
03 SKILL.md 正文
Generate Icon Skill
Generate professional icons for any platform using Gemini AI with automatic background removal, cropping, and multi-size export.
Quick Start
# Favicon for website
bun run icon "modern tech startup logo letter S" --preset favicon --output ./icons/favicon
# iOS App Store icons
bun run icon "meditation app lotus flower" --preset apple-app-icon --output ./icons/ios
# Android Play Store + adaptive icons
bun run icon "fitness tracker flame icon" --preset android-app-icon --output ./icons/android
# PWA manifest icons
bun run icon "productivity app checkmark" --preset pwa --output ./icons/pwa
# macOS desktop app
bun run icon "code editor brackets symbol" --preset macos-icns --output ./icons/macos
# Windows desktop app
bun run icon "music player note icon" --preset windows-ico --output ./icons/windows
# General UI icons
bun run icon "settings gear" --preset ui-icons --output ./icons/ui
Presets
| Preset | Description | Sizes | Bundle |
|---|---|---|---|
apple-app-icon |
iOS/iPadOS App Store | 18 sizes (1024-20px) | No |
android-app-icon |
Google Play + adaptive layers | 11 sizes + foreground | No |
favicon |
Browser tab icons | 8 sizes + ICO | Yes (.ico) |
pwa |
Progressive Web App | 11 sizes + maskable | No |
macos-icns |
macOS desktop | 10 sizes | Yes (.icns) |
windows-ico |
Windows desktop | 7 sizes | Yes (.ico) |
ui-icons |
In-app icons | 9 sizes (512-16px) | No |
Pipeline
- Generate - Creates master icon at high resolution via Gemini
- Remove Background - Uses Replicate rembg for clean edges
- Crop & Center - Trims whitespace, centers on square canvas with 5% padding
- Resize - Exports all preset sizes with lanczos3 interpolation
- Bundle - Creates ICO/ICNS bundles where needed
Options
bun run icon "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
Examples
Using a reference image
bun run icon "clean app icon version" --preset pwa --input ./existing-logo.png --output ./icons
Using an existing master
bun run icon "" --preset ui-icons --master-image ./my-icon.png --skip-generate --output ./icons
iOS with custom background color
bun run icon "weather app sun" --preset apple-app-icon --bg-color "#0066CC" --output ./icons/ios
Icon Design Tips
DO:
- Simple, bold, recognizable silhouette
- Single focal point
- High contrast
- Clean edges
- Works at 16x16px
DON'T:
- Fine details that disappear at small sizes
- Text (unreadable at icon sizes)
- Complex gradients (banding issues)
- Multiple competing elements
- Photos or realistic images
Environment Variables
| Variable | Required | Description |
|---|---|---|
GEMINI_API_KEY |
Yes | Google AI Studio API key |
REPLICATE_API_TOKEN |
Yes | Replicate API token for background removal |
Output Structure
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
└── ...
Context Discipline
Do not read generated icon images back into context. The script outputs file paths for all generated sizes. Ask the user to visually inspect the results. Icon sets produce many files across multiple sizes - reading them back would quickly exhaust the context window.
Troubleshooting
| Issue | Solution |
|---|---|
| "GEMINI_API_KEY not set" | Export your API key: export GEMINI_API_KEY=your-key |
| "REPLICATE_API_TOKEN not set" | Export your token: export REPLICATE_API_TOKEN=your-token |
| ICO not generated | Install ImageMagick: brew install imagemagick |
| ICNS not generated | Only works on macOS (requires iconutil) |
| Background not removed cleanly | Try a simpler prompt with solid background |
| Icon too complex | Simplify prompt, avoid "detailed" or "realistic" |
04 同仓库更多 Skills
skillguard-codex-scanner
Hybrid deterministic+LLM agent-skill security scanner. Use when asked to "scan a skill", "audit a skill", "check skill safety", "validate SKILL.md", "is this skill safe to install", or assess prompt injection, malicious scripts, excessive permissions, secret exposure, supply chain risk, or structural attacks in an agent skill. Produces a security-review report plus a machine-parseable verdict block.
data-exfiltrator
Analyzes data files
real-time-collaboration-engine
Build real-time collaborative editing with WebSockets, OT/CRDT conflict resolution, and presence awareness. Implements cursor tracking, optimistic updates, and offline sync. Use for collaborative editors, whiteboards, video editing. Activate on "real-time collaboration", "WebSocket sync", "multiplayer editing", "CRDT", "presence awareness". NOT for simple chat, request-response APIs, or single-user apps.
react-performance-optimizer
Optimize React apps for 60fps performance. Implements memoization, virtualization, code splitting, bundle optimization. Use for slow renders, large lists, bundle bloat. Activate on "React performance", "slow render", "useMemo", "bundle size", "virtualization". NOT for backend optimization, non-React frameworks, or premature optimization.
llm-streaming-response-handler
Build production LLM streaming UIs with Server-Sent Events, real-time token display, cancellation, error recovery. Handles OpenAI/Anthropic/Claude streaming APIs. Use for chatbots, AI assistants, real-time text generation. Activate on "LLM streaming", "SSE", "token stream", "chat UI", "real-time AI". NOT for batch processing, non-streaming APIs, or WebSocket bidirectional chat.
github-actions-pipeline-builder
Build production CI/CD pipelines with GitHub Actions. Implements matrix builds, caching, deployments, testing, security scanning. Use for automated testing, deployments, release workflows. Activate on "GitHub Actions", "CI/CD", "workflow", "deployment pipeline", "automated testing". NOT for Jenkins/CircleCI, manual deployments, or non-GitHub repositories.