Skip to main content
skill Claude Code CX Codex Cursor GitHub Copilot

logo-generator — Claude Code skill: SVG logo generation, showcase

Generates SVG logos with at least six design variants and creates high-end showcase images using 12 professional background styles via Gemini API.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓
npx skills add op7418/logo-generator-skill --skill logo-generator -a claude-code
Open on GitHub

What logo-generator does

The skill runs a five-phase workflow: gather product information, generate SVG variants from patterns in design_patterns.md, iterate on selected directions, export to PNG via svg_to_png.py, and produce final showcases with generate_showcase.py. Logos use viewBox="0 0 100 100" for scaling and support geometric patterns, dot matrices, line systems, and mixed compositions.

Showcase generation requires Python 3.8+ and a Gemini API key in .env. The generate_showcase.py script sends a PNG reference to Nano Banana and returns images with chosen backgrounds: six dark styles (void, frosted, fluid, spotlight, analog_liquid, led_matrix) and six light styles (editorial, iridescent, morning, clinical, ui_container, swiss_flat). PNG export needs the cairosvg library.

What it helps with

  • generate six logo variants for a brand with different visual patterns
  • export an SVG logo to 1024×1024 PNG
  • create professional showcase presentations with background styles
  • iterate on logo designs by combining elements from different variants
  • build an HTML page with all variants and download links

Example prompts for the agent

  • Design a logo for an AI platform called ConnectFlow, concept is connection and data flow, minimal style
  • Create six icon variants for a fintech startup, cold palette, geometric shapes
  • Export the selected SVG to PNG and generate showcases with frosted, fluid, morning and clinical backgrounds

How to install logo-generator

1Skills CLI (Vercel)

npx skills add op7418/logo-generator-skill --skill logo-generator -a claude-code

2Manually: put the files in place

~/.claude/skills/logo-generator/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/logo-generator/

Similar

sketch Hermes Agent (adapted from gsd-build/get-shit-done) Generates 2-3 HTML mockup variants to compare design directions before you commit to production code. Claude Code CX Codex Cursor +1 402installs user-personas phuryn Generates three detailed user personas from research data with jobs-to-be-done, pains, and behavioral insights. Helps teams segment research findings for product decisions. Claude Code CX Codex Cursor +1 3,000installs brainstorm-ideas-existing phuryn Skill to brainstorm product ideas for an existing product from PM, Designer, and Engineer perspectives. Use it to generate features, solve identified opportunities, or ideate with your product trio. Claude Code CX Codex Cursor +1 3,000installs superdesign superdesigndev Create and refine interfaces, presentations, and graphics on the Superdesign canvas. Useful for drafting new layouts or comparing results from different models. Claude Code CX Codex Cursor +1 11,200installs brainstorm-experiments-existing phuryn This skill helps plan experiments to validate assumptions about an existing product before committing to full builds. Use it to test hypotheses with prototypes, A/B tests, spikes, and other lean methods. Claude Code CX Codex Cursor +1 2,800installs appllama-app-design-skill Appllama (appllama.io) Skill for building native iOS and Android screens with Expo and React Native. Designs with Apple HIG fidelity, semantic colors, Reanimated motion, proper navigation semantics, and simulator-verified iteration. Claude Code CX Codex Cursor +1 4,700installs frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. Claude Code Claude.ai 1,025,790installs grill-me Matt Pocock grill-me interviews you about a plan or design to expose gaps and sharpen decisions. Use it before implementation starts. Claude Code 1,424,476installs

Questions about logo-generator

How to install logo-generator in Claude Code?

Run npx skills add op7418/logo-generator-skill --skill logo-generator -a claude-code to install the skill to ~/.claude/skills/logo-generator/SKILL.md.

What does logo-generator do?

It generates professional SVG logos with at least six design variants, exports them to PNG, and creates showcase images with 12 background styles via Gemini API.

What is required to generate showcase images?

Python 3.8 or higher, dependencies from requirements.txt, a Gemini API key in the .env file, and the cairosvg library for PNG export.

See also

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor