/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:

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:

• Save as temporary SVG

• Convert to PNG at 512px for vision model review

• Score on: distinctiveness, scalability, brand alignment, simplicity

• 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

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 :

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)