name: logo description: Generate SVG logo alternatives with side-by-side comparison. Use when creating logos, branding, or project icons.
Logo Generation
Generate SVG logo alternatives for a project, then present them in a side-by-side comparison page for review.
Arguments
$ARGUMENTS- Description of the logo concept, style direction, or project name
Instructions
You are generating SVG logo alternatives and a visual comparison page. Your goal is to produce 6 distinct design directions so the user can pick and refine.
Step 1: Understand the Brief
Determine what the logo should communicate:
- Project name — What is the logo for?
- Core concept — What metaphor or visual idea? (e.g., "forge + AI agents", "speed + reliability")
- Style direction — Modern/minimal, geometric, organic, playful, corporate?
- Color palette — Dark background? Brand colors? Warm/cool?
- Shape — Circle, rounded rect, hexagon, freeform?
- Existing logo — Is there a current logo to improve on? Read it first.
If unclear, ask the user before generating.
Step 2: Design 6 Alternatives
Create 6 meaningfully different SVG logo files. Each should explore a distinct visual direction:
| # | Direction | Color | What to Try |
|---|---|---|---|
| 1 | Minimal | Amber/Gold | Strip to the essential mark. One shape, one gradient. App icon clean. |
| 2 | Geometric | Cyan/Teal | Low-poly, faceted, angular. Crystal/tech aesthetic. |
| 3 | Organic | Violet/Purple | Flowing curves, natural forms. Warmth and craft. |
| 4 | Typographic | Emerald/Green | Lettermark or monogram. The initial letter as hero. |
| 5 | Conceptual | Rose/Pink | Symbolic/metaphorical. Combine two ideas into one mark (e.g., flame + orbits). |
| 6 | Sci-fi | Blue/Indigo | Orbital, atomic, or space-inspired. Tech gravitas. |
CRITICAL: No text in logos. Never use <text> elements, letters, words, or typographic marks in the SVG logos. Every logo must be purely symbolic — shapes, icons, and abstract marks only. Text/wordmarks are added separately by the user if needed.
SVG quality standards:
- Always include explicit
width="200" height="200"on the<svg>element (required for<img>tag rendering) - Transparent background — do not include a background
<rect>. The comparison page provides the dark background via the.wellcontainer. Logos must work on any background. - Use
<defs>for gradients, filters, and reusable elements - For circular glow halos, use
radialGradientfills (not blur filters). Blur filters (feGaussianBlur) clip to a rectangular region and render as squares at small sizes. Use aradialGradientwith opacity tapering to 0 at the edge, applied to a circle larger than the core element. Example:<radialGradient id="halo" cx="50%" cy="50%" r="50%"> <stop offset="0%" stop-color="#COLOR" stop-opacity="0.6"/> <stop offset="40%" stop-color="#COLOR" stop-opacity="0.15"/> <stop offset="100%" stop-color="#COLOR" stop-opacity="0"/> </radialGradient> <circle cx="X" cy="Y" r="20" fill="url(#halo)"/> <circle cx="X" cy="Y" r="5" fill="#COLOR" opacity="0.9"/> - Reserve
feGaussianBlurfor trail/path effects where rectangular clipping is less visible - Use
linearGradientfor directional surfaces,radialGradientfor point-light and glow - Layer elements: ambient light → structure → hero element → accents
- Keep the viewBox at
0 0 200 200for the main logo - Center precisely: Calculate the bounding box of all visible elements and ensure its center is at (100, 100). For asymmetric layouts (e.g., 3 nodes around a hub), offset the composition so the bounding box center — not just the primary element — sits at (100, 100). Verify: (minX + maxX) / 2 ≈ 100, (minY + maxY) / 2 ≈ 100.
Save to the project's assets/ directory:
assets/logo-alt-1.svgthroughassets/logo-alt-6.svg- If there's an existing logo, include it as the "Current" option
Step 3: Generate Comparison Page
Create assets/logo-compare.html — a dark-themed grid page showing all options side-by-side.
Template:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>[Project] Logo Alternatives</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #111; color: #ccc; font-family: -apple-system, BlinkMacSystemFont, sans-serif; padding: 40px; }
h1 { text-align: center; color: #F59E0B; margin-bottom: 12px; font-size: 28px; }
.subtitle { text-align: center; color: #666; margin-bottom: 48px; font-size: 14px; }
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
max-width: 1000px;
margin: 0 auto;
}
.card {
display: flex;
flex-direction: column;
align-items: center;
background: #1a1a1a;
border-radius: 16px;
padding: 32px 24px 24px;
border: 1px solid #2a2a2a;
transition: border-color 0.2s;
}
.card:hover { border-color: #F59E0B44; }
.well { display: flex; align-items: center; justify-content: center; width: 160px; height: 160px; margin: 0 auto 16px; background: #111; border-radius: 12px; }
.well img { width: 140px; height: 140px; }
.card h3 { color: #F59E0B; font-size: 16px; margin-bottom: 6px; }
.card p { text-align: center; color: #888; font-size: 12px; line-height: 1.5; }
.label { display: inline-block; background: #F59E0B22; color: #F59E0B; padding: 2px 10px; border-radius: 12px; font-size: 11px; margin-bottom: 12px; }
.current .label { background: #22c55e22; color: #22c55e; }
</style>
</head>
<body>
<h1>[Project] Logo Alternatives</h1>
<p class="subtitle">6 design directions. Click any logo to open full-size SVG.</p>
<div class="grid">
<!-- If there is an existing logo, include it as the first card with class="card current" and label CURRENT -->
<div class="card">
<span class="label">ALT 1</span>
<div class="well"><a href="logo-alt-1.svg" target="_blank"><img src="logo-alt-1.svg" alt="Alt 1"></a></div>
<h3>[Short Name]</h3>
<p>[1-line description]</p>
</div>
<!-- ... repeat for ALT 2 through ALT 6 ... -->
</div>
</body>
</html>
Step 4: Open and Present
- Open the comparison HTML in the browser:
open assets/logo-compare.html - Present a summary table of all options with name and concept
- Offer to refine, mix elements, or apply the chosen design
Step 4b: Refine the Winner (if requested)
When the user wants to vary a single element (e.g., center color, accent style):
- Create 4-5 variants that ONLY change the requested element
- Name each variant file descriptively (e.g.,
center-1-white.svg,center-2-gold.svg) - Generate a comparison page (
assets/<element>-compare.html) using the same flexbox grid template - Open it for the user to pick
- Apply the chosen variant to the main logo and clean up variant files
Step 5: Apply the Winner
When the user picks a logo:
- Copy it to
favicon.svgin the project root - Add the logo to the top of the project's README, centered at 120px width:
Insert this as the very first line, before any existing heading or content.<p align="center"><img src="favicon.svg" width="120"></p> - Clean up the
logo-alt-*.svgfiles andlogo-compare.html
Design Principles
- Distinct directions — Each alternative should be recognizably different at a glance, not minor tweaks
- SVG-native — Use gradients, filters, and transforms. No raster effects.
- Scale well — Design should read clearly at 32px (favicon) and 200px (logo)
- Dark-first — Assume dark backgrounds. Light elements should glow.
- Layered depth — Background → ambient glow → structure → hero → sparkle/accent
- Name each option — Short, memorable names make discussion easier ("Orbital Forge" vs "Alt 5")
- Unique palettes — Each alternative MUST use a different color scheme. Never repeat the same palette across options.