npx claudepluginhub neonwatty/logo-designer-skillComponent Overview
Component Details
README
Logo Designer Skill
A Claude Code plugin for iterative logo design using SVG. Guides you through a structured interview, exploration, and refinement process to produce polished logos exported as PNGs.
Read the full walkthrough: Claude Code SVG Logo Design: A Reusable Skill for Generating Logos — how the skill was built and how to use it end-to-end.
Installation
claude plugin add neonwatty/logo-designer-skill
Usage
The skill activates automatically when you ask Claude to design a logo. Try prompts like:
- "Create a logo for my project"
- "Design a logo for Moonbeam"
- "Make me a logo"
Workflow
The skill walks you through four phases:
- Interview -- Claude asks about your brand, audience, and aesthetic preferences.
- Explore -- Generates 3-5 distinct SVG concepts displayed in a side-by-side preview.
- Refine -- Iterate on your chosen direction with adjustments to color, layout, and detail.
- Export -- Renders final PNGs at standard sizes: 16, 32, 48, 192, 512, 1024, and 2048 px.
PNG Export Prerequisites
The export step requires one of the following SVG-to-PNG tools. The skill auto-detects which is available.
| Tool | Install command |
|---|---|
| resvg (recommended) | npm install -g @aspect-build/resvg |
| Inkscape | brew install inkscape |
| librsvg | brew install librsvg |
Examples
Live Showcase: Bleep That Sh*t!
A complete, real-world example showing the skill in action: 5 initial concepts, 37 iterations across 10 design phases, ending with a polished comic book-styled logo — all in ~10 minutes of conversation.
The skill was also used to design the logo for BugDrop, a GitHub feedback widget.
License
MIT
Similar Plugins
logo-design
PDCAサイクルでロゴを反復改善するスキル。6つの専門エージェント+品質バリデーターがチームで議論・SVG生成・品質検証を行う。ブランドエッセンス連携、視覚的意味の具体性チェック、非対称デザイン原則を含む
Help us improve
Share bugs, ideas, or general feedback.