Logo Generator

Logo Generator

Generate custom SVG logos through adaptive brainstorming, then export a full brand asset kit.

First-Run Setup

Check if sharp is installed in the skill's scripts directory:

[ -d ~/.claude/skills/logo-generator/scripts/node_modules/sharp ] || (cd ~/.claude/skills/logo-generator/scripts && npm install)

Run this silently at the start of every invocation. If it fails, warn the user and continue — the script has a macOS qlmanage+sips fallback.

Phase 1: Context Scan

Automatically scan the current working directory for branding signals. Do NOT ask the user for any of this — just read it.

What to scan

How to scan

# Quick scan — run these and read results
ls package.json README.md CLAUDE.md tailwind.config.* manifest.json site.webmanifest 2>/dev/null

Use Glob for: **/*.svg, **/favicon*, **/logo* Use Grep for: --theme-color, --primary, --brand, color: in CSS files

Build a context summary

After scanning, build an internal summary:

CONTEXT:
  name: [found or "unknown"]
  description: [found or "none"]
  colors_found: [list of hex codes with where they came from]
  existing_logos: [paths to any existing logo/favicon files]
  tech_stack: [detected from config files]
  has_branding: [yes/partial/no]

Phase 2: Adaptive Brainstorm

Adjust depth based on context richness and any arguments ($ARGUMENTS) provided.

Rich context (name + colors + description all found)

Skip most questions. Present what you found:

"I scanned your project and found: [name], described as [description]. I see brand colors [colors] in your [source]. You already have [existing assets].

Based on this, here are 3 logo concepts..."

Jump directly to Phase 3 (Concept Proposals) unless the user provided --refresh or --rebrand in arguments, in which case ask what they want to change.

Moderate context (name found, missing colors or description)

Ask 2-3 targeted questions to fill gaps. Use AskUserQuestion with options:

Question 1 (if no colors found):

What color palette fits your brand?
  A) Professional blues/grays — trust, reliability
  B) Bold warm tones (red, orange, gold) — energy, action
  C) Nature greens/earth tones — growth, sustainability
  D) Purple/violet — creativity, premium
  E) Monochrome — minimal, modern
  F) I have specific colors in mind → [ask for hex codes]

Question 2 (if no description/personality found):

What personality should the logo convey?
  A) Technical/developer-focused — clean, precise
  B) Playful/friendly — approachable, fun
  C) Premium/luxury — refined, elegant
  D) Bold/disruptive — strong, attention-grabbing
  E) Organic/natural — flowing, warm

Bare context (no name, no colors, no description)

Full guided session. Ask these one at a time:

1. Brand name — "What's the name for this logo?"
2. What it does — "In one sentence, what does [name] do?"
3. Logo type preference:

   What type of logo?
     A) Icon/symbol only — a standalone mark (like Apple, Nike)
     B) Lettermark — stylized initials (like IBM, HBO)
     C) Wordmark — the full name styled (like Google, Coca-Cola)
     D) Combination — icon + text together (like Slack, Spotify)
     E) Surprise me — pick what fits best
   

4. Personality (same as moderate Q2 above)
5. Color palette (same as moderate Q1 above)
6. Any specific imagery? — "Any symbols, shapes, or imagery you associate with [name]? (or 'none, surprise me')"

Argument hints

If $ARGUMENTS contains descriptive text (not flags), treat it as style/brand hints that can skip some questions. For example:

• /logo-generator modern fintech app called PayFlow → name=PayFlow, personality=technical/premium, skip those questions
• /logo-generator --refresh → scan existing logo, propose updates
• /logo-generator → full scan + adaptive questions

Phase 3: Concept Proposals

Present 2-3 distinct logo concepts as text descriptions. Each concept should include:

### Concept [N]: [Name]

**Style:** [geometric / organic / typographic / abstract / etc.]
**Composition:** [what shapes/elements, how they're arranged]
**Colors:** [specific hex codes and where each is used]
**Rationale:** [why this works for the brand]
**Scalability note:** [how it holds up at 16x16]

Ask the user to pick one, mix elements, or request new directions.

Phase 4: SVG Generation

Once a concept is approved, generate production SVGs.

SVG Guidelines — CRITICAL

Scalability rules (the logo MUST work at 16x16):

• Keep shapes simple — avoid thin lines, tiny details, complex gradients
• Use a square-friendly composition (will be cropped to square for favicons)
• Minimum stroke width: 2px at native viewBox scale
• Test mentally: "Would this be recognizable as a 16px blob?"

Technical rules:

• ViewBox: 0 0 512 512 (square, high-res base)
• NO external fonts — convert all text to <path> elements, or use only basic geometric letterforms built from <rect>, <circle>, <polygon>, <path> primitives
• NO <image> or <use> elements referencing external files
• NO filters that degrade at small sizes (<feGaussianBlur>, <feDropShadow>)
• Use <defs> for reusable gradients/patterns
• All colors as hex values, never currentColor or CSS variables
• Clean, indented, human-readable SVG code

Generate 3 variants:

1. logo.svg — Primary logo, intended for light backgrounds
2. logo-dark.svg — Optimized for dark backgrounds (not just inverted — thoughtfully adjusted)
3. logo-mono.svg — Single color (#000000), suitable for watermarks/stamps

Write all three SVGs to a temp location first (e.g., /tmp/logo-gen/).

Phase 5: Preview

Generate a preview using staged generation with task tracking so the user sees progress.

Staged preview generation

Use --stage to run the script in batches and TaskCreate/TaskUpdate to show progress:

1. TaskCreate "Copy SVG variants"       (activeForm: "Copying SVG variants")
2. TaskCreate "Generate favicon PNGs"   (activeForm: "Generating favicons")
3. TaskCreate "Generate preview HTML"   (activeForm: "Generating preview page")

Then for each task, set in_progress, run the stage, set completed:

# Stage 1: SVGs
node ~/.claude/skills/logo-generator/scripts/generate-assets.js \
  --svg /tmp/logo-gen/logo.svg \
  --svg-dark /tmp/logo-gen/logo-dark.svg \
  --svg-mono /tmp/logo-gen/logo-mono.svg \
  --output /tmp/logo-gen/preview \
  --stage svgs \
  --brand-name "[name]" \
  --primary-color "[hex]" \
  --bg-color "[hex]"

# Stage 2: Favicons
node ~/.claude/skills/logo-generator/scripts/generate-assets.js \
  --svg /tmp/logo-gen/logo.svg \
  --output /tmp/logo-gen/preview \
  --stage favicons

# Stage 3: Preview HTML (needs meta stage too)
node ~/.claude/skills/logo-generator/scripts/generate-assets.js \
  --svg /tmp/logo-gen/logo.svg \
  --svg-dark /tmp/logo-gen/logo-dark.svg \
  --svg-mono /tmp/logo-gen/logo-mono.svg \
  --output /tmp/logo-gen/preview \
  --stage meta \
  --brand-name "[name]" \
  --primary-color "[hex]"

node ~/.claude/skills/logo-generator/scripts/generate-assets.js \
  --svg /tmp/logo-gen/logo.svg \
  --svg-dark /tmp/logo-gen/logo-dark.svg \
  --svg-mono /tmp/logo-gen/logo-mono.svg \
  --output /tmp/logo-gen/preview \
  --stage preview \
  --brand-name "[name]" \
  --primary-color "[hex]" \
  --bg-color "[hex]"

Tell the user:

"Preview generated. Open /tmp/logo-gen/preview/logo-preview.html in your browser to see all variants and sizes. Let me know if you'd like any changes, or say 'export' to generate the full asset kit."

Iteration loop

If the user requests changes:

• Regenerate the affected SVG variant(s)
• Re-run only the relevant stages (svgs + preview)
• Repeat until approved

Phase 6: Export

Once approved, run the full export using staged generation with task tracking.

Target directory detection

Determine output path in this order:

1. If ./public/ exists → use ./public/
2. If ./assets/ exists → use ./assets/brand/
3. If ./static/ exists → use ./static/
4. Otherwise → create ./public/

Staged export with task tracking

Create tasks upfront so the user sees the full plan, then execute each stage:

TaskCreate "Copy SVG variants to [target]"       (activeForm: "Copying SVG variants")
TaskCreate "Generate favicon PNGs + ICO"          (activeForm: "Generating favicons")
TaskCreate "Generate social images (OG + Twitter)" (activeForm: "Generating social images")
TaskCreate "Generate PWA manifest"                 (activeForm: "Generating manifest")
TaskCreate "Generate preview HTML"                 (activeForm: "Generating preview page")

Run each stage, updating tasks as you go:

# Stage: svgs
node ~/.claude/skills/logo-generator/scripts/generate-assets.js \
  --svg /tmp/logo-gen/logo.svg \
  --svg-dark /tmp/logo-gen/logo-dark.svg \
  --svg-mono /tmp/logo-gen/logo-mono.svg \
  --output "[target_dir]" \
  --stage svgs \
  --brand-name "[name]" --primary-color "[hex]" --bg-color "[hex]"

# Stage: favicons
node ~/.claude/skills/logo-generator/scripts/generate-assets.js \
  --svg /tmp/logo-gen/logo.svg \
  --output "[target_dir]" \
  --stage favicons

# Stage: social
node ~/.claude/skills/logo-generator/scripts/generate-assets.js \
  --svg /tmp/logo-gen/logo.svg \
  --output "[target_dir]" \
  --stage social \
  --bg-color "[hex]"

# Stage: meta
node ~/.claude/skills/logo-generator/scripts/generate-assets.js \
  --svg /tmp/logo-gen/logo.svg \
  --output "[target_dir]" \
  --stage meta \
  --brand-name "[name]" --primary-color "[hex]"

# Stage: preview
node ~/.claude/skills/logo-generator/scripts/generate-assets.js \
  --svg /tmp/logo-gen/logo.svg \
  --svg-dark /tmp/logo-gen/logo-dark.svg \
  --svg-mono /tmp/logo-gen/logo-mono.svg \
  --output "[target_dir]" \
  --stage preview \
  --brand-name "[name]" --primary-color "[hex]" --bg-color "[hex]"

Available stages

What gets generated

[target_dir]/
├── logo.svg                    # Primary SVG
├── logo-dark.svg               # Dark background variant
├── logo-mono.svg               # Monochrome variant
├── favicon.ico                 # Multi-size ICO (16, 32, 48)
├── favicon-16x16.png
├── favicon-32x32.png
├── favicon-48x48.png
├── favicon-64x64.png
├── favicon-192x192.png
├── favicon-512x512.png
├── apple-touch-icon.png        # 180x180
├── og-image.png                # 1200x630 (logo centered on brand color bg)
├── twitter-card.png            # 1200x600
├── site.webmanifest            # PWA manifest
└── logo-preview.html           # Visual preview of everything

After export

Print a summary:

✓ Brand kit exported to [target_dir]/

Files generated:
  3 SVG variants (light, dark, mono)
  7 favicon PNGs (16-512) + ICO
  1 Apple touch icon
  2 social images (OG + Twitter card)
  1 PWA manifest
  1 HTML preview

Add to your HTML <head>:

  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
  <link rel="manifest" href="/site.webmanifest">
  <meta property="og:image" content="/og-image.png">
  <meta name="twitter:image" content="/twitter-card.png">

Error Handling

• sharp not installed + qlmanage not available: Tell the user to run cd ~/.claude/skills/logo-generator/scripts && npm install
• SVG rendering fails: Check SVG validity, fix syntax, retry
• Output directory not writable: Ask user for alternative path
• User wants to restart: Jump back to Phase 2, preserve context scan results