learning_ai_common_plat/AI.dev/SKILLS/generate-store-assets.md

Generate Store Assets Skill

Description: Programmatically generate all app store artwork (icons, screenshots, feature graphics) from a single script.

When to Use

• Preparing for app store releases
• Updating app branding
• Creating assets for multiple platforms
• Maintaining consistent design across stores

Prerequisites

• Python 3.7+ with Pillow library
• App name and branding decided
• Color palette chosen

Quick Start

# From repo root
python3 assets/generate-store-assets.py

Output Overview

The script generates 73 PNG files across multiple categories:

Category	Count	Directory	Platforms
App Icons	36	assets/store/icons/	iOS (13), Android (6), macOS (7), Windows (5), Favicon (5)
Screenshots	32	assets/store/screenshots/{ios,android,mac,windows}/	4 screens × dark + light themes
Feature Graphic	1	assets/store/feature/	Google Play Store
Splash Screens	4	assets/store/splash/	Android splash screens

Customization

1. Color Palette

Edit the color variables at the top of assets/generate-store-assets.py:

# Default colors
GREEN_PRIMARY = "#2E7D32"      # Icon circle, badges, section headers
GREEN_ACCENT = "#50FA7B"        # Glowing text, active tabs, highlights
DARK_BG = "#1E1E2E"             # Dark mode background
DARK_SURFACE = "#282A36"       # Cards, inputs, tab bar
MUTED = "#6272A4"               # Secondary text, timestamps
CYAN = "#8BE9FD"                # Transcript card accents

After changing colors, re-run the script to regenerate all assets.

2. App Icon Design

The icon features a waveform-in-circle with green glow:

# Key parameters in generate_app_icon()
circle_radius = size * 0.28
corner_radius = size * 0.22
num_bars = 7
waveform_heights = [0.3, 0.5, 0.75, 1.0, 0.75, 0.5, 0.3]
glow_rings = 8  # Number of concentric glow rings

3. Screenshot Content

Each screenshot function uses sample data. Edit these functions:

def generate_screenshot_home():
    # Customize: greeting, stats, activity list
    greeting = "Good afternoon, Sarah"
    stats = {"words": "12,543", "time": "2h 15m", "sessions": 8}

def generate_screenshot_record():
    # Customize: timer display, live preview
    timer = "00:47"
    preview_text = "Meeting notes from the product review..."

def generate_screenshot_history():
    # Customize: transcript cards
    transcripts = [
        {"title": "Product Review", "date": "Today", "words": 1250},
        {"title": "Team Standup", "date": "Yesterday", "words": 340}
    ]

def generate_screenshot_settings():
    # Customize: profile and settings sections
    profile = {"name": "Sarah Chen", "email": "sarah@example.com", "plan": "Pro"}

Platform-Specific Requirements

iOS Icons

• 1024x1024 (App Store)
• 180x180 (iPhone @3x)
• 120x120 (iPhone @2x)
• 167x167 (iPad Pro @2x)
• 152x152 (iPad @2x)
• 87x87 (Settings @3x)
• 58x58 (Settings @2x)
• 60x60 (Notifications @3x)
• 40x40 (Notifications @2x)
• 80x80 (Spotlight @2x)
• 40x40 (Spotlight @1x)
• 20x20 (Settings @1x)

Android Icons

• 512x512 (Google Play Store)
• 192x192 (adaptive foreground)
• 432x432 (adaptive background)
• 144x144 (xxxhdpi)
• 96x96 (xxhdpi)
• 72x72 (xhdpi)
• 48x48 (mdpi)

Additional Sizes

• macOS: 16x16 to 1024x1024
• Windows: 16x16 to 256x256
• Favicon: 16x16, 32x32, 96x96, 192x192

Screenshot Specifications

Dimensions

• iOS: 1242x2688 (iPhone X/11/12/13) and 2048x2732 (iPad Pro)
• Android: 1080x1920 (phone) and 2048x2732 (tablet)
• macOS: 1280x800 (Mac App Store)
• Windows: 1366x768 (Microsoft Store)

Themes

• Light mode: Light background, dark text
• Dark mode: Dark background, light text
• Both generated automatically

Automation Script

Create scripts/update-store-assets.sh:

#!/bin/bash
# Update store assets after design changes

echo "Generating store assets..."
python3 assets/generate-store-assets.py

echo "Verifying output..."
find assets/store -name "*.png" | wc -l

echo "Opening directory for review..."
open assets/store

echo "Done! Review assets before committing."

Integration with CI/CD

GitHub Actions

name: Generate Store Assets
on:
  push:
    paths:
      - 'assets/generate-store-assets.py'
      - 'assets/store/**'

jobs:
  generate:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-python@v4
        with:
          python-version: '3.11'

      - name: Install dependencies
        run: pip install Pillow

      - name: Generate assets
        run: python3 assets/generate-store-assets.py

      - name: Upload artifacts
        uses: actions/upload-artifact@v3
        with:
          name: store-assets
          path: assets/store/

Best Practices

Design Guidelines

1. Keep it simple - Icons should be recognizable at small sizes
2. High contrast - Ensure visibility on various backgrounds
3. Brand consistency - Use consistent colors across all assets
4. Text readability - Use large, clear fonts in screenshots

Technical Tips

1. Vector when possible - Consider SVG for icons (convert to PNG)
2. Optimize file size - Use compression without quality loss
3. Test on devices - Verify how assets look on actual devices
4. Version control - Commit generated assets or regenerate on build

Common Issues

Script Won't Run

# Install Pillow
pip install Pillow

# Check Python version (3.7+)
python --version

Icons Look Blurry

• Ensure you're generating at the correct resolution
• Check if the source images are high quality
• Verify anti-aliasing settings in the script

Colors Don't Match

• Colors must be in hex format (#RRGGBB)
• Ensure consistent color space (sRGB)
• Check gamma correction settings

Before Release Checklist

• All 73 assets generated successfully
• Icons look good at all sizes
• Screenshots show current UI
• No placeholder text remains
• Dark/light themes both look good
• Text is readable in all screenshots
• App name is correct in all contexts
• Brand colors are consistent

Notes

• Single source of truth - The Python script is the only place to make changes
• Regenerate often - Run after any UI changes
• Store requirements change - Check platform guidelines periodically
• Test on actual devices - Simulators don't always match real devices

Related Skills

• Desktop Release - Packaging with assets
• iOS Release - App Store submission
• Android Development - Android-specific assets