Logo Generator

Generate professional SVG logos and high-end showcase images. Use when the user wants to: (1) Create a logo or icon for their product/brand, (2) Generate logo design concepts based on product information, (3) Create professional logo showcase presentations with multiple background styles, (4) Export logos in various formats (SVG, PNG), or (5) Iterate on logo designs with different visual styles. Supports geometric patterns, dot matrix designs, line systems, and mixed compositions. Generates showcase images using Nano Banana (Gemini image generation) with 12 professional background styles.

2,318 stars 177 forksFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add op7418/logo-generator-skill --skill logo-generator

Manual install

git clone --depth 1 https://github.com/op7418/logo-generator-skill.git /tmp/logo-generator-skill
mkdir -p ~/.claude/skills
cp -r /tmp/logo-generator-skill/. ~/.claude/skills/logo-generator

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# Logo Generator

Generate professional SVG logos and high-end showcase presentations for products and brands.

## Workflow

### Phase 1: Information Gathering

Collect essential information from the user:

1. **Product/Brand Name** (required)
2. **Industry/Category** (e.g., AI, fintech, design tools)
3. **Core Concept** (e.g., connection, flow, security, simplicity)
4. **Design Preferences**:
   - Style: minimal/complex, geometric/organic
   - Color preference: monochrome/specific colors
   - Mood: cold/warm, professional/friendly

Ask concise questions to gather this information. Don't overwhelm the user with too many questions at once.

### Phase 2: Pattern Matching & SVG Generation

Based on the gathered information:

1. **Generate at least 6 design variants** based on `references/design_patterns.md`
   - Match patterns to product characteristics
   - Use different pattern types and combinations for diversity
   - Include both single-pattern and mixed-pattern compositions
   - Vary complexity levels (simple geometric to layered compositions)
   - Each variant should feel distinctly different, not just parameter tweaks
   - Explain the design rationale for each variant

2. **Generate SVG code** for each variant
   - Use viewBox="0 0 100 100" for easy scaling
   - Keep code clean and well-structured
   - Use `currentColor` for flexible color control
   - Add subtle animations for web display (optional)

3. **Create interactive showcase webpage**

Read the full skill on GitHub

Details

Skill name: logo-generator
Repository: op7418/logo-generator-skill
Repo updated: 15 April 2026

FAQ

What does the Logo Generator skill do?

How do I install the Logo Generator skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add op7418/logo-generator-skill --skill logo-generator. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Logo Generator popular?

It lives in op7418/logo-generator-skill, which has 2,318 GitHub stars and 177 forks.

Related skills

Zhengxi Views

1.8k

lyra81604/zhengxi-views

郑希观点库——基于易方达基金经理郑希 2012–2026 年全部公开观点原文语料，外加从语料蒸馏、有本人原话佐证的郑希投资方法的可溯源 research skill。能做： (1) 溯源问答——他怎么看 AI算力/光通信/新能源/半导体/ROE 等，引用其原话作答； (2) 讲解他的投资方法/框架/选股逻辑；(3) 前瞻应用——用他的方法分析当下任意主题/行业/个股，语料没谈过也能据框架推演； (4) 风格化点评——用他季报/手记的口吻写市场点评、季度展望； (5) 言行对照——用他全部基金真实数据（季度持仓/净值/业绩/规模/任职回报）核对"说的"与"买的"，或答他的业绩/重仓/规模； (6) 全市场查询对比——内置约 2.7 万只基金列表，按需抓任意基金真实数据做查询或与郑希对比； (7) 郑希框架评分——给一只基金按他的方法打分（多像郑希会买的）。 When the user mentions 郑希/易方达郑希/zhengxi, asks his view on a sector/stock/theme, his 投资方法/框架/选股/风格/持仓/业绩/净值/规模, wants to apply his approach, a commentary 用郑希口吻, to check words vs holdings, or to look up/compare/score A

Frontend & Design192

Design Dna

2.1k

zanwei/design-dna

Extract, define, and apply design DNA across three dimensions: design system (tokens), design style (qualitative feel), and visual effects (Canvas, WebGL, 3D, particles, shaders, scroll effects, etc.). Use this skill when: (1) a user wants to see the full 3-dimension design structure/schema, (2) a user provides images, screenshots, or URLs of reference designs and wants them analyzed into a structured JSON profile covering all three dimensions, (3) a user has a Design DNA JSON and content and wants a design generated from it, or (4) any combination of these phases. Triggers on "design DNA", "e

Frontend & Design114

Pretty Mermaid

1.6k

imxv/Pretty-mermaid-skills

Generate and render Mermaid diagrams for architecture docs, READMEs, PRs, terminals, chats, and CI as themed SVG, PNG, or ASCII/Unicode art. Use this skill whenever the user provides Mermaid code or .mmd files; asks for a flowchart, sequence/state/class diagram, ERD, XY chart, or architecture/workflow/data-model visualization; or wants to beautify, theme, batch-convert, or make a diagram terminal-friendly. Runs locally without a browser or DOM, with 15 built-in themes and custom colors.

Frontend & Design77

Uncodixfy

2.7k

cyxzdev/Uncodixfy

Prevents generic AI/Codex UI patterns when generating frontend code. Use this skill whenever generating HTML, CSS, React, Vue, Svelte, or any frontend UI code to enforce clean, human-designed aesthetics inspired by Linear, Raycast, Stripe, and GitHub instead of typical AI-generated UI.

Frontend & Design167

Auteur

agiwhitelist/auteur

Design and build complete web experiences from scratch — award-level product and marketing pages, cinematic scroll-directed sites where the page is directed like a film, and multi-screen products (app, dashboard, admin, settings, onboarding, docs site) built as one design system with every component, state and route in one style. Use whenever the user wants to create or redesign a landing page, website, hero section, portfolio, promo or product page; wants scroll animations, storytelling pages, or a site that feels like a movie; or says "make it beautiful", "make it wow", "cinematic", or "desi

Frontend & DesignIn 2 lists18

Pixel2motion

2.6k

nolangz/pixel2motion

Turn a raster logo (PNG/JPG/WebP/screenshot) into a clean minimal SVG with edge smoothness as the primary hard gate and IoU optimized as high as reasonably possible without a fixed global threshold, then into a choreographed logo animation delivered as standalone JS-rendered HTML, applying Disney's 12 animation principles. Use when asked to animate a logo, build a logo reveal / splash screen / brand intro, convert a logo image into animated SVG or HTML, add motion to a vectorized mark, or create loading/idle/hover motion for a brand mark. v2: also handles self-crossing draw-on choreography (sp

Frontend & Design212

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.