logo-designer-skill
A skill that draws logos in SVG: a brand interview, three to five concepts side by side, refinement and PNG export in seven sizes
- 200 ★ on the repository
- Last commit
- MIT
Extended access
Why this level
- Export runs a shell script that may call `npx` and download a package when resvg is missing
- The skill writes SVG and PNG files into the project working folder
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/logo-designer-skillDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- Export runs a shell script that may call `npx` and download a package when resvg is missing
- The skill writes SVG and PNG files into the project working folder
This is third-party code. Review the repository files before installing.
What it does
The `logo-designer` skill kicks in when the user asks for a logo. The work runs in four phases. First the agent interviews about the brand through `AskUserQuestion`: format (icon, wordmark or combination), style direction, colors. If a repository or site is given, it takes answers from the README, `package.json`, styles and configs and asks only for what is missing. Next the agent draws three to five distinct SVG concepts and shows them side by side. The chosen direction is refined for color, layout and detail. Finally the `export.sh` script renders PNGs at 16, 32, 48, 192, 512, 1024 and 2048 pixels and copies the source SVG. Rendering uses any converter it finds: resvg, sharp, Inkscape or rsvg-convert. Fine details of a finished mark can be tuned in a separate Lineage Logo canvas through the `lineage-handoff.mjs` script.
Who it is for. Founders and developers who need a logo and an icon set for a new project while the team has no designer.
Good fit when
- A project has no logo and needs a mark for the favicon, avatar and app icon
- The mark's style has to follow the colors and fonts already in the repository
- You want to compare several directions, pick one and bring it to a clean SVG
- A finished mark is needed as PNGs of different sizes for a site, an app store and social networks
Not a fit when
- A company identity with usage rules: the skill draws a mark and does not assemble a brand book
- A raster illustration or a photorealistic image: the result is built from vector shapes
- A machine without an SVG-to-PNG converter: export needs resvg, sharp, Inkscape or rsvg-convert
Example request
Design a logo for my project: the repository is in the current folder. Show four concepts side by side, refine the one I pick and export PNGsLimitations
- PNG export needs one converter: `resvg`, `@aspect-build/resvg` through `npx`, `sharp` in Node, Inkscape or `rsvg-convert`. Without one the script stops with an error message.
- The result is simple vector shapes the agent writes as SVG. Fine graphics and logos with complex illustration are out of reach.
- The interview is built on the `AskUserQuestion` tool from Claude Code.
- Fine tuning of details lives in the separate Lineage Logo canvas and the skill does not do it.
How to disable. Delete the `logo-designer` folder from `~/.claude/skills/` or the project `.claude/skills/`. Finished logos stay in the working folder where the agent made them.
FAQ
How do I install logo-designer-skill in Claude Code?
The author suggests asking the agent to install the skill from the GitHub repository. By hand, put the `skills/logo-designer` folder into `~/.claude/skills/` and restart the session.
Which PNG sizes does the export produce?
Seven: 16, 32, 48, 192, 512, 1024 and 2048 pixels. The source SVG is copied alongside.
What if the export script finds no converter?
Install one of `resvg`, `sharp`, Inkscape or `rsvg-convert` and run the export again. The script tries them in order.
Can I finish a mark by hand?
Yes. After choosing a direction, fine details are tuned in a separate Lineage Logo canvas that the author keeps in its own repository. `lineage-handoff.mjs` hands the file over.
How do I trigger the skill?
It activates on phrases like "make me a logo" or "logo for my project". A request with the project name and the repository address cuts the number of questions.
Discussion
No questions or reviews yet.
Related
SkillsLogo Generator Skill
logo-generator-skill
An SVG logo generator: six or more variants by the product's character and showcase images. The author did not state a license
imagegen-skills teaches an agent to make design images: website comps, app screens, brand boards and a site from them
A skill that turns reference UIs into a structured design profile in JSON and generates matching UI from your content
Meta-skill that reads a brand from a URL, name or screenshot and turns it into a full design system as a new skill
design-to-code: a website from a design image
design-to-code
A skill that turns a screenshot, mockup, Figma frame or live page into a responsive site and checks it against the design
A skill that designs UI and landing page mockups and rebuilds screenshots as HTML, a React project or a WeChat mini program
README in short
The README explains installation briefly: clone the repository or ask the agent to install the skill from the link. It then lists the four phases and shows an example on the author's own app with three concepts and a finished mark. It ends with a link to the Lineage Logo canvas for fine tuning.
README badge
Original SKILL.md
---
name: logo-designer
description: |
Design and iterate on logos using SVG. Use this skill when the user asks to
"create a logo", "design a logo", "make me a logo", "iterate on this logo",
"logo for my project", or discusses logo design, branding icons, or wordmarks.
license: MIT
---
# Logo Designer
Design and iterate on logos using SVG. Generates side-by-side previews and exports to PNG at standard sizes.
## Phase 1: Interview
Before generating anything, gather context and ask the user what they need.
### Step 1: Gather context automatically
If the user points to a repo, URL, or existing project:
- Read the README, package.json, CSS/config files, and any existing branding
- Extract: project name, purpose, tech stack, color palette, design language, fonts
- Summarize what you found before asking questions — this avoids asking things you already know
If the user just says "design a logo" with no project context, skip to Step 2.
### Step 2: Ask structured questions
Use the `AskUserQuestion` tool to ask these questions. **Batch related questions together** (up to 4 per call) and **skip any question already answered** by the context gathered in Step 1 or by the user's initial message.
**Question 1 — Format:**
```
question: "What format do you need?"
header: "Format"
options:
- label: "Icon only (512x512)"
description: "Square icon, works for favicons, app icons, social avatars"
- label: "Wordmark only"
description: "Text logo, 1024x512"
- label: "Combination mark"
description: "Icon + text together, 1024x512"
```
**Question 2 — Style direction:**
```