Generate custom logos with adaptive brainstorming and full brand kit export. Scans project context (README, package.json, CSS, existing assets) to inform design. Outputs favicons (16-512 + ICO), social images (OG, Twitter), dark/light/mono SVG variants, and an HTML preview.
Scanned 5/27/2026
Install via CLI
Skills Directoryopenskills install sacredvoid/skillkit---
name: logo-generator
description: "Generate custom logos with adaptive brainstorming and full brand kit export. Scans project context (README, package.json, CSS, existing assets) to inform design. Outputs favicons (16-512 + ICO), social images (OG, Twitter), dark/light/mono SVG variants, and an HTML preview."
argument-hint: "[brand description or style hints]"
disable-model-invocation: true
allowed-tools: Bash, Read, Write, Edit, Glob, Grep, AskUserQuestion, TaskCreate, TaskUpdate
---
# 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:
```bash
[ -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
```bash
# 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`:
```bash
# 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:
```bash
# 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
| Stage | Flag | What it generates |
|-------|------|-------------------|
| SVGs | `--stage svgs` | logo.svg, logo-dark.svg, logo-mono.svg |
| Favicons | `--stage favicons` | 7 PNGs (16-512) + apple-touch-icon + favicon.ico |
| Social | `--stage social` | og-image.png (1200x630), twitter-card.png (1200x600) |
| Meta | `--stage meta` | site.webmanifest |
| Preview | `--stage preview` | logo-preview.html |
| All | `--stage all` (default) | Everything above in one call |
### 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
No comments yet. Be the first to comment!
