Design brand logos the way Gal Shir does — understand the brand story, values, audience, and strategy, then turn it into ONE smart, minimal symbol and execute it pixel-perfectly as portable vector SVG, with full lockups (mark, wordmark, app icon, favicon) and an optional mascot extension. Use when the user wants a logo, brand mark, symbol, wordmark, app icon, or brand identity, or mentions Gal Shir / a "smart minimal symbol" for a tee, mug, app, landing page, or phone.
Design a brand mark the way Gal Shir does: understand the brand story, values,
audience, and strategy, and turn all of it into a smart, minimal symbol — then execute
it pixel-perfectly. Both halves are the job. A brilliant concept rendered sloppily
fails; flawless craft with no idea fails.
One medium, always. Marks are built as hand-constructed vector SVG via the
bundled engine/logokit SDK. Not raster, not a template maker, not a prompt to an image
model — a construction toolkit (grid + golden-ratio armature, boolean geometry,
circle-packing, monoline, one-hue palette, real-font wordmarks) that gives you control
of every coordinate and outputs one portable .svg that works on a tee, mug, favicon,
app icon, software UI, landing hero, or phone.
The concept is yours.references/gal-shir-principles.md (taste & method),
references/idea-generation.md (the named idea moves), and
references/inspirations.md (his real marks reverse-engineered, with reconstructions).
The hands are the SDK.REFERENCE.md documents every logokit function.
The eyes are Playwright. Render the SVG and critique it before shipping.
Workflow
Phase 1 — Brief (understand the brand)
Read references/gal-shir-principles.md (the principles, grammar, method, and
evaluation gate). Do this before designing.
Answer the intake questions in that file: product in one sentence, audience and
how they should feel, 3 core values + mission, competitors (to differ from),
personality (playful ↔ technical), any object/metaphor/letter the brand ties to,
and where the mark will live most.
If the user hasn't given enough to answer these, ask a few sharp questions — do
not invent a strategy silently. Gal starts every mark from a real brief.
Phase 2 — Concept (story before form)
Read references/idea-generation.md and run the brief through its idea moves
(mine the name/shape/material/function, object fusion, hide-a-letter, negative-space
reveal, weaponize one colour, contrarian inversion, …). Study
references/inspirations.md for how his real marks turned a brief into a symbol.
Generate 3–5 distinct concept directions in words first — each a single idea
that could encode the brand. Diverge wide before judging any (see the divergence
multipliers). Think story-first.
Select ruthlessly — ONE idea (his practice is a single option, not a menu). Name
the "aha" — the one hidden reading, if there is one.
Choose the ONE saturated brand hue and the wordmark character (geometric sans for
tech, rounded for playful, etc.).
Phase 3 — Construct (pixel-perfect execution)
cd engine && npm install if not already installed.
Write an ES-module build script (model it on examples/orbit.mjs) that:
setup() → build the symbol from primitives + boolean ops on a grid() (and a
goldenSpiral() armature if the concept is motion/flow) → apply the grammar
(monoline with rounded terminals, one-hue palette, negative-space cuts) →
draw a custom wordmark with at most one concept twist → lockups() to emit
the full system, plus a constructionSheet().
Run it: node your-script.mjs. It writes portable .svg files.
Phase 4 — See & critique (the loop)
Render the exported SVGs to a PNG via the Playwright MCP (contact sheet →
playwright_navigate the file:// URL headless → playwright_screenshot
fullPage → Read the PNG). See REFERENCE.md § visual-verification loop.
Judge against the evaluation gate in references/gal-shir-principles.md:
conceptually smart, minimal, unique, scale-proof, right personality,
negative-space aha, ownable colour, geometric rigor, undeniable in application.
Fix in code, regenerate, re-render. Loop until it passes. Then
playwright_close.
Phase 5 — Deliver (and optionally, a mascot)
Present the system: primary mark, mono + reverse, horizontal + stacked lockups,
app icon, favicon, and the construction sheet — with a one-paragraph rationale
tying the symbol back to the brand story (the "why", not just the "what").
If the user wants a mascot, extend the symbol's DNA (same primitives, grid,
stroke weight, hue) per the "Symbol → mascot extension" section of the principles
file — build the character from the same modular circles/arcs, story-first.
Key rules
Never skip the brief or the concept. No mark before there is a brand story and a
single idea to encode. The SDK executes ideas; it does not invent them.
Always render and look before declaring done. SVG is authored blind; the
Playwright loop is non-optional — it catches optical flaws code can't see.
Hold the grammar by default: one uniform monoline weight, rounded terminals,
exactly ONE saturated hue + black/white, snapped to a grid, custom lettering, aim for
one negative-space "aha". Break a rule only with a stated reason.
One idea, one twist, one hue. Restraint is the style. Two hidden readings or two
saturated colours means you haven't reduced enough.
Stay concept-first, not mechanical. Gal uses no rigid template; don't let the
grammar produce generic geometric marks. The idea leads; the constraints refine.
Deliver a system, not a single file — mark, lockups, app icon, favicon,
construction sheet — every one a portable .svg.
Engine
The bundled engine/logokit.js SDK is the sole build medium — see REFERENCE.md
for the full API, the bundled OFL fonts, and the render loop. A complete worked run is
in examples/orbit.mjs (preview: examples/orbit-preview.png).
idea-generation.md — the named idea moves + divergence/selection.
inspirations.md — 18 of his real marks reverse-engineered by
a blind 3-agent method. Each inspirations/<brand>/ holds the real original.svg/.png, his
own portfolio showcase images (images/), and an analysis.md (brand truth · what Gal said ·
the mark read blind · consolidation). All real references — no reconstructions.
Credit & provenance
Modeled on the design principles and public work of Gal Shir
(@galshirart) — founding-team brand designer at Lemonade, author of the "60 Tips for
Logo Design" e-book, founder of Color Hunt. The principles here are distilled from his
writing, talks, and identity work; the vocabulary and method are his, the SDK is our
translation of his craft into a single reproducible vector medium.
The bar this skill aims for is Gal's own, from watching an AI (Fable 5) design a logo:
"It understood the brand story, values, audience, strategy, and turned all of it into a
smart, minimal symbol. A genuinely brilliant concept… And it didn't just nail the idea.
It executed the design pixel-perfectly."
Gal Shir is not affiliated with this skill and has not endorsed it. Bundled fonts are
licensed under the SIL Open Font License (see engine/fonts/LICENSE.md).
1---2name: gal-shir-brand-logo-design3description: Design brand logos the way Gal Shir does — understand the brand story, values, audience, and strategy, then turn it into ONE smart, minimal symbol and execute it pixel-perfectly as portable vector SVG, with full lockups (mark, wordmark, app icon, favicon) and an optional mascot extension. Use when the user wants a logo, brand mark, symbol, wordmark, app icon, or brand identity, or mentions Gal Shir / a "smart minimal symbol" for a tee, mug, app, landing page, or phone.4---56# Gal Shir — Brand Logo Design78Design a brand mark the way Gal Shir does: **understand the brand story, values,9audience, and strategy, and turn all of it into a smart, minimal symbol — then execute10it pixel-perfectly.** Both halves are the job. A brilliant concept rendered sloppily11fails; flawless craft with no idea fails.1213**One medium, always.** Marks are built as hand-constructed **vector SVG** via the14bundled `engine/logokit` SDK. Not raster, not a template maker, not a prompt to an image15model — a construction toolkit (grid + golden-ratio armature, boolean geometry,16circle-packing, monoline, one-hue palette, real-font wordmarks) that gives you control17of every coordinate and outputs one portable `.svg` that works on a tee, mug, favicon,18app icon, software UI, landing hero, or phone.1920- **The concept is yours.** `references/gal-shir-principles.md` (taste & method),21 `references/idea-generation.md` (the named idea moves), and22 `references/inspirations.md` (his real marks reverse-engineered, with reconstructions).23- **The hands are the SDK.** `REFERENCE.md` documents every `logokit` function.24- **The eyes are Playwright.** Render the SVG and critique it before shipping.2526## Workflow2728### Phase 1 — Brief (understand the brand)2930- [ ] Read `references/gal-shir-principles.md` (the principles, grammar, method, and31 evaluation gate). Do this before designing.32- [ ] Answer the intake questions in that file: product in one sentence, audience and33 how they should feel, 3 core values + mission, competitors (to differ from),34 personality (playful ↔ technical), any object/metaphor/letter the brand ties to,35 and where the mark will live most.36- [ ] If the user hasn't given enough to answer these, ask a few sharp questions — do37 not invent a strategy silently. Gal starts every mark from a real brief.3839### Phase 2 — Concept (story before form)4041- [ ] Read `references/idea-generation.md` and run the brief through its **idea moves**42 (mine the name/shape/material/function, object fusion, hide-a-letter, negative-space43 reveal, weaponize one colour, contrarian inversion, …). Study44 `references/inspirations.md` for how his real marks turned a brief into a symbol.45- [ ] Generate 3–5 distinct concept *directions* in words first — each a single idea46 that could encode the brand. Diverge wide before judging any (see the divergence47 multipliers). Think story-first.48- [ ] Select ruthlessly — ONE idea (his practice is a single option, not a menu). Name49 the "aha" — the one hidden reading, if there is one.50- [ ] Choose the ONE saturated brand hue and the wordmark character (geometric sans for51 tech, rounded for playful, etc.).5253### Phase 3 — Construct (pixel-perfect execution)5455- [ ] `cd engine && npm install` if not already installed.56- [ ] Write an ES-module build script (model it on `examples/orbit.mjs`) that:57 `setup()` → build the symbol from primitives + boolean ops on a `grid()` (and a58 `goldenSpiral()` armature if the concept is motion/flow) → apply the grammar59 (`monoline` with rounded terminals, one-hue `palette`, negative-space cuts) →60 draw a custom `wordmark` with at most one concept `twist` → `lockups()` to emit61 the full system, plus a `constructionSheet()`.62- [ ] Run it: `node your-script.mjs`. It writes portable `.svg` files.6364### Phase 4 — See & critique (the loop)6566- [ ] Render the exported SVGs to a PNG via the **Playwright MCP** (contact sheet →67 `playwright_navigate` the `file://` URL headless → `playwright_screenshot`68 fullPage → **Read the PNG**). See REFERENCE.md § visual-verification loop.69- [ ] Judge against the **evaluation gate** in `references/gal-shir-principles.md`:70 conceptually smart, minimal, unique, scale-proof, right personality,71 negative-space aha, ownable colour, geometric rigor, undeniable in application.72- [ ] Fix in code, regenerate, re-render. **Loop until it passes.** Then73 `playwright_close`.7475### Phase 5 — Deliver (and optionally, a mascot)7677- [ ] Present the system: primary mark, mono + reverse, horizontal + stacked lockups,78 app icon, favicon, and the construction sheet — with a one-paragraph rationale79 tying the symbol back to the brand story (the "why", not just the "what").80- [ ] If the user wants a **mascot**, extend the symbol's DNA (same primitives, grid,81 stroke weight, hue) per the "Symbol → mascot extension" section of the principles82 file — build the character from the same modular circles/arcs, story-first.8384## Key rules8586- **Never skip the brief or the concept.** No mark before there is a brand story and a87 single idea to encode. The SDK executes ideas; it does not invent them.88- **Always render and look before declaring done.** SVG is authored blind; the89 Playwright loop is non-optional — it catches optical flaws code can't see.90- **Hold the grammar by default:** one uniform monoline weight, rounded terminals,91 exactly ONE saturated hue + black/white, snapped to a grid, custom lettering, aim for92 one negative-space "aha". Break a rule only with a stated reason.93- **One idea, one twist, one hue.** Restraint is the style. Two hidden readings or two94 saturated colours means you haven't reduced enough.95- **Stay concept-first, not mechanical.** Gal uses no rigid template; don't let the96 grammar produce generic geometric marks. The idea leads; the constraints refine.97- **Deliver a system, not a single file** — mark, lockups, app icon, favicon,98 construction sheet — every one a portable `.svg`.99100## Engine101102The bundled `engine/logokit.js` SDK is the sole build medium — see **[REFERENCE.md](REFERENCE.md)**103for the full API, the bundled OFL fonts, and the render loop. A complete worked run is104in **[examples/orbit.mjs](examples/orbit.mjs)** (preview: `examples/orbit-preview.png`).105106Knowledge lives in `references/`:107- **[gal-shir-principles.md](references/gal-shir-principles.md)** — taste, grammar, method, evaluation gate.108- **[idea-generation.md](references/idea-generation.md)** — the named idea moves + divergence/selection.109- **[inspirations.md](references/inspirations.md)** — 18 of his real marks reverse-engineered by110 a blind 3-agent method. Each `inspirations/<brand>/` holds the real `original.svg`/`.png`, his111 own portfolio showcase images (`images/`), and an `analysis.md` (brand truth · what Gal said ·112 the mark read blind · consolidation). All real references — no reconstructions.113114---115116## Credit & provenance117118Modeled on the design principles and public work of **[Gal Shir](https://galshir.com)**119(@galshirart) — founding-team brand designer at Lemonade, author of the "60 Tips for120Logo Design" e-book, founder of Color Hunt. The principles here are distilled from his121writing, talks, and identity work; the vocabulary and method are his, the SDK is our122translation of his craft into a single reproducible vector medium.123124The bar this skill aims for is Gal's own, from watching an AI (Fable 5) design a logo:125*"It understood the brand story, values, audience, strategy, and turned all of it into a126smart, minimal symbol. A genuinely brilliant concept… And it didn't just nail the idea.127It executed the design pixel-perfectly."*128129Gal Shir is not affiliated with this skill and has not endorsed it. Bundled fonts are130licensed under the SIL Open Font License (see `engine/fonts/LICENSE.md`).
Run npx skillmds@latest add mohganji/gal-shir-brand-logo-design in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
Design brand logos the way Gal Shir does — understand the brand story, values, audience, and strategy, then turn it into ONE smart, minimal symbol and execute it pixel-perfectly as portable vector SVG, with full lockups (mark, wordmark, app icon, favicon) and an optional mascot extension. Use when the user wants a logo, brand mark, symbol, wordmark, app icon, or brand identity, or mentions Gal Shir / a "smart minimal symbol" for a tee, mug, app, landing page, or phone. It is listed under Design & Media on SkillMD.
This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
mohganji (@mohganji) published this skill. Their other Agent Skills are listed on their SkillMD profile.