logo-generator

name	logo-generator
description	Generate logo designs iteratively using AI, then create all favicon, PWA, and social media asset variants. Use when user says "generate logo", "create logo", "logo design", "favicon generator", "brand assets", or needs to create logos with all size variants.

Logo Generator

Generate professional logo designs using AI and automatically create all the favicon, PWA icon, and social media image variants needed for a complete brand asset package.

When to Use This Skill

Use this skill when the user:

• Wants to create a new logo design
• Needs favicon and app icon variants
• Asks for "brand assets" or "logo package"
• Wants to iterate on logo concepts with AI
• Needs social media profile images from a logo

Workflow

Step 1: Check Dependencies

Before starting, verify all required tools are available:

# Check for Gemini API key
echo $GEMINI_API_KEY | head -c 10

# Check for ImageMagick
which magick

# Check for Bun runtime
which bun

# Check nano-banana-generator skill exists
ls ~/.claude/skills/nano-banana-generator/SKILL.md

If any dependency is missing, inform the user:

• GEMINI_API_KEY not set: "Please set your Gemini API key: export GEMINI_API_KEY='your-key'"
• ImageMagick missing: "Please install ImageMagick: brew install imagemagick"
• Bun missing: "Please install Bun: curl -fsSL https://bun.sh/install | bash"
• nano-banana-generator missing: "The nano-banana-generator skill is required. Please install it first."

Stop the workflow if any dependency is missing.

Step 2: Gather Requirements

Ask the user about their logo needs using AskUserQuestion:

1. Brand name: What text should appear in/with the logo?
2. Style: What aesthetic? (minimalist, brutalist, playful, corporate, tech, etc.)
3. Colors: Any specific brand colors? (provide hex codes if known)
4. Design elements: Any specific imagery or symbols to include?
5. Existing design system: Does the project have a tailwind.config or globals.css to reference?

If the user has an existing project, check for design system files:

# Look for color definitions
cat tailwind.config.ts 2>/dev/null | grep -A 50 "colors:"
cat src/app/globals.css 2>/dev/null | head -100

Step 3: Generate Logo Iterations

Use the nano-banana-generator skill to create 3-4 logo concepts. Run these in parallel:

bun run ~/.claude/skills/nano-banana-generator/generate.ts \
  "[detailed prompt based on requirements]" \
  --output ./logo-v1.png \
  --model nano-banana-pro \
  --width 512 --height 512

# Generate on white background (for easier transparency processing)
# Do NOT use --transparent flag as it creates fake checkerboard transparency

Prompt template:

[Style] logo: [design elements description], [brand name if text needed],
[primary color] and [secondary color], [additional style notes],
solid white background, clean vector style, professional

Step 4: Review and Refine

1. Read each generated image to display to user
2. Ask user which direction they prefer using AskUserQuestion
3. Based on feedback, generate refined versions
4. Repeat until user is satisfied with a design

Refinement prompts should incorporate:

• User's specific feedback
• Elements they liked from previous versions
• Corrections for things they didn't like

Step 5: Fix Transparency

The chosen logo needs proper PNG transparency. Use ImageMagick to:

1. If logo has solid background - Remove it with flood fill from corners:

magick [input].png -fuzz 3% -fill none -draw "color 0,0 floodfill" [output].png

2. Verify transparency was applied:

magick identify -verbose [output].png | grep -E "(Alpha|Type)"
# Should show "TrueColorAlpha"

3. Read the processed image to verify it looks correct

Step 6: Generate Asset Variants

Run the asset generator script with the final logo:

bun run ~/.claude/skills/logo-generator/generate-assets.ts \
  [final-logo.png] \
  [output-directory]

This generates:

File	Size	Purpose
favicon.ico	multi-size	Legacy browser support
favicon-16.png	16x16	Browser tab (standard)
favicon-32.png	32x32	Browser tab (retina)
favicon-48.png	48x48	Browser tab (high DPI)
apple-touch-icon.png	180x180	iOS home screen
android-chrome-192.png	192x192	Android PWA
android-chrome-512.png	512x512	Android PWA splash
linkedin-300.png	300x300	LinkedIn profile
linkedin-400.png	400x400	LinkedIn company page
social-share-1200.png	1200x1200	Open Graph / Twitter cards
logo-source.png	original	Source file for future use

Step 7: Output Summary

Provide user with:

1. List of all generated files and their locations
2. Quick reference for where each file is typically used
3. Suggestion to copy files to their project's /public/logo/ directory
4. Reminder to update any metadata references (layout.tsx, manifest.json)

Example Usage

User: "I need a logo for my new startup called TechFlow"

Claude:

1. Checks dependencies (all present)
2. Asks about style preferences, colors
3. Generates 3-4 concepts with nano-banana
4. Shows concepts, asks for feedback
5. Refines based on feedback
6. Processes transparency
7. Generates all asset sizes
8. Provides file list and next steps

Technical Notes

• Always generate logos on white backgrounds, then remove background with ImageMagick
• The --transparent flag in nano-banana creates fake checkerboard, avoid it
• Use nano-banana-pro model for final production assets
• Sharp library handles resizing with good quality preservation
• Keep the logo-source.png for future regeneration needs