icon-generation

Files (2)

• SKILL.md
• icon_generator.py · scripts/

SKILL.md (first lines)

# Icon Generation Skill

Generate professional app icons with transparent backgrounds using AI (Google Gemini).

**Output:** Square PNG with transparent background - ready for app stores, favicons, or UI.

## Quick Examples

| User Says | What Happens |
|-----------|--------------|
| "Create an icon for a music app" | Generates square PNG with transparent background |
| "Make a settings gear icon, flat style" | Flat design icon with clean lines |
| "Generate a 3D shopping cart icon" | 3D-style icon with depth and shadows |
| "I need a favicon for my blog" | Small icon optimized for web |
| "Create icon set: home, search, profile" | Batch generates multiple icons |
| "Make icons matching this style" + image | Uses reference image to match style |
| "Generate more icons like this one" | Creates consistent icon set from reference |

## Prerequisites

- `GOOGLE_API_KEY` - Required for Google Gemini image generation
  - Get your key at: https://aistudio.google.com/apikey

## Icon Styles

| Style | Description | Best For |
|-------|-------------|----------|
| **flat** | Modern flat design, solid colors, minimal shadows | iOS, Material Design, web |
| **3d** | Depth, gradients, realistic shadows | macOS, premium apps |
| **line** | Outline only, thin strokes | Minimalist UI, toolbars |
| **glyph** | Solid filled shape, single color | System icons, tab bars |
| **gradient** | Smooth color transitions | Modern app icons |
| **minimal** | Ultra-simple, essential shapes only | Professional, clean UI |

## Workflow

### Step 1: Gather Requirements (REQUIRED)

Use the `AskUserQuestion` tool for each question. Ask ONE question at a time.

**Q1: Icon Concept**
> "What should this icon represent?
>
> Examples: settings gear, shopping cart, user profile, home, music note, camera"

*Wait for response.*

**Q2: Style**
> "What **style**?
>
> - Flat (modern, solid colors)
> - 3D (depth, shadows)
> - Line (outline only)
> - Glyph (solid filled shape)
> - Gradient (color transitions)
> - Minimal (ultra-simple)"

*Wait for response.*

**Q3: Size**
> "What **size**? (can generate multiple)
>
> - 1024px (App Store, high-res)
> - 512px (Android, web)
> - 256px (desktop apps)
> - 128px (favicons, small UI)
> - All common sizes"

*Wait for response.*

**Q4: Reference Image (Optional but important for icon sets)**
> "Do you have a **reference image** to match the style?
>
> - Yes, I have an existing icon to match
> - No, generate fresh style"

*If yes, ask for the image path. Wait for response.*

**Q5: Colors (Optional)**
> "Any **color preferences**?
>
> - Let AI choose based on concept
> - Specific colors (e.g., blue and white)
> - Monochrome (single color + transparency)
> - Match brand colors"

*Wait for response.*

**Q6: Output Format**
> "What **file format**?
>
> - PNG (transparency, recommended)
> - JPEG (smaller file, no transparency)
> - WebP (modern format, good compression)"

*Wait for response.*

**Q7: Background Removal Method (for PNG/WebP)**
> "How should we remove the background?
>
> - Built-in (fast, may have minor artifacts)
> - Rembg (AI-based, high quality, runs locally)
> - None (keep white background from generation)"

*Wait for response.*

### Step 2: Craft the Prompt

Transform user request into an icon-specific prompt:

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

**Example transformations:**
- User: "music app icon"

From michaelboeding/skills, MIT.

More from michaelboeding/skills