Name: logo
Author: drn

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 .well container. Logos must work on any background.
Use <defs> for gradients, filters, and reusable elements

For circular glow halos, use radialGradient fills (not blur filters). Blur filters (feGaussianBlur) clip to a rectangular region and render as squares at small sizes. Use a radialGradient with 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 feGaussianBlur for trail/path effects where rectangular clipping is less visible
Use linearGradient for directional surfaces, radialGradient for point-light and glow
Layer elements: ambient light → structure → hero element → accents
Keep the viewBox at 0 0 200 200 for 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.svg through assets/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.svg in the project root
Add the logo to the top of the project's README, centered at 120px width:
```
<p align="center"><img src="favicon.svg" width="120"></p>
```
Insert this as the very first line, before any existing heading or content.
Clean up the logo-alt-*.svg files and logo-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.

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:

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 .well container. Logos must work on any background.
Use <defs> for gradients, filters, and reusable elements

<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 feGaussianBlur for trail/path effects where rectangular clipping is less visible
Use linearGradient for directional surfaces, radialGradient for point-light and glow
Layer elements: ambient light → structure → hero element → accents
Keep the viewBox at 0 0 200 200 for 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.svg through assets/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.svg in the project root
Add the logo to the top of the project's README, centered at 120px width:
```
<p align="center"><img src="favicon.svg" width="120"></p>
```
Insert this as the very first line, before any existing heading or content.
Clean up the logo-alt-*.svg files and logo-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.

Adoption

drn/logo

$ install --global

Security Scan Results

SKILL.md

Logo Generation

Arguments

Instructions

Step 1: Understand the Brief

Step 2: Design 6 Alternatives

Step 3: Generate Comparison Page

Step 4: Open and Present

Step 4b: Refine the Winner (if requested)

Step 5: Apply the Winner

Design Principles

Related Skills

drn/address-comments

drn/rereview-loop

drn/plannotator-visual-explainer

drn/plannotator-setup-goal

drn/logo

$ install --global

Security Scan Results

SKILL.md

Logo Generation

Arguments

Instructions

Step 1: Understand the Brief

Step 2: Design 6 Alternatives

Step 3: Generate Comparison Page

Step 4: Open and Present

Step 4b: Refine the Winner (if requested)

Step 5: Apply the Winner

Design Principles

Related Skills

drn/address-comments

drn/rereview-loop

drn/plannotator-visual-explainer

drn/plannotator-setup-goal