Logo Design Skill for Claude Code

A Claude Code plugin that guides a professional SVG logo design process -- from creative discovery through hand-coded SVG authoring, live preview, dark mode variants, and optimization.

Install

Via npm (recommended):

npx claude-code-logodesign-skill

This copies the skill into ~/.claude/skills/logo-design/, making it available in all projects.

To uninstall:

npx claude-code-logodesign-skill uninstall

Manual install from GitHub:

git clone https://github.com/pranavred/claude-code-logodesign-skill.git
mkdir -p ~/.claude/skills
cp -r claude-code-logodesign-skill/skills/logo-design ~/.claude/skills/logo-design

Usage

Start a Claude Code session and invoke the skill:

/logo-design

Or just describe what you need -- the skill activates automatically when you mention logo design, SVG creation, brand marks, or icon design.

What it does

The skill walks through a full logo design workflow:

1. Discovery

Presents curated mood-board-style choices tailored to your domain -- visual personality, emphasis, and inspiration from real brands in your industry. No open-ended questions; you pick from options like a client reviewing a designer's brief.

2. Ideation

Explores multiple metaphors across diverse structural categories:

• Typographic / wordmark
• Symbolic icon
• Abstract geometric mark
• Letterform-meets-metaphor hybrid

Each logo set guarantees variety in approach, not just variations on one idea.

3. SVG Authoring

Writes clean, hand-coded SVGs with:

• Proper viewBox and scalable layout (no hardcoded pixel sizes)
• currentColor for automatic theme inheritance
• Geometric construction from primitives and path commands
• Industry-standard canvas sizes (24x24 default, custom for logos)

4. Progressive Preview

Copies a live-reloading preview.html to your project directory. Logos appear in your browser as they're created -- no waiting for the full batch. The preview shows each logo at multiple sizes (16px, 32px, 64px), in light and dark contexts, and in favicon/navbar mockups.

Click any card to pin it to a comparison bar at the bottom.

5. Dark Mode Variants

Colored logos automatically get a -dark.svg variant with adjusted edges and contrast for dark backgrounds.

6. Optimization

SVGO pipeline, tight viewBox cropping, no editor metadata or unnecessary attributes.

Reference Library

The skill loads detailed reference docs on demand based on the task at hand:

| Topic | Reference | |-------|-----------| | Logo techniques, typography, negative space | logo-techniques.md | | Path commands, arc flags, common shapes | path-patterns.md | | Icon grids, pixel alignment, sizing | icon-design.md | | Gradients, masks, clips, filters | advanced-techniques.md | | CSS animation, keyframes, easing | animation.md | | SVGO config, sprites, optimization | optimization.md | | Boolean ops, combining SVGs, editing | editing-workflow.md | | Accessibility, browser pitfalls | accessibility-and-pitfalls.md |

Project Structure

.claude-plugin/
  plugin.json              # Plugin metadata
  marketplace.json         # Registry entry
skills/
  logo-design/
    SKILL.md               # Main skill instructions
    assets/
      preview.html         # Live preview scaffold
    references/            # On-demand reference docs
      logo-techniques.md
      path-patterns.md
      icon-design.md
      advanced-techniques.md
      animation.md
      optimization.md
      editing-workflow.md
      accessibility-and-pitfalls.md

License

MIT