Prompt file imported from cmwen/jlearn-app (.github/prompts/icon-generation.prompt.md). Fill in {{size}} before use. Copyright stays with the author.

Icon generation — Android Flutter prompt

Name: icon-generation
Author: cmwen

Purpose: Guide LLMs to generate high-quality SVG app icons following icon design best practices, then convert to PNG for Android launcher icons.

Workflow

Design SVG icon following best practices below
Generate SVG markup with proper structure
Convert to PNG using command-line tools (Inkscape, ImageMagick, or rsvg-convert)
Generate Android mipmap sizes from master PNG

SVG Icon Design Best Practices

Visual Design Principles

Simplicity: Use simple geometric shapes; avoid complex details that blur at small sizes
Recognition: Icon should be instantly recognizable at 48×48px and smaller
Consistency: Maintain visual weight and style across icon variations
Contrast: Ensure sufficient contrast for visibility on light/dark backgrounds
Centering: Center the main symbol with balanced whitespace
No text: Avoid text in launcher icons (difficult to read at small sizes)

Technical Requirements

Square canvas: Design on 1024×1024px canvas (Android standard)
Safe area: Keep main content within central 80% (820×820px) to account for system masks
Adaptive icons: Consider foreground (108×108dp, maskable) + background layers
Color palette: Limit to 2-3 colors for clarity; provide hex codes
Transparent background: Use transparent background for foreground layer
Vector-first: Design as vector (SVG) for lossless scaling

SVG Structure

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1024" height="1024">
  <!-- Background layer (optional) -->
  <rect width="1024" height="1024" fill="#BACKGROUND_COLOR"/>
  
  <!-- Foreground icon within safe area (922×922 centered, or 820×820 for extra safety) -->
  <g transform="translate(512, 512)">
    <!-- Center your paths here, using relative coordinates -->
  </g>
</svg>

File Organization

Source SVG: assets/icon/app_icon.svg (1024×1024)
Master PNG: assets/icon/app_icon.png (1024×1024)
Android mipmaps: Auto-generated via flutter_launcher_icons

SVG to PNG Conversion Tools

Option 1: Inkscape (Recommended)

# Install (macOS)
brew install inkscape

# Convert SVG to PNG
inkscape assets/icon/app_icon.svg \
  --export-type=png \
  --export-filename=assets/icon/app_icon.png \
  --export-width=1024 \
  --export-height=1024

Option 2: rsvg-convert

# Install (macOS)
brew install librsvg

# Convert SVG to PNG
rsvg-convert -w 1024 -h 1024 \
  assets/icon/app_icon.svg \
  -o assets/icon/app_icon.png

Option 3: ImageMagick

# Install (macOS)
brew install imagemagick

# Convert SVG to PNG
magick convert -background none \
  -resize 1024x1024 \
  assets/icon/app_icon.svg \
  assets/icon/app_icon.png

Android Launcher Icon Sizes

Mipmap Densities:

mdpi: 48×48 px (1x baseline)
hdpi: 72×72 px (1.5x)
xhdpi: 96×96 px (2x)
xxhdpi: 144×144 px (3x)
xxxhdpi: 192×192 px (4x)

Master Icon: 1024×1024 px (Play Store and source)

Step-by-Step Icon Generation Process

Step 1: Design the Icon Concept

Prompt the LLM:

I need an app launcher icon for [APP NAME - e.g., "JLearn Language Learning App"].

App purpose: [Brief description]
Target audience: [Who uses this app]
App personality: [Friendly/Professional/Playful/Modern/etc.]

Design requirements:
- Style: [Flat/Minimal/Geometric/Illustrated]
- Primary color: [#HEX or "suggest colors"]
- Symbol concept: [e.g., "book and speech bubble", "globe with letter", "brain icon"]
- Background: [Transparent/Solid color/Gradient]

Please suggest 2-3 icon concepts that follow best practices:
- Simple geometric shapes recognizable at 48px
- Centered composition with balanced whitespace
- Limited color palette (2-3 colors max)
- No text or fine details

Step 2: Generate SVG Markup

Prompt the LLM:

Generate complete SVG markup for the chosen icon concept following these specifications:

Technical requirements:
- Canvas: 1024×1024px (viewBox="0 0 1024 1024")
- Safe area: Keep main content within central 820×820px
- Structure: Use <g> transform to center paths at (512, 512)
- Colors: Provide specific hex codes for all fills/strokes
- Background: [Transparent/Solid - specify]
- Style: Clean paths, no unnecessary attributes

SVG structure template:
```xml
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
  <!-- Background (if solid) -->
  <rect width="1024" height="1024" fill="#HEXCODE"/>
  
  <!-- Icon content centered -->
  <g transform="translate(512, 512)">
    <!-- Paths here -->
  </g>
</svg>

Provide the complete SVG code ready to save as assets/icon/app_icon.svg.


### Step 3: Save and Convert SVG to PNG
```bash
# Save SVG to file
cat > assets/icon/app_icon.svg << 'EOF'
[PASTE SVG MARKUP HERE]
EOF

# Convert to PNG using Inkscape (recommended)
inkscape assets/icon/app_icon.svg \
  --export-type=png \
  --export-filename=assets/icon/app_icon.png \
  --export-width=1024 \
  --export-height=1024

# Or use rsvg-convert
rsvg-convert -w 1024 -h 1024 \
  assets/icon/app_icon.svg \
  -o assets/icon/app_icon.png

Step 4: Generate Android Mipmap Sizes

Use flutter_launcher_icons package (automated):

Add to pubspec.yaml:

dev_dependencies:
  flutter_launcher_icons: ^0.13.1

flutter_launcher_icons:
  android: true
  image_path: "assets/icon/app_icon.png"

Run generation:

flutter pub get
flutter pub run flutter_launcher_icons

This generates all mipmap densities in android/app/src/main/res/mipmap-*/

Example: Complete Icon Generation

Example Prompt for JLearn App

Generate an app launcher icon for JLearn - an AI-powered language learning shell app.

App purpose: Interactive language learning with conversational AI
Target audience: Language learners (students, professionals)
App personality: Friendly, modern, intelligent, approachable

Design requirements:
- Style: Flat, minimal, modern
- Primary color: #4F46E5 (indigo) or suggest alternatives
- Symbol concept: Speech bubble with Japanese character, or book with chat icon
- Background: Solid color or transparent
- Must be recognizable at 48px

Please provide:
1. 2-3 icon concept descriptions
2. Complete SVG markup for the best concept (1024×1024px)
3. Color palette with hex codes
4. Instructions for saving and converting to PNG

Follow SVG best practices:
- Simple geometric shapes
- Centered within 820×820px safe area
- 2-3 colors maximum
- Clean, optimized paths

Expected LLM Output Structure

The LLM should provide:

Concept descriptions (2-3 options)
Recommended concept with reasoning
Complete SVG code following the template
Color palette (hex codes with color names)
Save instructions (filename and location)
Conversion commands (SVG to PNG)
Flutter integration (flutter_launcher_icons config)

Validation Checklist

Before finalizing the icon, verify:

SVG has correct viewBox (0 0 1024 1024)
Main content fits within safe area (central 820×820px)
Colors use specific hex codes (no "currentColor" or variables)
Background is specified (transparent or solid)
Paths are clean and optimized (no unnecessary attributes)
Icon is recognizable when scaled to 48×48px
Sufficient contrast for visibility
No text or fine details that blur at small sizes
Consistent visual weight and balance

Testing the Icon

After generation, test at multiple sizes:

# Generate test sizes
for size in 48 72 96 144 192; do
  rsvg-convert -w $size -h $size \
    assets/icon/app_icon.svg \
    -o assets/icon/test_{{size}}px.png
done

# Open in Preview/browser to verify clarity
open assets/icon/test_*px.png

Troubleshooting

Problem: SVG renders with wrong colors

Solution: Ensure all fills/strokes use explicit hex codes, not CSS variables

Problem: Icon looks blurry at small sizes

Solution: Simplify shapes, increase stroke width, reduce detail

Problem: Conversion tool not found

Solution: Install via Homebrew: brew install inkscape or brew install librsvg

Problem: Icon looks off-center

Solution: Verify the <g transform="translate(512, 512)"> wrapper and check path coordinates

Problem: Transparent background renders as white

Solution: Use --export-background-opacity=0 (Inkscape) or -background none (ImageMagick)

# Icon generation — Android Flutter prompt Purpose: Guide LLMs to generate high-quality SVG app icons following icon design best practices, then convert to PNG for Android launcher icons. ## Workflow 1. **Design SVG icon** following best practices below 2. **Generate SVG markup** with proper structure 3. **Convert to PNG** using command-line tools (Inkscape, ImageMagick, or rsvg-convert) 4. **Generate Android mipmap sizes** from master PNG ## SVG Icon Design Best Practices ### Visual Design Principles - **Simplicity**: Use simple geometric shapes; avoid complex details that blur at small sizes - **Recognition**: Icon should be instantly recognizable at 48×48px and smaller - **Consistency**: Maintain visual weight and style across icon variations - **Contrast**: Ensure sufficient contrast for visibility on light/dark backgrounds - **Centering**: Center the main symbol with balanced whitespace - **No text**: Avoid text in launcher icons (difficult to read at small sizes) ### Technical Requirements - **Square canvas**: Design on 1024×1024px canvas (Android standard) - **Safe area**: Keep main content within central 80% (820×820px) to account for system masks - **Adaptive icons**: Consider foreground (108×108dp, maskable) + background layers - **Color palette**: Limit to 2-3 colors for clarity; provide hex codes - **Transparent background**: Use transparent background for foreground layer - **Vector-first**: Design as vector (SVG) for lossless scaling ### SVG Structure ```xml <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1024" height="1024">  <rect width="1024" height="1024" fill="#BACKGROUND_COLOR"/>  <g transform="translate(512, 512)">  </g> </svg> ``` ### File Organization - Source SVG: `assets/icon/app_icon.svg` (1024×1024) - Master PNG: `assets/icon/app_icon.png` (1024×1024) - Android mipmaps: Auto-generated via flutter_launcher_icons ## SVG to PNG Conversion Tools ### Option 1: Inkscape (Recommended) ```bash # Install (macOS) brew install inkscape # Convert SVG to PNG inkscape assets/icon/app_icon.svg \ --export-type=png \ --export-filename=assets/icon/app_icon.png \ --export-width=1024 \ --export-height=1024 ``` ### Option 2: rsvg-convert ```bash # Install (macOS) brew install librsvg # Convert SVG to PNG rsvg-convert -w 1024 -h 1024 \ assets/icon/app_icon.svg \ -o assets/icon/app_icon.png ``` ### Option 3: ImageMagick ```bash # Install (macOS) brew install imagemagick # Convert SVG to PNG magick convert -background none \ -resize 1024x1024 \ assets/icon/app_icon.svg \ assets/icon/app_icon.png ``` ## Android Launcher Icon Sizes **Mipmap Densities**: - mdpi: 48×48 px (1x baseline) - hdpi: 72×72 px (1.5x) - xhdpi: 96×96 px (2x) - xxhdpi: 144×144 px (3x) - xxxhdpi: 192×192 px (4x) **Master Icon**: 1024×1024 px (Play Store and source) ## Step-by-Step Icon Generation Process ### Step 1: Design the Icon Concept Prompt the LLM: ``` I need an app launcher icon for [APP NAME - e.g., "JLearn Language Learning App"]. App purpose: [Brief description] Target audience: [Who uses this app] App personality: [Friendly/Professional/Playful/Modern/etc.] Design requirements: - Style: [Flat/Minimal/Geometric/Illustrated] - Primary color: [#HEX or "suggest colors"] - Symbol concept: [e.g., "book and speech bubble", "globe with letter", "brain icon"] - Background: [Transparent/Solid color/Gradient] Please suggest 2-3 icon concepts that follow best practices: - Simple geometric shapes recognizable at 48px - Centered composition with balanced whitespace - Limited color palette (2-3 colors max) - No text or fine details ``` ### Step 2: Generate SVG Markup Prompt the LLM: ``` Generate complete SVG markup for the chosen icon concept following these specifications: Technical requirements: - Canvas: 1024×1024px (viewBox="0 0 1024 1024") - Safe area: Keep main content within central 820×820px - Structure: Use <g> transform to center paths at (512, 512) - Colors: Provide specific hex codes for all fills/strokes - Background: [Transparent/Solid - specify] - Style: Clean paths, no unnecessary attributes SVG structure template: ```xml <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">  <rect width="1024" height="1024" fill="#HEXCODE"/>  <g transform="translate(512, 512)">  </g> </svg> ``` Provide the complete SVG code ready to save as `assets/icon/app_icon.svg`. ``` ### Step 3: Save and Convert SVG to PNG ```bash # Save SVG to file cat > assets/icon/app_icon.svg << 'EOF' [PASTE SVG MARKUP HERE] EOF # Convert to PNG using Inkscape (recommended) inkscape assets/icon/app_icon.svg \ --export-type=png \ --export-filename=assets/icon/app_icon.png \ --export-width=1024 \ --export-height=1024 # Or use rsvg-convert rsvg-convert -w 1024 -h 1024 \ assets/icon/app_icon.svg \ -o assets/icon/app_icon.png ``` ### Step 4: Generate Android Mipmap Sizes Use flutter_launcher_icons package (automated): 1. Add to `pubspec.yaml`: ```yaml dev_dependencies: flutter_launcher_icons: ^0.13.1 flutter_launcher_icons: android: true image_path: "assets/icon/app_icon.png" ``` 2. Run generation: ```bash flutter pub get flutter pub run flutter_launcher_icons ``` This generates all mipmap densities in `android/app/src/main/res/mipmap-*/` ## Example: Complete Icon Generation ### Example Prompt for JLearn App ``` Generate an app launcher icon for JLearn - an AI-powered language learning shell app. App purpose: Interactive language learning with conversational AI Target audience: Language learners (students, professionals) App personality: Friendly, modern, intelligent, approachable Design requirements: - Style: Flat, minimal, modern - Primary color: #4F46E5 (indigo) or suggest alternatives - Symbol concept: Speech bubble with Japanese character, or book with chat icon - Background: Solid color or transparent - Must be recognizable at 48px Please provide: 1. 2-3 icon concept descriptions 2. Complete SVG markup for the best concept (1024×1024px) 3. Color palette with hex codes 4. Instructions for saving and converting to PNG Follow SVG best practices: - Simple geometric shapes - Centered within 820×820px safe area - 2-3 colors maximum - Clean, optimized paths ``` ### Expected LLM Output Structure The LLM should provide: 1. **Concept descriptions** (2-3 options) 2. **Recommended concept** with reasoning 3. **Complete SVG code** following the template 4. **Color palette** (hex codes with color names) 5. **Save instructions** (filename and location) 6. **Conversion commands** (SVG to PNG) 7. **Flutter integration** (flutter_launcher_icons config) ## Validation Checklist Before finalizing the icon, verify: - [ ] SVG has correct viewBox (0 0 1024 1024) - [ ] Main content fits within safe area (central 820×820px) - [ ] Colors use specific hex codes (no "currentColor" or variables) - [ ] Background is specified (transparent or solid) - [ ] Paths are clean and optimized (no unnecessary attributes) - [ ] Icon is recognizable when scaled to 48×48px - [ ] Sufficient contrast for visibility - [ ] No text or fine details that blur at small sizes - [ ] Consistent visual weight and balance ## Testing the Icon After generation, test at multiple sizes: ```bash # Generate test sizes for size in 48 72 96 144 192; do rsvg-convert -w $size -h $size \ assets/icon/app_icon.svg \ -o assets/icon/test_{{size}}px.png done # Open in Preview/browser to verify clarity open assets/icon/test_*px.png ``` ## Troubleshooting **Problem**: SVG renders with wrong colors - **Solution**: Ensure all fills/strokes use explicit hex codes, not CSS variables **Problem**: Icon looks blurry at small sizes - **Solution**: Simplify shapes, increase stroke width, reduce detail **Problem**: Conversion tool not found - **Solution**: Install via Homebrew: `brew install inkscape` or `brew install librsvg` **Problem**: Icon looks off-center - **Solution**: Verify the `<g transform="translate(512, 512)">` wrapper and check path coordinates **Problem**: Transparent background renders as white - **Solution**: Use `--export-background-opacity=0` (Inkscape) or `-background none` (ImageMagick)

{ "prompt": "# Icon generation — Android Flutter prompt\n\nPurpose: Guide LLMs to generate high-quality SVG app icons following icon design best practices, then convert to PNG for Android launcher icons.\n\n## Workflow\n1. **Design SVG icon** following best practices below\n2. **Generate SVG markup** with proper structure\n3. **Convert to PNG** using command-line tools (Inkscape, ImageMagick, or rsvg-convert)\n4. **Generate Android mipmap sizes** from master PNG\n\n## SVG Icon Design Best Practices\n\n### Visual Design Principles\n- **Simplicity**: Use simple geometric shapes; avoid complex details that blur at small sizes\n- **Recognition**: Icon should be instantly recognizable at 48×48px and smaller\n- **Consistency**: Maintain visual weight and style across icon variations\n- **Contrast**: Ensure sufficient contrast for visibility on light/dark backgrounds\n- **Centering**: Center the main symbol with balanced whitespace\n- **No text**: Avoid text in launcher icons (difficult to read at small sizes)\n\n### Technical Requirements\n- **Square canvas**: Design on 1024×1024px canvas (Android standard)\n- **Safe area**: Keep main content within central 80% (820×820px) to account for system masks\n- **Adaptive icons**: Consider foreground (108×108dp, maskable) + background layers\n- **Color palette**: Limit to 2-3 colors for clarity; provide hex codes\n- **Transparent background**: Use transparent background for foreground layer\n- **Vector-first**: Design as vector (SVG) for lossless scaling\n\n### SVG Structure\n```xml\n<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1024 1024\" width=\"1024\" height=\"1024\">\n \n <rect width=\"1024\" height=\"1024\" fill=\"#BACKGROUND_COLOR\"/>\n \n \n <g transform=\"translate(512, 512)\">\n \n </g>\n</svg>\n```\n\n### File Organization\n- Source SVG: `assets/icon/app_icon.svg` (1024×1024)\n- Master PNG: `assets/icon/app_icon.png` (1024×1024)\n- Android mipmaps: Auto-generated via flutter_launcher_icons\n\n## SVG to PNG Conversion Tools\n\n### Option 1: Inkscape (Recommended)\n```bash\n# Install (macOS)\nbrew install inkscape\n\n# Convert SVG to PNG\ninkscape assets/icon/app_icon.svg \\\n --export-type=png \\\n --export-filename=assets/icon/app_icon.png \\\n --export-width=1024 \\\n --export-height=1024\n```\n\n### Option 2: rsvg-convert\n```bash\n# Install (macOS)\nbrew install librsvg\n\n# Convert SVG to PNG\nrsvg-convert -w 1024 -h 1024 \\\n assets/icon/app_icon.svg \\\n -o assets/icon/app_icon.png\n```\n\n### Option 3: ImageMagick\n```bash\n# Install (macOS)\nbrew install imagemagick\n\n# Convert SVG to PNG\nmagick convert -background none \\\n -resize 1024x1024 \\\n assets/icon/app_icon.svg \\\n assets/icon/app_icon.png\n```\n\n## Android Launcher Icon Sizes\n\n**Mipmap Densities**:\n- mdpi: 48×48 px (1x baseline)\n- hdpi: 72×72 px (1.5x)\n- xhdpi: 96×96 px (2x)\n- xxhdpi: 144×144 px (3x)\n- xxxhdpi: 192×192 px (4x)\n\n**Master Icon**: 1024×1024 px (Play Store and source)\n\n## Step-by-Step Icon Generation Process\n\n### Step 1: Design the Icon Concept\nPrompt the LLM:\n```\nI need an app launcher icon for [APP NAME - e.g., \"JLearn Language Learning App\"].\n\nApp purpose: [Brief description]\nTarget audience: [Who uses this app]\nApp personality: [Friendly/Professional/Playful/Modern/etc.]\n\nDesign requirements:\n- Style: [Flat/Minimal/Geometric/Illustrated]\n- Primary color: [#HEX or \"suggest colors\"]\n- Symbol concept: [e.g., \"book and speech bubble\", \"globe with letter\", \"brain icon\"]\n- Background: [Transparent/Solid color/Gradient]\n\nPlease suggest 2-3 icon concepts that follow best practices:\n- Simple geometric shapes recognizable at 48px\n- Centered composition with balanced whitespace\n- Limited color palette (2-3 colors max)\n- No text or fine details\n```\n\n### Step 2: Generate SVG Markup\nPrompt the LLM:\n```\nGenerate complete SVG markup for the chosen icon concept following these specifications:\n\nTechnical requirements:\n- Canvas: 1024×1024px (viewBox=\"0 0 1024 1024\")\n- Safe area: Keep main content within central 820×820px\n- Structure: Use <g> transform to center paths at (512, 512)\n- Colors: Provide specific hex codes for all fills/strokes\n- Background: [Transparent/Solid - specify]\n- Style: Clean paths, no unnecessary attributes\n\nSVG structure template:\n```xml\n<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1024 1024\">\n \n <rect width=\"1024\" height=\"1024\" fill=\"#HEXCODE\"/>\n \n \n <g transform=\"translate(512, 512)\">\n \n </g>\n</svg>\n```\n\nProvide the complete SVG code ready to save as `assets/icon/app_icon.svg`.\n```\n\n### Step 3: Save and Convert SVG to PNG\n```bash\n# Save SVG to file\ncat > assets/icon/app_icon.svg << 'EOF'\n[PASTE SVG MARKUP HERE]\nEOF\n\n# Convert to PNG using Inkscape (recommended)\ninkscape assets/icon/app_icon.svg \\\n --export-type=png \\\n --export-filename=assets/icon/app_icon.png \\\n --export-width=1024 \\\n --export-height=1024\n\n# Or use rsvg-convert\nrsvg-convert -w 1024 -h 1024 \\\n assets/icon/app_icon.svg \\\n -o assets/icon/app_icon.png\n```\n\n### Step 4: Generate Android Mipmap Sizes\nUse flutter_launcher_icons package (automated):\n\n1. Add to `pubspec.yaml`:\n```yaml\ndev_dependencies:\n flutter_launcher_icons: ^0.13.1\n\nflutter_launcher_icons:\n android: true\n image_path: \"assets/icon/app_icon.png\"\n```\n\n2. Run generation:\n```bash\nflutter pub get\nflutter pub run flutter_launcher_icons\n```\n\nThis generates all mipmap densities in `android/app/src/main/res/mipmap-*/`\n\n## Example: Complete Icon Generation\n\n### Example Prompt for JLearn App\n```\nGenerate an app launcher icon for JLearn - an AI-powered language learning shell app.\n\nApp purpose: Interactive language learning with conversational AI\nTarget audience: Language learners (students, professionals)\nApp personality: Friendly, modern, intelligent, approachable\n\nDesign requirements:\n- Style: Flat, minimal, modern\n- Primary color: #4F46E5 (indigo) or suggest alternatives\n- Symbol concept: Speech bubble with Japanese character, or book with chat icon\n- Background: Solid color or transparent\n- Must be recognizable at 48px\n\nPlease provide:\n1. 2-3 icon concept descriptions\n2. Complete SVG markup for the best concept (1024×1024px)\n3. Color palette with hex codes\n4. Instructions for saving and converting to PNG\n\nFollow SVG best practices:\n- Simple geometric shapes\n- Centered within 820×820px safe area\n- 2-3 colors maximum\n- Clean, optimized paths\n```\n\n### Expected LLM Output Structure\nThe LLM should provide:\n\n1. **Concept descriptions** (2-3 options)\n2. **Recommended concept** with reasoning\n3. **Complete SVG code** following the template\n4. **Color palette** (hex codes with color names)\n5. **Save instructions** (filename and location)\n6. **Conversion commands** (SVG to PNG)\n7. **Flutter integration** (flutter_launcher_icons config)\n\n## Validation Checklist\n\nBefore finalizing the icon, verify:\n\n- [ ] SVG has correct viewBox (0 0 1024 1024)\n- [ ] Main content fits within safe area (central 820×820px)\n- [ ] Colors use specific hex codes (no \"currentColor\" or variables)\n- [ ] Background is specified (transparent or solid)\n- [ ] Paths are clean and optimized (no unnecessary attributes)\n- [ ] Icon is recognizable when scaled to 48×48px\n- [ ] Sufficient contrast for visibility\n- [ ] No text or fine details that blur at small sizes\n- [ ] Consistent visual weight and balance\n\n## Testing the Icon\n\nAfter generation, test at multiple sizes:\n\n```bash\n# Generate test sizes\nfor size in 48 72 96 144 192; do\n rsvg-convert -w $size -h $size \\\n assets/icon/app_icon.svg \\\n -o assets/icon/test_{{size}}px.png\ndone\n\n# Open in Preview/browser to verify clarity\nopen assets/icon/test_*px.png\n```\n\n## Troubleshooting\n\n**Problem**: SVG renders with wrong colors\n- **Solution**: Ensure all fills/strokes use explicit hex codes, not CSS variables\n\n**Problem**: Icon looks blurry at small sizes\n- **Solution**: Simplify shapes, increase stroke width, reduce detail\n\n**Problem**: Conversion tool not found\n- **Solution**: Install via Homebrew: `brew install inkscape` or `brew install librsvg`\n\n**Problem**: Icon looks off-center\n- **Solution**: Verify the `<g transform=\"translate(512, 512)\">` wrapper and check path coordinates\n\n**Problem**: Transparent background renders as white\n- **Solution**: Use `--export-background-opacity=0` (Inkscape) or `-background none` (ImageMagick)", "variables": [ "size" ], "notes": "Purpose: Guide LLMs to generate high-quality SVG app icons following icon design best practices, then convert to PNG for Android launcher icons.", "metadata": { "source": { "provider": "github-prompts", "repository": "https://github.com/cmwen/jlearn-app", "path": ".github/prompts/icon-generation.prompt.md", "ref": "801ca458d1e0d6fd78bf5d4b31f9b6a59df4bb57", "url": "https://github.com/cmwen/jlearn-app/blob/801ca458d1e0d6fd78bf5d4b31f9b6a59df4bb57/.github/prompts/icon-generation.prompt.md", "key": "cmwen/jlearn-app/.github/prompts/icon-generation.prompt.md" } } }

icon-generation

About