logo-vectorize

logo-vectorize

A Claude Code skill that turns messy AI-generated logos into clean SVG marks.

Logos from ChatGPT, Gemini and friends arrive as 1024 px bitmaps full of chrome, glow, glitter, gradients, lettering and photo backgrounds. Auto-tracers such as potrace or vtracer trace all of that noise faithfully. This skill has Claude rebuild the mark instead: it measures the bitmap, redraws the mark from a handful of geometric building blocks at three levels of abstraction, and shows every version live over the source until you pick one.

The result is black on transparent, square, a few KB, and still legible at 16 px.

What you get

Plus:

• A live workbench in the browser: overlay, outline and difference against the source, IoU, segment count, and favicon sizes on light and dark. It updates within a second of every change.
• Final marks with viewBox="0 0 100 100" and no margin, currentColor for inline use, and optional color versions.
• Zero dependencies: Node and Chrome. No npm packages, no Python, no API keys.

Install

git clone https://github.com/leonmeerfeld/logo-vectorize ~/.claude/skills/logo-vectorize

To scope it to one project, clone it into that project's .claude/skills/ instead. Claude Code discovers the skill on its own.

Requirements: Node 18 or newer, Google Chrome or Chromium (run headless for screenshots and metrics), and optionally rsvg-convert from librsvg for zoomed checks.

Usage

Ask Claude in plain words:

Vectorize the logo in ~/Downloads/logo.png

Make a favicon from this logo

Claude then:

1. copies the source to <project>/logo/work/, crops it, and finds a pixel mask for the mark, with the lettering and background left out;
2. measures the mask: centerlines and stroke widths for every branch;
3. builds A, B, C and the traced detail version in build.mjs;
4. checks them itself, then opens the workbench in your browser;
5. iterates on your feedback, for example "C for the favicon, B for everything else";
6. exports the chosen marks to <project>/logo/mark-*.svg and documents them in logo/README.md.

Building the three levels is real drawing work: expect roughly 10 to 20 minutes of agent time per logo.

Examples

Three logos generated from layman prompts ("chrome metal 3d effect, fire and lightning in the background"), each run through the full workflow. Every folder contains the source, build.mjs, the four candidates, the exported marks and a README with crop, mask and metrics.

The workbench

workbench.html is served from the work folder by a tiny static server and checks for changes every second. For each candidate it shows:

• Overlay, Outline, Difference, Plain against the source (keys 1–4). The difference view marks what is missing in orange and what is extra in blue.
• IoU against the mask, the missing and extra share, and the segment count.
• Small sizes from 16 to 64 px on light and dark, framed exactly like the export.

shot.sh loads the same page headless and prints the metrics as JSON, so Claude checks its own work before you see it.

How it works

source.png ──crop + mask──▶ mask.json ──skeleton.mjs──▶ centerlines + widths
                               │                                │
                           trace.mjs                      build.mjs (A, B, C)
                               │                                │
                               └──────────▶ candidates ◀────────┘
                                                │
                                workbench: overlay, IoU, small sizes
                                                │
                                      exportSvg ──▶ mark-*.svg

• Mask. A JavaScript expression per pixel over r g b, luma l, saturation s and position x y, such as s>0.47 && l<185, plus geometric limits to keep lettering out.

• Skeleton. Distance transform and Zhang-Suen thinning, branches traced between ends and junctions, spurs pruned, points simplified with Douglas-Peucker.

• Building blocks. Everything lives on a 0–100 grid over the crop:

  Block	Shape
  stroke(points, { tol })	brush stroke through [x, y, width] points; width 0 makes a tip
  crescent({ cx, cy, r, start, end, width, mid })	crescent with its outer edge on a circle
  circle(cx, cy, r), ellipse({ cx, cy, rx, ry, rotate })	round shapes
  polygon(points, { radius })	straight edges, optionally rounded corners
  hole(shape)	cut-out, e.g. a ring or a porthole
  exportSvg(shapes, { color, rule, groups, disc })	the final mark, optionally multi-colored

• Trace. Speck removal, a light blur, marching squares with subpixel interpolation, corner detection, then Schneider's Bézier fitting.

Repository layout

logo-vectorize/
├── SKILL.md                  the workflow Claude follows
├── workbench/
│   ├── workbench.html        live comparison page
│   ├── server.mjs            static server without caching
│   ├── shot.sh               headless screenshot plus metrics
│   ├── mask.sh               the mask as JSON for measuring
│   ├── skeleton.mjs          centerlines and stroke widths
│   ├── shapes.mjs            building blocks and export
│   ├── trace.mjs             the traced detail version
│   ├── split.mjs             split a mask into parts for color versions
│   └── build-template.mjs    starting point for build.mjs
├── examples/
│   ├── peak-fitness/
│   ├── green-thumb/
│   └── rocketboost/
└── assets/

Limitations

• Lettering is out of scope. Wordmarks aren't traced. Match a typeface and convert the text to paths instead.
• Hard sources need help. Glitter, neon glow and 3D relief give noisy masks. The mask expression then uses geometric limits, and the detail version stays rougher than A to C.
• The levels are hand-built by the agent. A run takes time, and the result depends on the model's eye; the workbench metrics keep it honest.
• AI-generated motifs can resemble existing marks. Check before you use one commercially.

License

MIT