discountry/logo-maker/svg-logo-maker

Name: svg-logo-maker
Author: discountry

Claude Code and agent skill by discountry/logo-maker

Trust tier 3

community

Source check pending

Checking that the SKILL.md file is still in the repository.

Design and generate production-quality SVG logos in modern minimalist style. Use this skill PROACTIVELY whenever the user asks to create a logo, design a brand mark, generate an SVG icon, make a logomark, create a wordmark, build a brand identity symbol, or needs any kind of vector logo. Also triggers for requests like "make me a logo", "design an icon for my app", "create a brand symbol", "I need a logo for...", "generate SVG logo", or any task involving logo/icon/brand mark creation — even if they don't specifically mention "SVG" or "minimalist".

Install

npx vskill@latest install discountry/logo-maker/svg-logo-maker

SKILL.md

SVG Logo Maker

Generate world-class minimalist SVG logos using svg.js for programmatic construction, browser-based visual verification, and automated SVG export.

Why svg.js? Writing raw SVG path data is extremely error-prone for AI. svg.js provides high-level shape methods (rect(), circle(), polygon(), group(), gradient(), mask(), transform()) that map naturally to function calls — which AI excels at. The browser renders the result, enabling visual iteration.

Five Principles of Effective Logo Design

These principles guide every decision throughout the workflow. Evaluate all designs against them.

Principle	What it means	Test
Simplicity	Express the message through clean, essential elements. Every line must earn its place.	Can you describe the logo in one sentence?
Timelessness	Root the design in enduring brand values, not trends.	Would this look dated in 10 years?
Uniqueness	Stand apart with original choices. Avoid clichéd symbols (lightbulbs for ideas, globes for "global").	Could a competitor use the same concept?
Relevance	Match the audience, industry, and brand personality. A children's app needs different energy than a law firm.	Does it feel right for the target audience?
Readability	Text must be crisp at any size. Shapes must be recognizable at 32×32px.	Mentally shrink it to a favicon — does it survive?

Reference Library

This skill bundles assets/ containing logos from leading global brands in two formats:

Format	Files	Purpose
PNG (`*.png`)	Visual reference images	Read these first — AI can visually parse PNG images to understand shape, proportion, color, negative space, and overall design quality. Use PNG files as the primary design inspiration source.
SVG (`*.svg`)	Source vector code	Read these to study real-world SVG structure, path construction, optimization techniques, and how professional logos are built in code.

Brands included: Apple, OpenAI, Anthropic, Claude, Claude Code, Cursor, Google, Figma, Meta, Midjourney, Grok, DeepSeek, Doubao, Moonshot, Ollama, Cloudflare, Microsoft, AWS, IBM, Gemini, Antigravity.

The reference logos are located at: {SKILL_DIR}/assets/

How to Use the Reference Library

Visual study (PNG): Before designing, read 3–5 PNG files relevant to the target industry/style using the Read tool. The AI can see the rendered logo, analyze its visual structure, and internalize design patterns that are impossible to learn from SVG code alone.
Technical study (SVG): After visual study, read the corresponding SVG files to understand how the visual result was achieved in code — path construction, use of groups, transforms, gradients, and masks.
Cross-reference: Always study both formats for the same logo. The PNG shows what to achieve; the SVG shows how to build it.

Workflow

Phase 1 — Brand Identity & Requirement Gathering

A logo translates an entire brand identity into a single mark. Invest heavily in this phase — a logo built on shallow understanding will look generic.

1a. Brand Identity Deep-Dive

Extract or infer the following from the user's request. For minimal input, infer reasonable defaults and state assumptions explicitly.

Dimension	What to capture	Why it matters
Brand name	Exact text (for wordmark/lettermark/monogram)	Determines letterform needs
Target audience	Demographics, shared interests, sophistication level	Shapes visual tone (playful vs. authoritative)
Core mission	One sentence describing the brand's purpose	Anchors the visual metaphor
Brand adjectives	3–5 words describing the brand's personality (e.g. "bold, trustworthy, innovative")	Drives form language and color
Core values	2–3 keywords the brand represents (e.g. "trust", "speed", "innovation")	Informs symbolism and shape choices
Industry / domain	Tech, finance, health, food, education, creative, etc.	Provides stylistic starting points

1b. Logo Requirements

Dimension	What to capture
Logo type	Logomark, Letterform, Monogram, Wordmark, Abstract, Combination, or Emblem (see Logo Type Guide below)
Color preference	Specific hex values, or mood-based ("warm", "corporate blue", "monochrome")
Style cues	Geometric / organic / angular / rounded / abstract / figurative
Usage context	App icon, website header, favicon, print, all-purpose
Negative space	Any clever use of negative space requested

Logo Type Guide

Choose the type that best serves the brand's needs:

Type	Description	Best for	Examples
Wordmark	Full company name, typography-driven	Short, unique names	Coca-Cola, Google, FedEx
Letterform	Single letter	Well-known companies wanting a strong, compact identity	Facebook (F), Pinterest (P)
Monogram	Initials of the brand name	Established brands with long names	CNN, H&M, IBM
Abstract	Abstract shapes and symbols, no text	Brands wanting a modern, universal mark	Pepsi, Audi, Nike swoosh
Logomark	Figurative symbol representing the brand	Brands with a clear visual metaphor	Apple, Twitter bird
Combination	Text + symbol together	Brands wanting to leverage both	Airbnb, Dropbox, Doritos
Emblem	Text/symbol contained within a shape (badge, crest, seal)	Traditional, authoritative brands	Starbucks, BMW, Harley-Davidson

Phase 2 — Visual Study of Reference Logos

MANDATORY before designing. Read PNG reference logos to build visual intuition.

Select 3–5 reference logos from {SKILL_DIR}/assets/ that are most relevant to the target brand's industry, style, or logo type. Use the Read tool to view the PNG files — AI can visually parse these images.
Read the corresponding SVG files for the selected logos to understand their construction technique.
Document observations — For each reference logo studied, note:

What makes the design effective (shape language, negative space, balance)
What construction technique was used (geometric primitives, paths, masks)
What can be borrowed or adapted for the current project

This visual study directly informs the design plan. Reference specific logos when justifying design decisions.

Phase 3 — Design Plan

Before writing any code, produce a structured design plan. Present it to the user for confirmation before proceeding.

Design Plan Template

## Logo Design Plan: [Brand Name]
 
### 1. Design Concept
- **Core metaphor**: [What real-world object/shape/idea the logo abstracts]
- **Visual narrative**: [One sentence describing what the viewer should "read" from the logo]
- **Inspiration sources**: [Which reference logos (from Phase 2 visual study) inform this direction and why — cite specific PNG files studied]
- **Uniqueness check**: [How this design avoids clichéd symbols and stands apart from competitors]
 
### 2. Form Language
- **Geometry**: [Geometric primitives used — circles, rectangles, triangles, curves]
- **Shape semantics**: [Why these shapes were chosen — see Shape Psychology reference]
- **Proportions**: [Grid system, golden ratio, modular scale, or freeform]
- **Negative space**: [How white space participates in the design — any hidden forms or clever reveals]
- **Optical balance**: [Weight distribution and visual center of gravity]
- **Visual hierarchy**: [Which element draws the eye first, second, third]
 
### 3. Typography (if applicable)
- **Font personality**: [Display / Serif / Sans-serif / Monospace / Slab serif / Script — see Typography Guide]
- **Letterform treatment**: [Custom geometric construction, modified typeface, or hand-drawn feel]
- **Weight and spacing**: [Stroke width rationale, letter-spacing logic]
- **Readability at scale**: [How it reads at favicon size vs. billboard]
 
### 4. Color Strategy
- **Design approach**: Monochrome first, color second
- **Monochrome version**: [How the logo works in pure black on white]
- **Primary palette**: [Hex values with rationale — see Color Psychology reference]
- **Color scheme type**: [Complementary / Analogous / Triadic / Monochromatic — see Color Theory reference]
- **Color meaning**: [Psychological and cultural associations of chosen colors]
- **Contrast check**: [Sufficient contrast between elements for readability]
 
### 5. Construction Plan
- **svg.js strategy**: [Which shapes, groups, transforms, masks to use]
- **viewBox**: [Dimensions, typically 0 0 512 512]
- **Scalability target**: [Favicon to billboard]
- **Variants planned**: [Primary logo, compact/icon variant, monochrome variant]

Phase 4 — SVG Construction with svg.js

Do NOT write raw SVG markup. Use svg.js to construct the logo programmatically.

Critical Rule: Monochrome First

Always build the logo in monochrome (black on white) first. This ensures the design works through form alone, without relying on color as a crutch. Only add color after the monochrome version passes visual review.

Step 1: Create the HTML Workspace

Write a file named _logo-workspace.html in the output directory with this scaffold:

html

<!DOCTYPE html>
<html>
<head>
  <title>Logo Workspace</title>
  <script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@3.0/dist/svg.min.js"></script>
  <style>
    body {
      margin: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 32px;
      padding: 48px 24px;
      min-height: 100vh;
      background: #e8e8e8;
      font-family: system-ui, sans-serif;
    }
    .preview {
      background: white;
      box-shadow: 0 4px 24px rgba(0,0,0,0.12);
    }
    .label {
      font-size: 13px;
      color: #666;
      margin-bottom: 8px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }
    .size-row {
      display: flex;
      gap: 24px;
      align-items: end;
    }
    .size-item { text-align: center; }
    textarea#svg-output {
      position: fixed;
      bottom: 0; left: 0;
      width: 1px; height: 1px;
      opacity: 0;
      pointer-events: none;
    }
  </style>
</head>
<body>
  <div>
    <div class="label">Primary — 512×512</div>
    <div id="canvas" class="preview"></div>
  </div>
  <div>
    <div class="label">Scale test</div>
    <div class="size-row">
      <div class="size-item">
        <div class="label">128px</div>
        <div id="preview-128" class="preview"></div>
      </div>
      <div class="size-item">
        <div class="label">64px</div>
        <div id="preview-64" class="preview"></div>
      </div>
      <div class="size-item">
        <div class="label">32px</div>
        <div id="preview-32" class="preview"></div>
      </div>
    </div>
  </div>
  <textarea id="svg-output"></textarea>
  <script>
    var draw = SVG().addTo('#canvas').size(512, 512).viewbox(0, 0, 512, 512);
 
    // ========== LOGO DRAWING CODE (MONOCHROME FIRST) ==========
 
    // [AI writes svg.js code here — BLACK ON WHITE ONLY in first pass]
 
    // ========== END LOGO CODE ==========
 
    // --- Scale previews ---
    var svgMarkup = draw.node.outerHTML;
    [128, 64, 32].forEach(function(s) {
      var el = document.getElementById('preview-' + s);
      el.innerHTML = svgMarkup;
      var svg = el.querySelector('svg');
      svg.setAttribute('width', s);
      svg.setAttribute('height', s);
    });
 
    // --- Export ---
    var svgEl = draw.node;
    svgEl.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
    var output = svgEl.outerHTML;
    output = output.replace(/\s*svgjs:data="[^"]*"/g, '');
    output = output.replace(/\s*class="[^"]*"/g, '');
    document.getElementById('svg-output').value = output;
  </script>
</body>
</html>

This is the start of the file. Read the full SKILL.md on GitHub.

Security

Security scanPassed, 95 of 100Pattern checks on the skill's files.
Model reviewPassed

See the full security report

Quality evaluation

Task evaluationNot runNo evaluation yet. Run one in Skill Studio.

See evaluation results

Source

SKILL.md in the repositoryCheckingskills/svg-logo-maker/SKILL.md

Popularity

7-day trend score: 0

Refreshed 22 Mar 2026, 7 months ago.

Works with

Any agent vskill installs to: 56 targets in all. These 39 have a page on this site.

Claude Code
Cursor
GitHub Copilot
Windsurf
Codex
Gemini CLI
Cline
Amp
Roo Code
Goose
Continue
Kilo Code
Junie
Trae
OpenHands
Qwen Code
AI Agent
Tabnine Chat
Sourcegraph Cody
Amazon Q
Firebase Genkit
Sweep
Devin
Phind
Mentat
Claude Desktop
Aider
GPT Pilot
Plandex
bolt.new
v0
Replit Agent
Anse
TypingMind
BetterChatGPT
LibreChat
Warp AI
Pieces
Fig AI

Embed badge

[![vskill VERIFIED](https://verified-skill.com/api/v1/skills/discountry/logo-maker/svg-logo-maker/badge)](https://verified-skill.com/skills/discountry/logo-maker/svg-logo-maker)

Something wrong with this skill or its page? Tell us.