This is our logo. Claude designed it in about an hour (which included skill creation time), and the entire thing is five SVG <path> elements with flat color fills.
We open sourced the Claude Code skill that teaches Claude the logo design principles that got us these results. Give it a product description and it designs directly in SVG.
Claude generated 15 logo concepts, built an HTML comparison page with size ramps and dark mode previews, and iterated on feedback in 30-second cycles.
Here’s how we got here, and how to get similar results yourself.
Why SVG Instead of Image Generation?
My first attempt was Gemini with Imagen (what the community calls “Nano Banana”), which is arguably one of the strongest image generation models right now. The plan was to generate a raster logo and convert it to SVG. After over an hour of prompting, including providing reference images of the direction I wanted, I didn’t get a single result I’d consider close. Each generation took 2+ minutes, and getting Gemini to produce variants of a specific direction was painful. The outputs were interesting images, but not logos. Too much detail, and the kind of visual complexity that falls apart at small sizes.
That’s what pushed me toward a different approach: skip image generation entirely and have Claude design directly in SVG.
| Image Gen + Manual SVG Trace | Claude + SVG Skill | |
|---|---|---|
| Design quality | Struggled with logo constraints | Surprisingly strong |
| Output format | Raster (needs manual conversion) | Production SVG |
| Iteration speed | Re-generate, re-trace | Edit a few coordinates |
| Dark mode | Re-trace variant | Swap a few color values |
| Total workflow | Hours (if the design is even usable) | ~1 hour start to finish |
The Skill
If you’ve asked Claude to design an SVG before, you probably got something technically valid but visually rough. Claude can write SVG markup all day, but without design knowledge it tends to produce shapes that look like placeholder clip art. Claude Code skills close that gap by injecting domain expertise directly into the conversation. With this skill loaded, Claude knows how to keep a logo legible at 16px, when to use strokes vs fills, and how to structure a multi-variant comparison page.
The core skill covers SVG fundamentals (canvas sizing, shape vs path decisions, styling defaults, fill-rule) plus a 5-step logo design process that emphasizes metaphor diversity. It routes to 8 reference files via progressive disclosure, so Claude only loads what it needs for the specific task.
- Path patterns: arc flag combinations and hand-written templates for common shapes on 24x24 grids
- Logo techniques: simplicity at scale, geometric construction, consistent stroke weight, limited color palettes, and typography guidance
- Icon design: conventions from Lucide, Heroicons, Material, Phosphor, and pixel-perfect alignment rules
- Advanced techniques: gradients, clip-path vs mask, and when to avoid filters in logos
- Animation: multi-phase timing, stagger math, and a Vite/JSX trap to avoid
- Optimization: SVGO usage and style consolidation patterns
- Accessibility: ARIA patterns for decorative/informative/complex SVGs and common pitfalls
- Editing workflow: boolean operations, SVG composition, and the multi-variant preview page template
The skill is published as part of the tryopendata/skills plugin. In Claude Code, two commands:
/plugin marketplace add tryopendata/skills
/plugin install opendesign@tryopendata-skillsOnce installed, Claude auto-detects when SVG work is relevant, or you can invoke it directly with /svg-design. For Claude.ai or Claude Desktop, follow Anthropic’s guide for using skills to upload the skill files from the repo.
The Design Process
My first rounds were too prescriptive. I kept asking for network graph variations because I had a specific visual in mind, and every round came back with slight variations of the same hub-and-spoke concept. The results got dramatically better when I stopped directing the visual and instead just described the product: “OpenData is a platform that unifies scattered public datasets into one queryable place”. With that freedom, Claude started generating concepts I hadn’t considered: isometric data cubes, compass roses, Venn trefoils, open brackets. The best ideas came from letting Claude design, not just illustrate my ideas.
When I was being prescriptive about network graphs, I got variations on the same theme:
Hub Filled
Organic Graph
Duo Tone (colored)
When I gave Claude the product description and let it design freely, the concepts opened up:
Stacked Layers
Open Circle
Venn Trefoil
Compass Rose
Rising Bars
The Final Logo
The isometric cube variant stood out right away. Three flat faces in different brand colors, clean at every size, reads as a solid object even at 16px. A handful of iterations from there:
- Lifted the top off and made the interior visible for an “open” feel
- Added a second floating layer in teal
- Tightened vertical spacing until the layers felt like one object
16px
32px
64px
128px
Five <path> elements with flat fills. No gradients, no filters. It renders identically at every size because there’s nothing to degrade.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<!-- Box body -->
<path d="M 4 18 L 16 23 L 28 18 L 16 13 Z" fill="#2563EB" opacity="0.25" />
<path d="M 4 18 L 16 23 L 16 30 L 4 25 Z" fill="#2563EB" />
<path d="M 16 23 L 28 18 L 28 25 L 16 30 Z" fill="currentColor" />
<!-- Floating layer 1 (teal) -->
<path d="M 4 13 L 16 18 L 28 13 L 16 8 Z" fill="#10B981" />
<!-- Floating layer 2 (cyan) -->
<path d="M 4 9 L 16 14 L 28 9 L 16 4 Z" fill="#38BDF8" />
</svg>Why This Worked
The part that surprised me wasn’t the SVG output. It was the design thinking. The skill gives Claude context on what makes a good logo, but the actual creative decisions came from Claude understanding what OpenData is. When it knew the product was about unifying scattered public datasets, it went from generic network graphs to concepts like an open box with floating data layers, a broken circle representing “open,” stacked tables representing unified datasets. The right domain context plus design principles let Claude make real conceptual leaps instead of iterating on layout variations of one idea.
The iteration speed is what makes this practical. “Move the layers closer to the box” means changing four Y-coordinates across two <path> elements. Each round of feedback takes about 30 seconds, and first draft to final logo took about an hour.
Where Gemini Actually Shined
Earlier I was pretty hard on Gemini’s image generation for logo design. But once I had the final SVG, I went back to Gemini to create this article’s header image. And it nailed it.
I gave it the finished logo and asked for a brand presentation mockup. Glass cube, size ramp cards, depth of field, moody lighting. First try. Claude can’t produce anything like this today. (It doesn’t do raster image generation.)
The lesson from this whole process was learning what each tool is actually good at. Gemini couldn’t design a logo (too much detail, wrong output format), but it’s incredible at creating rich visual scenes from existing assets. Claude can’t render photorealistic mockups, but it can design in SVG with real creative judgment coupled with the right guidance (the skill). They’re complementary. You just have to know when to reach for which one.
Try It
The skill is at github.com/tryopendata/skills. The gap between “Claude writing SVG markup” and “Claude designing logos” is basically just this skill.
