Logo Designer

Design and iterate on logos using SVG. Generates side-by-side previews and exports to PNG at standard sizes.

Phase 1: Interview

Before generating anything, gather context and ask the user what they need.

Step 1: Gather context automatically

If the user points to a repo, URL, or existing project:

• Read the README, package.json, CSS/config files, and any existing branding
• Extract: project name, purpose, tech stack, color palette, design language, fonts
• Summarize what you found before asking questions — this avoids asking things you already know

If the user just says "design a logo" with no project context, skip to Step 2.

Step 2: Ask structured questions

Use the AskUserQuestion tool to ask these questions. Batch related questions together (up to 4 per call) and skip any question already answered by the context gathered in Step 1 or by the user's initial message.

Question 1 — Format:

question: "What format do you need?"
header: "Format"
options:
  - label: "Icon only (512x512)"
    description: "Square icon, works for favicons, app icons, social avatars"
  - label: "Wordmark only"
    description: "Text logo, 1024x512"
  - label: "Combination mark"
    description: "Icon + text together, 1024x512"

Question 2 — Style direction:

question: "What style direction?"
header: "Style"
options:
  - label: "Minimal / geometric"
    description: "Clean lines, simple shapes, modern feel"
  - label: "Playful / hand-drawn"
    description: "Friendly, casual, organic shapes"
  - label: "Bold / corporate"
    description: "Strong, professional, high contrast"
  - label: "Match existing app style"
    description: "I'll extract the design language from your project"

Question 3 — Color preferences:

question: "Any color preferences?"
header: "Colors"
options:
  - label: "Use project colors"
    description: "I'll pull colors from your existing design system"
  - label: "Surprise me"
    description: "I'll pick a palette that fits the vibe"
  - label: "I have specific colors"
    description: "I'll ask you for them"

Question 4 — Output size (only if the user mentioned a specific platform):

question: "Any specific size requirements?"
header: "Size"
options:
  - label: "Standard sizes"
    description: "16, 32, 48, 192, 512, 1024, 2048px — covers most uses"
  - label: "Custom size needed"
    description: "I'll ask for the exact dimensions"

Adapting to context

• User points to a repo: Gather context first, then ask only format + style (colors are likely known).
• User says "design a logo for X": Ask format, style, and colors together.
• User gives detailed description: Skip everything already covered, ask only what's missing.
• User says "just make something": Use sensible defaults (icon only, minimal, surprise me) and go straight to Phase 2.

Move to Phase 2 once you have enough to generate distinct concepts.

SVG Conventions

When generating SVG logos, follow these rules:

• viewBox sizing — Always use viewBox="0 0 W H" without fixed width/height attributes. Use 512x512 for icons, 1024x512 for wordmarks/combination marks.
• Self-contained — No external fonts, images, or <use> references to other files. Everything inline.
• Text handling — Use widely available system fonts (Arial, Helvetica, Georgia, etc.) or convert text to <path> elements. When using system fonts, always include a generic fallback (e.g., font-family="Helvetica, Arial, sans-serif").
• Meaningful groups — Wrap logical sections in <g> elements with descriptive IDs: id="icon", id="wordmark", id="tagline". This makes iteration easier when the user says "make the icon bigger" or "change the wordmark color".
• Flat fills by default — Use solid fill colors. Only use gradients (<linearGradient>, <radialGradient>) when the user requests them or the style clearly calls for it.
• Small-size legibility — Logos must work at 16-32px (favicons). Prefer solid fills over thin strokes, avoid fine details that disappear at small sizes, and use stroke-width of 6+ for any outlines that need to remain visible. Test this mentally: if a detail won't survive being 32px wide, simplify it.
• Clean markup — No unnecessary transforms, no empty groups, no default namespace clutter. Keep the SVG readable.

Phase 2: Explore

Generate 3-5 distinct SVG logo concepts. Each concept should take a meaningfully different creative direction — vary the icon metaphor, typography style, layout, or overall aesthetic. Do not generate minor variations of the same idea.

Parallel generation

Use the Task tool to generate all concepts in parallel. This is significantly faster than writing them sequentially.

1. Create the logos/concepts/ directory first
2. Dispatch one Task agent per concept, all in the same message so they run concurrently. Each agent should:
   • Receive the full design brief (format, style, colors, viewBox, SVG conventions)
   • Be assigned a specific creative direction (e.g., "geometric letterform", "abstract symbol", "mascot-based")
   • Write its SVG to a specific file path (e.g., logos/concepts/concept-1.svg)
   • Use subagent_type: "general-purpose" and mode: "bypassPermissions"
3. After all agents complete, generate logos/preview.html and present the results

Example dispatch pattern (all in one message):

Task 1: "Write logos/concepts/concept-1.svg — geometric letterform using [colors]. viewBox 512x512. Self-contained SVG, no external fonts. [full SVG conventions]."

Task 2: "Write logos/concepts/concept-2.svg — abstract symbol using [colors]. viewBox 512x512. Self-contained SVG, no external fonts. [full SVG conventions]."

Task 3: "Write logos/concepts/concept-3.svg — mascot-based icon using [colors]. viewBox 512x512. Self-contained SVG, no external fonts. [full SVG conventions]."

Each agent prompt must include: the full SVG conventions from this skill, the target file path, the specific creative direction, and all relevant context (project name, colors, style preferences). Agents do not share context — give each one everything it needs.

File output

logos/
├── concepts/
│   ├── concept-1.svg
│   ├── concept-2.svg
│   ├── concept-3.svg
│   └── ... (up to concept-5.svg)
└── preview.html

After all parallel agents complete:

1. Generate logos/preview.html using the preview template below
2. Tell the user to open logos/preview.html in their browser
3. Briefly describe each concept (1 sentence each) so the user can match descriptions to visuals
4. Ask: "Which direction do you want to explore? Pick a number, or describe what you like/dislike across them."

Preview HTML Template

When generating logos/preview.html, use this template. Replace {{CARDS}} with one card per SVG file. Set {{PHASE}} to "Concepts" during explore or "Iterations" during refine.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Logo Preview — {{PHASE}}</title>
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    padding: 2rem;
    transition: background-color 0.3s, color 0.3s;
  }
  body.light { background: #f5f5f5; color: #333; }
  body.dark { background: #1a1a1a; color: #eee; }
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
  }
  h1 { font-size: 1.5rem; font-weight: 600; }
  .toggle {
    padding: 0.5rem 1rem;
    border: 1px solid currentColor;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-size: 0.875rem;
  }
  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
  }
  .card {
    border: 1px solid rgba(128, 128, 128, 0.3);