{"id":"34d8215e-f5d5-45f9-8813-825c97b9aa35","slug":"logo-vectorize","kind":"skill","name":"logo-vectorize","summary":"Claude Code skill: turn bitmap logos into reduced SVGs in three abstraction levels, with a live browser workbench","owner":"leonmeerfeld","repoUrl":"https://github.com/leonmeerfeld/logo-vectorize","license":"MIT","licenseTier":"permissive","trust":"community","stars":2,"match":null,"fewStars":true,"format":"skill","createdAt":"2026-10-03T19:40:34.000Z","addedAt":"2026-10-21T23:57:10.351Z","logoUrl":"https://avatars.githubusercontent.com/u/17401621?u=de5008f31d09220a8b2a8228c4c52a58a60f5706&v=4","linkOnly":false,"collection":null,"skillPath":null,"categories":["browser-web","developer-tools"],"tags":[],"runtime":"binary","local":true,"cloudCapable":false,"cloudCapability":"unknown","cloudReadyOnPlatform":false,"needsApiKey":false,"reviewed":false,"syncedAt":"2026-10-26T00:19:16.578Z","sample":false,"url":"https://conduits.dev/tools/logo-vectorize","language":"JavaScript","transports":["stdio"],"install":{},"requirements":{"env":[],"upstreamMayCharge":false},"tools":null,"readme":"# logo-vectorize\n\n**A Claude Code skill that turns messy AI-generated logos into clean SVG marks.**\n\n![Claude Code skill](https://img.shields.io/badge/Claude_Code-skill-d97757)\n![Dependencies: none](https://img.shields.io/badge/dependencies-none-2f7d4f)\n[![License: MIT](https://img.shields.io/badge/license-MIT-555)](LICENSE)\n\n![Three AI-generated logos and their A, B and C versions, with C at favicon sizes](assets/hero.png)\n\nLogos from ChatGPT, Gemini and friends arrive as 1024 px bitmaps full of chrome,\nglow, glitter, gradients, lettering and photo backgrounds. Auto-tracers such as\npotrace or vtracer trace all of that noise faithfully. This skill has Claude\n**rebuild the mark** instead: it measures the bitmap, redraws the mark from a\nhandful of geometric building blocks at three levels of abstraction, and shows\nevery version live over the source until you pick one.\n\nThe result is black on transparent, square, a few KB, and still legible at 16 px.\n\n## What you get\n\n| Level | What it is | Typical use |\n|---|---|---|\n| **A** · close to the original | every part redrawn as clean strokes and shapes, details kept | the logo at large sizes |\n| **B** · geometric | circles, crescents and polygons with few support points, small details dropped | the everyday logo |\n| **C** · strongly reduced | B, bolder and simpler, built to read at 16–32 px | favicon, app icon, stamp |\n| **Detail** · traced | the mask traced 1:1 (marching squares and Bézier fitting) | reference, large prints |\n\nPlus:\n\n- **A live workbench** in the browser: overlay, outline and difference against\n  the source, IoU, segment count, and favicon sizes on light and dark. It updates\n  within a second of every change.\n- **Final marks** with `viewBox=\"0 0 100 100\"` and no margin, `currentColor`\n  for inline use, and optional color versions.\n- **Zero dependencies:** Node and Chrome. No npm packages, no Python, no API keys.\n\n## Install\n\n```bash\ngit clone https://github.com/leonmeerfeld/logo-vectorize ~/.claude/skills/logo-vectorize\n```\n\nTo scope it to one project, clone it into that project's `.claude/skills/`\ninstead. Claude Code discovers the skill on its own.\n\n**Requirements:** Node 18 or newer, Google Chrome or Chromium (run headless for\nscreenshots and metrics), and optionally `rsvg-convert` from librsvg for zoomed\nchecks.\n\n## Usage\n\nAsk Claude in plain words:\n\n> Vectorize the logo in ~/Downloads/logo.png\n\n> Make a favicon from this logo\n\nClaude then:\n\n1. copies the source to `<project>/logo/work/`, crops it, and finds a pixel\n   mask for the mark, with the lettering and background left out;\n2. measures the mask: centerlines and stroke widths for every branch;\n3. builds A, B, C and the traced detail version in `build.mjs`;\n4. checks them itself, then opens the workbench in your browser;\n5. iterates on your feedback, for example *\"C for the favicon, B for\n   everything else\"*;\n6. exports the chosen marks to `<project>/logo/mark-*.svg` and documents them\n   in `logo/README.md`.\n\nBuilding the three levels is real drawing work: expect roughly 10 to 20 minutes\nof agent time per logo.\n\n## Examples\n\nThree logos generated from layman prompts (*\"chrome metal 3d effect, fire and\nlightning in the background\"*), each run through the full workflow. Every\nfolder contains the source, `build.mjs`, the four candidates, the exported\nmarks and a README with crop, mask and metrics.\n\n| Example | Source | How the mark is built |\n|---|---|---|\n| [Peak Fitness](examples/peak-fitness) | chrome mountain and dumbbell, fire and lightning | mirrored polygons with holes |\n| [Green Thumb](examples/green-thumb) | watercolor tree held by a hand inside a swoosh | tapered strokes for leaves, a crescent for the swoosh |\n| [RocketBoost](examples/rocketboost) | neon rocket with two glowing trails in a galaxy | rocket from polygons and a porthole hole, trails as strokes |\n\n## The workbench\n\n![The workbench with candidates A, B, C and the detail version overlaid on the source](examples/green-thumb/comparison.png)\n\n`workbench.html` is served from the work folder by a tiny static server and\nchecks for changes every second. For each candidate it shows:\n\n- **Overlay, Outline, Difference, Plain** against the source (keys 1–4). The\n  difference view marks what is missing in orange and what is extra in blue.\n- **IoU** against the mask, the missing and extra share, and the segment count.\n- **Small sizes** from 16 to 64 px on light and dark, framed exactly like the export.\n\n`shot.sh` loads the same page headless and prints the metrics as JSON, so\nClaude checks its own work before you see it.\n\n## How it works\n\n```\nsource.png ──crop + mask──▶ mask.json ──skeleton.mjs──▶ centerlines + widths\n                               │                                │\n                           trace.mjs                      build.mjs (A, B, C)\n                               │                                │\n                               └──────────▶ candidates ◀────────┘\n                                                │\n                                workbench: overlay, IoU, small sizes\n                                                │\n                                      exportSvg ──▶ mark-*.svg\n```\n\n- **Mask.** A JavaScript expression per pixel over `r g b`, luma `l`,\n  saturation `s` and position `x y`, such as `s>0.47 && l<185`, plus\n  geometric limits to keep lettering out.\n- **Skeleton.** Distance transform and Zhang-Suen thinning, branches traced\n  between ends and junctions, spurs pruned, points simplified with\n  Douglas-Peucker.\n- **Building blocks.** Everything lives on a 0–100 grid over the crop:\n\n  | Block | Shape |\n  |---|---|\n  | `stroke(points, { tol })` | brush stroke through `[x, y, width]` points; width 0 makes a tip |\n  | `crescent({ cx, cy, r, start, end, width, mid })` | crescent with its outer edge on a circle |\n  | `circle(cx, cy, r)`, `ellipse({ cx, cy, rx, ry, rotate })` | round shapes |\n  | `polygon(points, { radius })` | straight edges, optionally rounded corners |\n  | `hole(shape)` | cut-out, e.g. a ring or a porthole |\n  | `exportSvg(shapes, { color, rule, groups, disc })` | the final mark, optionally multi-colored |\n\n- **Trace.** Speck removal, a light blur, marching squares with subpixel\n  interpolation, corner detection, then Schneider's Bézier fitting.\n\n## Repository layout\n\n```\nlogo-vectorize/\n├── SKILL.md                  the workflow Claude follows\n├── workbench/\n│   ├── workbench.html        live comparison page\n│   ├── server.mjs            static server without caching\n│   ├── shot.sh               headless screenshot plus metrics\n│   ├── mask.sh               the mask as JSON for measuring\n│   ├── skeleton.mjs          centerlines and stroke widths\n│   ├── shapes.mjs            building blocks and export\n│   ├── trace.mjs             the traced detail version\n│   ├── split.mjs             split a mask into parts for color versions\n│   └── build-template.mjs    starting point for build.mjs\n├── examples/\n│   ├── peak-fitness/\n│   ├── green-thumb/\n│   └── rocketboost/\n└── assets/\n```\n\n## Limitations\n\n- **Lettering is out of scope.** Wordmarks aren't traced. Match a typeface and\n  convert the text to paths instead.\n- **Hard sources need help.** Glitter, neon glow and 3D relief give noisy\n  masks. The mask expression then uses geometric limits, and the detail\n  version stays rougher than A to C.\n- **The levels are hand-built by the agent.** A run takes time, and the result\n  depends on the model's eye; the workbench metrics keep it honest.\n- **AI-generated motifs** can resemble existing marks. Check before you use one\n  commercially.\n\n## License\n\n[MIT](LICENSE)\n"}