# Logo Generator
> 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.
- Skill: `sacredvoid/logo-generator` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add sacredvoid/logo-generator`
- Raw SKILL.md: https://api.skillmd.com/api/skills/sacredvoid/logo-generator/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: sacredvoid (https://skillmd.com/u/sacredvoid)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/sacredvoid/logo-generator
---
# Logo Generator
Generate custom SVG logos through adaptive brainstorming, then export a full brand asset kit.
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.
## 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 `` elements, or use only basic geometric letterforms built from ``, ``, ``, `` primitives
- NO `` or `