Imported from reason-machines/trending-skills (skills/logo-generator-skill/SKILL.md). Install upstream with npx skills add reason-machines/trending-skills --skill logo-generator-skill. Copyright stays with the author.

---
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

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

Method 3: Manual

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

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

Post-Installation Setup

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

# 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

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

# 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

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

# 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 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 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 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:

<!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

#!/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,
        "logo_1024": 1024,
        "logo_2048": 2048,
    }
    
    os.makedirs(output_dir, exist_ok=True)
    
    for name, size in sizes.items():
        output_path = os.path.join(output_dir, f"{name}.png")
        cairosvg.svg2png(
            url=svg_path,
            write_to=output_path,
            output_width=size,
            output_height=size
        )
        print(f"✓ Exported {name}.png ({size}x{size})")

if __name__ == "__main__":
    import sys
    export_logo(sys.argv[1], sys.argv[2] if len(sys.argv) > 2 else "./exports")

4. Generate Showcase Images

#!/usr/bin/env python3
"""Generate all showcase images for a logo."""

import os
import json
from pathlib import Path
from generate_showcase import generate_showcase

STYLE_SELECTIONS = {
    "ai": ["void", "fluid", "morning", "swiss"],
    "fintech": ["void", "frosted", "clinical", "swiss"],
    "design": ["editorial", "iridescent", "spotlight", "swiss"],
    "saas": ["frosted", "ui_container", "morning", "swiss"],
    "default": ["void", "frosted", "editorial", "swiss"]
}

def generate_all_showcases(logo_png: str, product_type: str, output_dir: str):
    styles = STYLE_SELECTIONS.get(product_type, STYLE_SELECTIONS["default"])
    
    Path(output_dir).mkdir(parents=True, exist_ok=True)
    results = []
    
    for style in styles:
        output_path = os.path.join(output_dir, f"showcase_{style}.png")
        try:
            generate_showcase(logo_png, style, output_path)
            results.append({"style": style, "path": output_path, "status": "success"})
            print(f"✓ Generated {style} showcase")
        except Exception as e:
            results.append({"style": style, "error": str(e), "status": "failed"})
            print(f"✗ Failed {style}: {e}")
    
    # Save manifest
    manifest_path = os.path.join(output_dir, "manifest.json")
    with open(manifest_path, "w") as f:
        json.dump(results, f, indent=2)
    
    return results

if __name__ == "__main__":
    import sys
    generate_all_showcases(
        logo_png=sys.argv[1],
        product_type=sys.argv[2] if len(sys.argv) > 2 else "default",
        output_dir=sys.argv[3] if len(sys.argv) > 3 else "./showcases"
    )

Design Principles to Follow

When generating SVG logos, always apply:

Extreme Simplicity — Maximum 1-2 core visual elements
Generous Negative Space — At least 40-50% empty canvas
Precise Line Weights — Use 2.5px–4px strokes only
Single Focal Point — One clear visual anchor
Visual Tension — Intentional asymmetry (not centered-everything)
Restraint — Every element must justify its presence

<!-- ✅ Good: Simple, focused, negative space -->
<svg viewBox="0 0 200 200">
  <rect width="200" height="200" fill="#0a0a0a"/>
  <circle cx="100" cy="100" r="35" fill="none" stroke="#fff" stroke-width="3"/>
  <circle cx="118" cy="85" r="6" fill="#fff"/>
</svg>

<!-- ❌ Bad: Too many elements, no focal point -->
<svg viewBox="0 0 200 200">
  <rect width="200" height="200" fill="#0a0a0a"/>
  <circle cx="50" cy="50" r="20" fill="#fff"/>
  <circle cx="150" cy="50" r="20" fill="#fff"/>
  <rect x="40" y="100" width="120" height="40" fill="#fff"/>
  <line x1="20" y1="160" x2="180" y2="160" stroke="#fff"/>
  <text x="100" y="190" fill="#fff">BRAND</text>
</svg>

Background Style Reference

Style	Key	Aesthetic	Best For
The Void	`void`	Pure black + silver noise	Hardcore tech
Frosted Horizon	`frosted`	Titanium gray + texture	Premium products
Fluid Abyss	`fluid`	Deep purple + fluid FX	AI-native
Studio Spotlight	`spotlight`	Carbon + editorial light	Magazine quality
Analog Liquid	`analog`	Metallic shimmer	Creative brands
LED Matrix	`led`	Digital retro glow	Cyberpunk
Editorial Paper	`editorial`	Off-white paper	Humanistic
Iridescent Frost	`iridescent`	Silver + holographic	Tech hardware
Morning Aura	`morning`	Warm ivory + pastels	Approachable AI
Clinical Studio	`clinical`	Pure white + shadows	Algorithm-driven
UI Container	`ui_container`	Frosted glass frame	SaaS platforms
Swiss Flat	`swiss`	Solid color, zero FX	Timeless authority

Triggering the Skill in Claude Code

/logo-generator

Or naturally:

Generate a logo for my fintech startup called "Meridian" — focused on clarity and trust

Create 6 logo variants for "NeuralPath" — an AI research tool, geometric and minimal

Take the logo I selected and generate showcase images in void, frosted, morning, and swiss styles

Troubleshooting

`cairosvg` installation fails

# macOS
brew install cairo pango gdk-pixbuf libffi
pip install cairosvg

# Ubuntu/Debian
sudo apt-get install libcairo2-dev libpango1.0-dev libgdk-pixbuf2.0-dev
pip install cairosvg

# Windows (use conda)
conda install -c conda-forge cairosvg

Gemini API errors

# Test API key
python -c "
import os
from dotenv import load_dotenv
from google import genai
load_dotenv()
client = genai.Client(api_key=os.getenv('GEMINI_API_KEY'))
print('API key valid:', bool(client))
"

Skill not recognized in Claude Code

# Verify installation
ls ~/.claude/skills/logo-generator/
# Should show: SKILL.md README.md scripts/ requirements.txt .env

# Check SKILL.md exists
cat ~/.claude/skills/logo-generator/SKILL.md | head -5

SVG renders as blank PNG

Ensure SVG has explicit width/height or viewBox attribute
Check that xmlns="http://www.w3.org/2000/svg" is present
Avoid external font references in SVG

<!-- Always include these attributes -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200">

File Structure

~/.claude/skills/logo-generator/
├── SKILL.md                     # Skill activation definition
├── README.md                    # Full documentation
├── requirements.txt             # google-genai, cairosvg, Pillow, python-dotenv
├── .env.example                 # GEMINI_API_KEY template
├── .env                         # Your actual API key (gitignored)
├── scripts/
│   ├── svg_to_png.py           # SVG → PNG converter
│   └── generate_showcase.py    # Gemini showcase generator
├── references/
│   ├── design_patterns.md      # Design pattern library
│   ├── background_styles.md    # Background specifications
│   └── webgl_backgrounds.md    # WebGL dynamic backgrounds
└── assets/
    ├── showcase_template.html  # HTML presentation template
    └── background_library.html # Interactive WebGL backgrounds

logo-generator-skill

About

Method 2: Git Clone

Method 3: Manual

Post-Installation Setup

Configuration

`.env` file

Key Scripts

SVG to PNG Conversion

Generate Showcase Images

SVG Logo Design Patterns

Dot Matrix Pattern

Line System Pattern

Mixed Composition Pattern

Complete Workflow Example

1. Information Gathering Prompt

2. Generate 6 SVG Variants

3. Export Selected Logo as PNG

4. Generate Showcase Images

Design Principles to Follow

Background Style Reference

Triggering the Skill in Claude Code

Troubleshooting

`cairosvg` installation fails

Gemini API errors

Skill not recognized in Claude Code

SVG renders as blank PNG

File Structure

Use it

Manifest

Reviews

About

Method 2: Git Clone

Method 3: Manual

Post-Installation Setup

Configuration

.env file

Key Scripts

SVG to PNG Conversion

Generate Showcase Images

SVG Logo Design Patterns

Dot Matrix Pattern

Line System Pattern

Mixed Composition Pattern

Complete Workflow Example

1. Information Gathering Prompt

2. Generate 6 SVG Variants

3. Export Selected Logo as PNG

4. Generate Showcase Images

Design Principles to Follow

Background Style Reference

Triggering the Skill in Claude Code

Troubleshooting

cairosvg installation fails

Gemini API errors

Skill not recognized in Claude Code

SVG renders as blank PNG

File Structure

Use it

Manifest

Reviews

`.env` file

`cairosvg` installation fails