GKjohns

Logo Design Skill — Design skill for Claude Code

Design community

Logo-design Agent Skill for Claude Code / Cursor — presents an HTML gallery of 5+ SVG concepts in Kyle's house style, then ships the chosen one.

How to install Logo Design Skill

This entry records only its repository, not the path inside it, so there is no exact command to give. Open GKjohns/logo-design-skill and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Logo Design Skill does

Logo-design Agent Skill for Claude Code / Cursor — presents an HTML gallery of 5+ SVG concepts in Kyle's house style, then ships the chosen one.

Alternatives in Design

Export Diagram — Export a diagram-design HTML file to .svg and .png next to the source 27.2k ★
Weather Orchestrator Command — Fetch the current temperature for Dubai, UAE and create a visual SVG weather card 20.2k ★
Polish UI — Polish UI elements by auditing SCSS and TSX markup against the Anytype design system, then fixing discrepancie 8.7k ★

README

logo-design skill

A Claude Code / Cursor [Agent Skill](https://agentskills.io/specification) for designing logos in Kyle Johnson's house style.

When invoked, the skill:

Presents an HTML gallery of 5+ SVG logo concepts — each semantically tied to the product name, simple, theme-friendly.
Waits for the user to pick one.
Ships the chosen mark as a clean standalone SVG (and optionally a matching AppLogo.vue component).

The house style

Every reference logo in `assets/sources/` follows the same rules:

Semantic, not decorative — the shape means the word (Margin = page with margin line, Daylight = crescent bite, Takeout = paper-bag fold, Sift = narrowing bars, Aria = voice lines).
Primitive SVG only — rects, lines, simple paths, masks.
Theme-friendly — currentColor or Tailwind semantic classes.
Monochrome-first — one color, or a primary + a tint.
Works at 16px and 400px.
Square-ish mark, wordmark optional.

Full breakdown in [`references/design-principles.md`](references/design-principles.md). SVG techniques in [`references/svg-patterns.md`](references/svg-patterns.md).

Install

git clone https://github.com/GKjohns/logo-design-skill.git ~/Programming/Workspace/logo-design-skill

# Make the skill visible to both Claude Code and Cursor via symlinks
ln -s ~/Programming/Workspace/logo-design-skill ~/.claude/skills/logo-design
ln -s ~/Programming/Workspace/logo-design-skill ~/.cursor/skills/logo-design

Usage

"Design a logo for a tool called Ledger that tracks accounting for solo lawyers."

Claude generates `logo-options-ledger.html` with 5+ concepts. You pick a number. Claude ships the final SVG.

Structure

logo-design-skill/
├── SKILL.md                          # Main skill instructions
├── references/
│   ├── design-principles.md          # The house style, explained
│   └── svg-patterns.md               # Copy-paste SVG building blocks
└── assets/
    ├── sources/