logo-generator

Logo Generator

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

<HARD-GATE> You MUST complete the Context Scan and Brainstorm phases before generating any SVG code. Do NOT skip straight to logo creation even if the user provides detailed descriptions upfront — always validate understanding first. </HARD-GATE>

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

| Source | What to extract | |--------|----------------| | package.json / Cargo.toml / pyproject.toml | Project name, description, keywords | | README.md / README | Project name, tagline, description | | CLAUDE.md | Project conventions, tech stack | | tailwind.config. / theme.config. | Brand colors, font choices | | *.css (first 3 files) | CSS custom properties with color values | | public/ / assets/ / static/ | Existing logos, favicons, brand images | | .svg / .png files in root | Existing logo files | | manifest.json / site.webmanifest | App name, theme color |

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

1. Personality (same as moderate Q2 above)
2. Color palette (same as moderate Q1 above)
3. 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/skill