Ever spent hours going back and forth with design tools trying to nail down a logo? I built a Claude Code slash command that turns logo design into a structured, repeatable process — from initial brainstorming to production-ready SVG files.
The Problem
Logo design is messy. You start with a vague idea, sketch a few concepts, pick one, then spend forever tweaking it for dark mode, light mode, favicons, mobile, and every other context your logo needs to live in.
What if you could condense that entire workflow into a single command?
What /design-logo Does
The command walks through a proven three-phase methodology:
Phase 1: Discovery & Mass Exploration
Instead of starting with one idea and hoping it works, the command generates 25 diverse SVG concepts — mixing icon-only marks, wordmarks, and combination marks across different shapes (circles, shields, hexagons) and styles (lettermarks, abstract, symbolic, typographic).
All 25 concepts get dropped into a tinker/ directory with an interactive preview gallery featuring a dark/light mode toggle. You browse them like a mood board.
Phase 2: Selection & Refinement
Pick your favorite direction. The command then creates four production variants:
- Wordmark — dark and light background versions
- Icon mark — dark and light background versions
Then it builds a comprehensive preview page with real-world mockups: navigation bars, browser frames, mobile splash screens, favicon sizes (64/32/16px), footer placements, and your brand color palette with hex codes.
This is where you see if the logo actually works in context, not just in isolation.
Phase 3: Iteration
Feedback loop. Need the icon simplified for small sizes? The command generates 3-4 icon alternatives and shows them at every relevant size (80px down to 16px) in both dark and light mode, side by side. Pick the winner, and the final preview updates automatically.
Design Principles Baked In
The command enforces good practices:
- Dark mode first — designs start on navy (#0B1120), then adapt for light
- Size-aware rendering — wordmarks at 140px+, icons at 80px and below
- Contrast checking — text must be legible in both modes
- Simplicity that scales — fewer elements survive better at small sizes
Installation
One line:
curl -fsSL https://raw.githubusercontent.com/nasrulhazim/claude-design-logo/main/install.sh | bash
Or clone it:
git clone https://github.com/nasrulhazim/claude-design-logo.git
cd claude-design-logo
bash install.sh
The installer copies the slash command to ~/.claude/commands/design-logo.md. That's it.
Usage
Open any project in Claude Code and run:
/design-logo
Claude walks you through brand discovery, asks your style preference, then starts generating. You can also jump to specific phases:
-
/design-logo refine— skip discovery, work with existing concepts -
/design-logo icons— generate icon alternatives for an existing logo
How It's Built
The entire thing is a single Markdown file (design-logo.md) that serves as a Claude Code slash command. No dependencies, no build step, no runtime. Just a well-structured prompt that Claude follows step by step.
The file structure it produces:
tinker/
├── logo-{01..25}-{name}.svg # 25 concepts
├── preview.html # Gallery preview
├── logo-dark.svg # Final wordmark (dark bg)
├── logo-light.svg # Final wordmark (light bg)
├── logo-icon-dark.svg # Final icon (dark bg)
├── logo-icon-light.svg # Final icon (light bg)
├── logo-preview.html # Comprehensive preview
├── icon-{a..d}-{name}-{dark|light}.svg # Icon alternatives
└── icon-compare.html # Icon comparison
Why This Approach Works
The key insight is volume first, then narrow. Starting with 25 concepts instead of 1 removes the pressure of getting it right on the first try. You explore the design space broadly, then focus.
The structured phases also mean you never skip important steps like testing at small sizes or checking dark/light contrast — things that are easy to forget when designing ad hoc.
Try It
The repo is public: github.com/nasrulhazim/claude-design-logo
If you use Claude Code, give /design-logo a spin on your next project. The whole process — from brand discovery to production SVGs — happens in your terminal.
Results
One of my latest works, as following:
Tips
- Give a good information about your products
- Keep it as SVG, because you always can ask for Claude to render in different sizes and for different purposes.
Top comments (2)
I had a quick peek at your installer, and it looks like if
install_filefails it'll tell you it failed, then that it succeeded. I think you need to wrap that call.i will take a look on that, thank you for the feedbacks! :)