@neonwatty/logo-designer-skillPublic

Claude Code plugin for SVG logo design

This plugin adds a logo design workflow to Claude Code. It starts with a short interview, generates a few SVG directions, lets you refine the chosen concept, and exports PNGs at common sizes.

85 stars•9 forks•JavaScript•Updated 7d ago

Who it's for

Builders who want Claude Code to design and refine logos from SVG concepts.

What it delivers

You can go from a rough brand idea to a polished logo without restarting the design process from scratch.

What it does

Structured logo interview

Claude asks about your brand, audience, and visual preferences before generating concepts.

SVG concept exploration

It creates 3 to 5 distinct SVG logo directions and shows them side by side.

Iterative refinement

You can adjust color, layout, and detail on the chosen concept instead of regenerating everything.

PNG export

It renders the final logo to PNG sizes including 16, 32, 48, 192, 512, 1024, and 2048 px.

Auto-detected export tools

The export step uses resvg, Inkscape, or librsvg depending on what is installed.

How to get it

1Clone once, then launch Claude Code with the plugin loaded for that session

git clone https://github.com/neonwatty/logo-designer-skill.git
claude --plugin-dir ./logo-designer-skill

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

Clone once, then launch Claude Code with the plugin loaded for that session:

git clone https://github.com/neonwatty/logo-designer-skill.git
claude --plugin-dir ./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

Bleep That Sh*t

The skill produced five initial concepts and 37 iterations for Bleep That Sh*t! The four images below show three of those initial concepts alongside the finished design.

Concept 1	Concept 2	Concept 3	Finished design

Visit Bleep That Sh*t!

The skill was also used to design the logo for BugDrop, a GitHub feedback widget.

Found a logo you like? Fine-tune it with your agent

Try out our shared visual canvas to adjust shape, size, color, and spacing together - without constantly regenerating the whole logo.

Fine-tune your logo in Lineage Logo →

License

MIT

Files in the repo

Repository payload•14 top-level entries

.claude-plugin— Plugin manifest for Claude Code
.github— GitHub workflows and templates
docs— Documentation
examples— Worked examples
scripts— Helper scripts
site— 4 items
skills— The skills, one folder each
tests— Tests
.gitignore
.markdownlint-cli2.jsonc
LICENSE— License
package-lock.json
package.json— Node package: install with npm
README.md— The README

Discussion (0)

Ask about usage, or say what you built with it

No comments yet. Be the first to say what this is good for.

More plugins

bergside/design-md-chromePlugins

Chrome extension to extract styles from any website and generate DESIGN.md files and design skills for AI based on TypeUI

2.8k

nexu-io/codex-slidesPlugins

🎨 Open-source AI slide studio inside Codex: image-native decks, every slide a full visual canvas. ⚡ 10+ high-quality slides in ~4–5 minutes — Fast mode renders every page in parallel. 🔍 Watch the whole chain live: research → outline → style → render → edit → present → export PDF/PPTX. 🖥️ Browser-first · zero API keys · durable projects.

886

Owl-Listener/

designer-skills

Owl-Listener/designer-skillsPlugins

Designer Skills Collection: agentic skills, commands, and plugins for design — from research to systems, UI, interaction, and delivery.

2.6k

plausibleventures/latticePlugins

Isometric games made easy — an agentic game kit. 12 agent skills over 9 zero-dependency TypeScript packages. Type one sentence, get a playable game.

AlpacaLabsLLC/

skills-for-architects

AlpacaLabsLLC/skills-for-architectsPlugins

Claude Code skills for architecture, real estate, and workplace strategy. Type /skill-name and go.

351

Cassette-Editor/oh-my-cassettePlugins

你的随身 AI 剪辑搭档 | Pocket AI co-editor for video montage — AI video editing plugin & MCP server for Claude Code, Codex, Hermes & OpenCode

132