logo-generator-skill

What this skill does

```markdown
---
name: logo-generator-skill
description: Professional SVG logo generator with AI-powered showcase images using Claude Code skills workflow
triggers:
  - generate a logo for my project
  - create a logo with SVG variants
  - logo generator skill
  - make a professional logo
  - design a logo for my app
  - generate logo showcase images
  - create brand identity logo
  - SVG logo with background styles
---

# Logo Generator Skill

> Skill by [ara.so](https://ara.so) — Daily 2026 Skills collection.

Professional SVG logo generator that creates 6+ design variants and stunning showcase presentations. Uses geometric design principles and Gemini image generation to produce production-ready logos with 12 professional background styles.

## What This Skill Does

- Generates 6+ distinct SVG logo variants per request (dot matrix, line systems, mixed compositions)
- Creates interactive HTML showcase pages with hover effects
- Exports SVG to PNG at multiple resolutions
- Generates high-end showcase images via Gemini 3.1 Flash Image Preview
- Supports 12 curated background styles (6 dark, 6 light)

## Installation

### Method 1: Automatic (Recommended)

```bash
npx skills add https://github.com/op7418/logo-generator-skill.git
```

### Method 2: Git Clone

```bash
git clone https://github.com/op7418/logo-generator-skill.git ~/.claude/skills/logo-generator
```

### Method 3: Manual

```bash
# macOS/Linux
cp -r logo-generator ~/.claude/skills/logo-generator

# Windows
xcopy logo-generator %USERPROFILE%\.claude\skills\logo-generator /E /I
```

### Post-Installation Setup

```bash
cd ~/.claude/skills/logo-generator
pip install -r requirements.txt

# Configure API key
cp .env.example .env
# Edit .env and set GEMINI_API_KEY
```

## Configuration

### `.env` file

```env
# Official Google Gemini API
GEMINI_API_KEY=your_gemini_api_key_here
GEMINI_MODEL=gemini-3.1-flash-image-preview

# Optional: Third-party endpoint
GEMINI_API_BASE_URL=https://api.example.com/v1
```

Get a Gemini API key at: https://aistudio.google.com/apikey

## Key Scripts

### SVG to PNG Conversion

```bash
python scripts/svg_to_png.py --input logo.svg --output logo.png --size 1024
```

```python
# scripts/svg_to_png.py usage in code
import cairosvg

def convert_svg_to_png(svg_path: str, output_path: str, size: int = 1024):
    cairosvg.svg2png(
        url=svg_path,
        write_to=output_path,
        output_width=size,
        output_height=size
    )
```

### Generate Showcase Images

```bash
python scripts/generate_showcase.py \
  --logo logo.png \
  --styles "void,frosted,fluid,spotlight" \
  --output ./showcases/
```

```python
# scripts/generate_showcase.py usage in code
import os
from google import genai
from dotenv import load_dotenv

load_dotenv()

client = genai.Client(api_key=os.getenv("GEMINI_API_KEY"))

def generate_showcase(logo_path: str, style: str, output_path: str):
    """Generate a professional showcase image for a logo."""
    
    with open(logo_path, "rb") as f:
        logo_data = f.read()
    
    style_prompts = {
        "void": "absolute black background with silver micro noise, hardcore tech aesthetic",
        "frosted": "titanium gray with organic texture, premium product feel",
        "fluid": "deep purple with fluid fusion effects, AI-native aesthetic",
        "spotlight": "carbon gray with editorial spotlight lighting, magazine quality",
        "editorial": "off-white paper texture, humanistic brand feel",
        "swiss": "pure solid color, zero effects, timeless Swiss design authority"
    }
    
    prompt = f"""
    Create a professional logo showcase image.
    Place this logo centered on a {style_prompts.get(style, style)} background.
    The logo should be the focal point with generous negative space around it.
    Make it look like a high-end design studio presentation.
    Output as a 1600x900 landscape showcase image.
    """
    
    response = client.models.generate_content(
        model=os.getenv("GEMINI_MODEL", "gemini-3.1-flash-image-preview"),
        contents=[
            {"role": "user", "parts": [
                {"inline_data": {"mime_type": "image/png", "data": logo_data}},
                {"text": prompt}
            ]}
        ]
    )
    
    # Save generated image
    for part in response.candidates[0].content.parts:
        if hasattr(part, "inline_data"):
            with open(output_path, "wb") as f:
                import base64
                f.write(base64.b64decode(part.inline_data.data))
            return output_path
    
    raise ValueError("No image generated in response")
```

## SVG Logo Design Patterns

### Dot Matrix Pattern

```svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
  <defs>
    <pattern id="dots" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
      <circle cx="10" cy="10" r="1.5" fill="#ffffff" opacity="0.8"/>
    </pattern>
  </defs>
  <!-- Background -->
  <rect width="200" height="200" fill="#0a0a0a"/>
  <!-- Dot matrix field -->
  <rect width="200" height="200" fill="url(#dots)"/>
  <!-- Focal element -->
  <circle cx="100" cy="100" r="30" fill="none" stroke="#ffffff" stroke-width="2.5"/>
  <circle cx="100" cy="100" r="4" fill="#ffffff"/>
</svg>
```

### Line System Pattern

```svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
  <rect width="200" height="200" fill="#0a0a0a"/>
  <!-- Horizontal lines with tension -->
  <line x1="40" y1="85" x2="160" y2="85" stroke="#ffffff" stroke-width="2.5" opacity="0.9"/>
  <line x1="40" y1="100" x2="160" y2="100" stroke="#ffffff" stroke-width="2.5" opacity="0.9"/>
  <line x1="40" y1="115" x2="160" y2="115" stroke="#ffffff" stroke-width="2.5" opacity="0.9"/>
  <!-- Vertical interrupt creating focal point -->
  <rect x="90" y="75" width="20" height="50" fill="#0a0a0a"/>
  <line x1="100" y1="70" x2="100" y2="130" stroke="#ffffff" stroke-width="3.5"/>
</svg>
```

### Mixed Composition Pattern

```svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
  <rect width="200" height="200" fill="#0a0a0a"/>
  <!-- Geometric anchor -->
  <rect x="70" y="70" width="60" height="60" fill="none" 
        stroke="#ffffff" stroke-width="2.5" transform="rotate(45 100 100)"/>
  <!-- Dot accent (asymmetric tension) -->
  <circle cx="130" cy="75" r="5" fill="#ffffff"/>
  <!-- Minimal line extension -->
  <line x1="100" y1="45" x2="100" y2="65" stroke="#ffffff" stroke-width="2.5" opacity="0.6"/>
</svg>
```

## Complete Workflow Example

### 1. Information Gathering Prompt

When a user asks for a logo, gather:

```
Product Name: [name]
Industry/Category: [AI / Fintech / Design Tools / SaaS / etc.]
Core Concept: [connection / flow / security / intelligence / etc.]
Design Preference: [minimal/complex] [cold/warm] [geometric/organic]
```

### 2. Generate 6 SVG Variants

Create an HTML showcase file:

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    body { background: #0a0a0a; display: flex; flex-wrap: wrap; 
           gap: 20px; padding: 40px; font-family: monospace; }
    .variant { 
      width: 200px; text-align: center; 
      transition: transform 0.3s ease;
    }
    .variant:hover { transform: scale(1.05); }
    .variant svg { border: 1px solid #333; border-radius: 8px; }
    .label { color: #666; font-size: 11px; margin-top: 8px; }
  </style>
</head>
<body>
  <div class="variant">
    <!-- SVG Variant 1: Dot Matrix -->
    <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
      <!-- Insert dot matrix SVG content -->
    </svg>
    <div class="label">01 — Dot Matrix</div>
  </div>
  <!-- Repeat for variants 2-6 -->
</body>
</html>
```

### 3. Export Selected Logo as PNG

```python
#!/usr/bin/env python3
"""Export SVG logo to multiple PNG sizes."""

import cairosvg
import os

def export_logo(svg_path: str, output_dir: str):
    """Export logo at standard sizes."""
    
    sizes = {
        "icon_32": 32,
        "icon_64": 64, 
        "icon_128": 128,
        "logo_512": 512,
        "lo