home / skills / phrazzld / claude-config / brand-logo

brand-logo skill

safe

This skill generates and optimizes brand logos with LLM-driven SVGs, SVGO optimization, favicon variants, and a vision-model critique loop to select the best

npx playbooks add skill phrazzld/claude-config --skill brand-logo

Review the files below or copy the command above to add this skill to your agents.

Files (1)

SKILL.md

2.7 KB

---
name: brand-logo
description: |
  Generate and optimize brand logos. LLM SVG generation with SVGO optimization,
  favicon variants, and vision-model critique loop.
argument-hint: "[style: geometric|minimal|abstract] [--prompt \"...\"]"
effort: high
---

# /brand-logo

Generate brand logos through AI with automated optimization.

## What This Does

Creates SVG logos using LLM generation, optimizes with SVGO, generates favicon
variants, and uses a vision-model critique loop to select the best candidate.

## Process

### Phase 1: Context

Read `brand.yaml` for identity, palette, and voice:
```bash
node ~/Development/brand-kit/dist/src/cli.js validate brand.yaml
```

Extract: brand name, brand_hue, primary color, category, personality traits.

### Phase 2: Generate Candidates

Generate 4 SVG logo candidates using LLM with constrained prompts:

**Prompt template:**
```
Generate a minimal SVG logo for "[brand name]".
Constraints:
- Viewbox: 64x64
- Max 3 shapes (geometric primitives only)
- Colors: only use [primary hex] and [foreground hex]
- Style: [geometric|minimal|abstract|typographic]
- No text elements (wordmark is separate)
- No gradients, no filters, no embedded images
- Clean, scalable, distinctive at 16px
```

Generate 4 variants with different styles.

### Phase 3: Critique Loop

For each candidate:
1. Save as temporary SVG
2. Convert to PNG at 512px for vision model review
3. Score on: distinctiveness, scalability, brand alignment, simplicity
4. Select top 2 candidates

### Phase 4: User Approval

Present top 2 candidates via AskUserQuestion:
- Show rendered previews
- Ask for selection or request modifications

### Phase 5: Optimize + Variants

```bash
# Optimize SVG
npx svgo --config '{"plugins":["preset-default",{"name":"removeViewBox","active":false}]}' logo.svg -o logo-optimized.svg

# Generate favicon variants
for size in 16 32 48 180 192 512; do
  npx sharp-cli -i logo-optimized.svg -o "favicon-${size}.png" resize $size $size
done

# Generate ICO (16+32+48)
# Use sharp to combine into ICO format
```

### Phase 6: Update brand.yaml

Add logo paths to `identity.logo`:
```yaml
identity:
  logo:
    svg: ./assets/logo.svg
    mark: ./assets/logo-mark.svg
    favicon: ./assets/favicon.ico
```

## Output

```
assets/
  logo.svg              # Full optimized logo
  logo-mark.svg         # Icon/mark only
  favicon-16.png
  favicon-32.png
  favicon-48.png
  favicon-180.png       # Apple touch icon
  favicon-192.png       # Android
  favicon-512.png       # PWA splash
  favicon.ico           # Multi-resolution ICO
```

## Related Skills

- `/brand-init` — Create brand.yaml (prerequisite)
- `/brand-assets` — Generate OG cards using brand tokens
- `/nano-banana` — AI image generation (complementary for non-logo assets)

Overview

This skill generates and optimizes brand logos end-to-end. It produces constrained SVG candidates with an LLM, runs a vision-model critique loop to pick the best options, and outputs optimized SVGs plus favicon variants ready for product use.

How this skill works

The skill reads brand identity tokens (name, primary color, palette, personality) and prompts an LLM to create four minimal, viewbox-constrained SVG candidates. Each SVG is rasterized for a vision-model critique that scores distinctiveness, scalability, brand alignment, and simplicity. Top candidates are presented for user approval, then optimized with SVGO and exported into favicon and ICO variants.

When to use it

When you need a quick set of cohesive logo options for a new brand or product.
When you want icon/mark variants and full favicon sets generated automatically.
When you need logos constrained for small-size readability (e.g., 16px favicons).
When you want a rapid iterate-and-critique loop driven by a vision model.

Best practices

Provide a clear brand token file with name, primary hex, foreground, and personality traits.
Constrain generation: small viewbox (64x64), max 3 shapes, no text, no gradients for clean scaling.
Validate outputs at 16px and 32px to ensure legibility before finalizing.
Keep color usage limited to brand tokens to maintain consistency across assets.
Review the top 2 candidates visually and request targeted modifications instead of full re-runs.

Example use cases

Create a minimal mark and favicon set for a startup landing page quickly.
Generate multiple geometric logo concepts to present in a stakeholder review.
Produce optimized SVG and PNG favicon assets for web and mobile apps.
Add a brand mark to an existing design system while enforcing small-size legibility.

FAQ

What file formats are produced?

Optimized SVGs for full logo and mark, PNG favicon variants (16, 32, 48, 180, 192, 512), and a multi-resolution ICO.

Can I control style and colors?

Yes. The generator uses explicit constraints in prompts (style: geometric/minimal/abstract/typographic and exact brand color hexes) so you can lock styles and color tokens.