logo-designer-skill

Iterative logo design for Claude Code. Describe your project, explore concepts, refine through conversation, export production PNGs — all without leaving the terminal.

5
Initial Concepts
37
Iterations
10
Design Phases
~10
Minutes
Bleep That Sh*t! final logo

Case Study: Bleep That Sh*t!

An in-browser audio/video censorship tool with a comic book aesthetic. Here's the full iteration journey from first concept to final logo.

1

Initial Concepts

Five distinct directions were explored: a censored speech bubble, an audio waveform with a censor bar, a megaphone, pixel block text, and an asterisk burst. Each captured a different facet of the app's personality — playful censorship meets audio processing.

Concept 1: Speech Bubble
1 · Speech Bubble
Concept 2: Waveform
2 · Waveform
Concept 3: Megaphone
3 · Megaphone
Concept 4: Pixel Block
4 · Pixel Block
Concept 5: Asterisk
5 · Asterisk
User picks favorites
2

Variations on Favorites

Concepts 1 (speech bubble) and 2 (waveform) resonated most. Three variations of each were generated to test different color palettes, proportions, and levels of detail before committing to a direction.

Concept 1a
1a · Speech variation
Concept 1b
1b · Speech variation
Concept 1c
1c · Speech variation
Concept 2a
2a · Waveform variation
Concept 2b
2b · Waveform variation
Concept 2c
2c · Waveform variation
Waveform direction wins
3

Converging on Waveform + Censor

The waveform direction won out. Iterations 1 through 6 explored making the waveform bars more abstract, experimenting with a central censor block overlaying the bars, and adjusting the overall balance between audio visualization and censorship metaphor.

Iteration 1
Iter 1
Iteration 2
Iter 2
Iteration 3
Iter 3
Iteration 4
Iter 4
Iteration 5
Iter 5
Iteration 6
Iter 6
Needs to work at small sizes
4

Favicon Visibility

The design needed to read well at tiny sizes. Iterations 7 through 10 focused on simplifying the shapes, increasing bar thickness, and boosting contrast so the logo would remain recognizable as a browser favicon.

Iteration 7
Iter 7
Iteration 8
Iter 8
Iteration 9
Iter 9
Iteration 10
Iter 10
Red block reads best at favicon size
5

Red Block Variations

With the waveform + censor block concept established, iterations 11 through 16 explored different treatments of the red censorship block — its size relative to the bars, corner radius, positioning, and whether the bars should pass behind or stop at the block edge.

Iteration 11
Iter 11
Iteration 12
Iter 12
Iteration 13
Iter 13
Iteration 14
Iter 14
Iteration 15
Iter 15
Iteration 16
Iter 16
Creative pivot — try something new
6

Fresh Directions — Discovering the HAL Eye

A creative pivot. The red block was replaced with a glowing HAL 9000-style eye at the center of the waveform bars, introducing a "watching and listening" personality. Iterations 17 through 22 explored this new focal element with different eye sizes, glow intensities, and bar arrangements.

Iteration 17
Iter 17
Iteration 18
Iter 18
Iteration 19
Iter 19
Iteration 20
Iter 20
Iteration 21
Iter 21
Iteration 22
Iter 22
HAL eye concept locks in
7

Refining the HAL Eye

With the eye concept locked in, iterations 23 through 27 refined the details: centering the eye precisely, adding a radial gradient for depth, introducing a metallic bezel ring, and tuning the highlight reflections to give it a glassy, dimensional feel.

Iteration 23
Iter 23
Iteration 24
Iter 24
Iteration 25
Iter 25
Iteration 26
Iter 26
Iteration 27
Iter 27
Match the app's comic book aesthetic
8

Comic Book Styling

The app has a playful, irreverent personality, so iterations 28 through 32 applied comic book aesthetics: bold dark outlines, halftone dot patterns, saturated colors, and a drop shadow offset to match the app's existing visual language.

Iteration 28
Iter 28
Iteration 29
Iter 29
Iteration 30
Iter 30
Iteration 31
Iter 31
Iteration 32
Iter 32
Dial in the details
9

Final Refinements

The last push. Iterations 33 through 37 dialed in every detail: eye contrast and gradient tuning, bar width and spacing proportions, halftone dot density, shadow color warmth, and bezel ring sizing. Each change was small but meaningful at this stage.

Iteration 33
Iter 33
Iteration 34
Iter 34
Iteration 35
Iter 35
Iteration 36
Iter 36
Iteration 37 — Final
Iter 37 · FINAL
Done!

The Final Logo

Iteration 37: a red comic-book panel with yellow drop shadow, halftone dot texture, three bold yellow waveform bars on each side, and a pink-to-red HAL 9000 eye with a yellow bezel ring at the center. Playful, bold, and unmistakably "Bleep That Sh*t!"

Final logo

Favicon Preview

How the final logo holds up at the smallest sizes.

16px preview
16px
32px preview
32px
48px preview
48px
64px preview
64px
128px preview
128px

Design your own logo

Install the skill and start iterating. Just describe what you're building and Claude handles the rest.

claude plugin add neonwatty/logo-designer-skill
Then say "design a logo" to get started. Read the docs →