Svg Logo Designer
Generate professional SVG logo concepts and layouts from a short brand brief when you need a mark for a landing page, app icon, or pitch deck.
Overview
SVG Logo Designer is an agent skill most often used in Validate (also Launch distribution, Build frontend) that creates professional SVG logos and variations from brand and design specifications.
Install
npx skills add https://github.com/rknall/claude-skills --skill svg-logo-designerWhat is this skill?
- Four-phase workflow: requirements, concepts, SVG production, and variation export
- Supports wordmark, lettermark, pictorial, abstract, and combination logo types
- Produces scalable SVG suitable for web, favicons, and PNG export paths
- Gathers brand personality, audience, and competitor differentiation up front
- Delivers multiple layout and style variations from one structured brief
- Core workflow spans four phases: requirements gathering, concept generation, SVG production, and variation export
Adoption & trust: 1.2k installs on skills.sh; 53 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You have a product name and positioning but no scalable logo or icon set for your landing page, store listing, or deck.
Who is it for?
Indie founders drafting landing pages, app icons, or pitch visuals who want SVG-first marks from a written brief.
Skip if: Trademark clearance, complex illustrative brand systems, or photo-real marks that cannot be expressed cleanly in SVG paths.
When should I use this skill?
Users ask to create logos, brand identities, icons, visual marks, wordmarks, or lettermarks from descriptions and design specifications.
What do I get? / Deliverables
You receive multiple SVG logo variations with clear layout and style options ready to embed in marketing surfaces or refine with a human designer.
- SVG logo files
- Multiple layout and style variations
- Export-ready vector markup for PNG conversion
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Logo and wordmark work usually happens while proving the offer and polishing landing assets, before full product UI implementation. Landing and early brand presence need scalable marks; this skill targets that moment rather than deep in-app component work.
Where it fits
Before publishing a waitlist page, generate a wordmark and favicon-compatible pictorial mark from your one-paragraph brand brief.
Produce SVG variants sized for social banners and newsletter headers ahead of a Product Hunt or launch post.
Drop a combination mark into the app shell and marketing components without raster blur on retina displays.
How it compares
Structured logo generation skill—not a Figma plugin handoff or a generic image diffusion wallpaper tool.
Common Questions / FAQ
Who is SVG Logo Designer for?
Solo builders and small teams who need brand marks and icons quickly for web and mobile surfaces without opening a full design toolchain first.
When should I use SVG Logo Designer?
In Validate while shaping landing and pricing pages; in Launch when preparing distribution assets; in Build when you need consistent SVG marks in the product chrome.
Is SVG Logo Designer safe to install?
Review the Security Audits panel on this Prism page; the skill generates markup locally in the agent session—avoid embedding confidential client names in shared logs if that matters to you.
SKILL.md
READMESKILL.md - Svg Logo Designer
# SVG Logo Designer This skill creates professional, scalable vector graphic (SVG) logos from design specifications, offering multiple variations and layout options. ## When to Use This Skill Activate this skill when the user requests: - Create a logo from a description or specification - Design a brand identity or visual mark - Generate logo variations and concepts - Create icons or symbols - Design wordmarks or lettermarks - Produce scalable graphics for branding - Export logos in different layouts and styles ## Core Workflow ### Phase 1: Requirements Gathering When a user requests a logo, gather comprehensive design requirements: 1. **Brand Information** - Company/product name - Industry and market - Target audience - Brand personality (modern, classic, playful, serious, etc.) - Brand values and messaging - Competitors (for differentiation) 2. **Design Preferences** - Logo type: - **Wordmark**: Text-based logo (Google, Coca-Cola style) - **Lettermark**: Initials/abbreviation (IBM, HBO style) - **Pictorial Mark**: Icon/symbol (Apple, Twitter style) - **Abstract Mark**: Abstract geometric form (Pepsi, Adidas style) - **Mascot**: Character-based (KFC Colonel, Michelin Man style) - **Combination Mark**: Icon + text (Burger King, Lacoste style) - **Emblem**: Text inside symbol (Starbucks, Harley-Davidson style) 3. **Style Guidelines** - Color palette (specific colors or let AI choose) - Color psychology considerations - Font preferences (if text-based) - Visual style: - Minimalist - Geometric - Organic/flowing - Bold/strong - Elegant/refined - Playful/friendly - Tech/modern - Vintage/retro 4. **Technical Requirements** - Size constraints (will it be used small? large?) - Application contexts (website, print, merchandise, etc.) - Color vs monochrome versions needed - Background usage (light, dark, transparent) - Scalability requirements 5. **Number of Variations** - How many different concepts? (Recommend 3-5) - How many layouts per concept? (Horizontal, vertical, square, circular) - Color variations needed? ### Phase 2: Design Concept Development Create multiple logo concepts based on requirements: #### Concept 1: Primary Direction Develop the main design direction: **Design Thinking:** - Research visual metaphors related to brand - Consider negative space opportunities - Ensure memorability and uniqueness - Balance simplicity with distinctiveness - Consider cultural appropriateness **SVG Structure:** ```xml <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200"> <defs> <!-- Gradients, patterns, filters --> <linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" style="stop-color:#4F46E5;stop-opacity:1" /> <stop offset="100%" style="stop-color:#7C3AED;stop-opacity:1" /> </linearGradient> </defs> <!-- Logo elements --> <g id="logo-symbol"> <!-- Symbol/icon elements --> </g> <g id="logo-text"> <!-- Text elements (if applicable) --> </g> </svg> ``` #### Concept 2-5: Alternative Directions Create variations exploring different visual approaches: - Different visual metaphors - Different style treatments - Different layouts and compositions - Different color applications ### Phase 3: Layout Variations For each concept, create multiple layout options: #### Layout A: Horizontal Lockup - Icon on left, text on right - Best for website headers, business cards - Wider aspect ratio #### Layout B: