Skills

Logo Maker

An agent skill that designs an original app logo — a compact mark that stays readable at 32 × 32, as a vector file or through an image model.

An app needs a logo before it needs almost anything else, and the ones that survive being shrunk to a tab favicon are not the detailed ones.

Logo Maker is an agent skill that designs one. It ships in this repository alongside the PanelUI skill, so the command that installs one installs both.

npx skills add panel-ui/PanelUI --skill logo-maker
License
MIT
First shipped
0.76.0
Works with
Claude Code, Codex, Cursor and other agents that read SKILL.md

Install

npx skills add panel-ui/PanelUI --skill logo-maker

Then ask for a logo in your own words — "design a logo for this app", "I need an app icon for a habit tracker". The skill activates on the request; there is no command to remember.

What it does

It makes a symbol, not an illustration. The subject is reduced until it still reads at icon size, and the rules are mostly about what to leave out:

  • one dominant silhouette from about six to ten shapes
  • one feature that identifies the subject, not its anatomy
  • two eyes and one mouth, if there is a face at all
  • no thin lines and no sharp points — every tip ends blunt
  • two subject colours plus one background, chosen in OKLCH, with contrast floors of 3:1 for the silhouette and 4.5:1 for facial marks

Before drawing it proposes three directions and offers six candidates, two per direction, so there is something to choose between rather than one answer to accept or reject.

Two ways to draw it

The skill picks a path before any design work, and the design rules are shared so the two cannot drift apart.

Vector

With no image generator available — or for a product that already has a repository — it authors the mark as SVG on a 512 grid, fills only and no strokes, then exports 1024, 512, 180 and 32px PNGs from the same file. The result is something the project keeps, diffs and re-exports.

Image model

Where a generator is configured, it writes the brief as a prompt, generates each candidate as its own square image, and checks what comes back against the same rules. One retry with a targeted correction; never a silent fix in post-processing.

It will not claim to have generated an image without a generator. If neither path is open it says so.

The check that decides it

Every candidate is rendered at 32 × 32 and looked at. If you cannot tell what it is at that size, the design failed — and detail is what broke it, so adding more cannot fix it.

That check is the reason for every rule above.

What it will not do

It draws no text: a mark that needs a word to be understood is a wordmark, which is a different job. It produces no grid or contact sheet from a single generation — a picture of some logos is not a logo. And it names the rule anything failed rather than reporting a pass it did not verify.

SKILL.md

SKILL.md— show
---
name: logo-maker
description: Design an original app logo — a compact mascot or symbol that stays readable at 32 × 32 and works as an icon at every size. Use when asked to create, design or generate a logo, app icon, brand mark, mascot or avatar for a product, whether or not an image generator is available. Produces either a vector file the project can keep or a prompt for an image model, from one shared set of design rules.
---

# Logo maker

Make a **logo**, not an illustration. The subject is reduced to a symbol that
survives being shrunk to the size of a favicon, and everything that does not
survive that is cut before it is drawn.

Two things decide whether the result is any good, and neither is style: what is
left out, and whether the silhouette reads as one shape.

## Pick the path first

There are two ways to produce the artwork, and the choice is made once, before
any design work:

- **An image generator is available** — use it. Follow `prompt.md`, which turns
  the design rules into a prompt and lists what to reject on the way back.
- **No image generator** — author the mark as SVG. Follow `vector.md`. The
  output is a file the project can keep, diff and re-export, which is often the
  better answer for a product that already has a repository.

Do not claim to have generated an image without one. If neither path is open,
say so and stop.

`design.md` and `palette.md` apply to both. They are separate files so the two
paths cannot drift into two different design languages.

## Workflow

1. **Find the subject.** If the request names one, keep it. If not, and the
   working directory is a product, read the README, the package metadata and
   the landing copy before asking anything — what the product does, who it is
   for and how it should feel is usually already written down.

2. **Ask once, if you must.** One consolidated round of questions covering the
   product, its audience and its tone. Not a branding workshop, and never a
   second round.

3. **Propose three directions before drawing.** One line each:
   `<subject> — <what it says about the product> — <the shape it makes>`.
   When the subject is fixed, vary the treatment instead: composition,
   silhouette, which region carries the second colour, what the expression
   does. When it is not, tie each subject to a different thing the product
   claims. Three arbitrary animals is not three directions.

4. **Offer a batch.** Six candidates, two per direction, labelled `A1`–`C2`.
   Wait for agreement unless the request already authorised drawing.

5. **Draw them**, each as its own square asset. Never ask for a grid or a
   contact sheet in one image — compose the comparison afterwards from finished
   marks.

6. **Check every one against the rejection rules** in `design.md` and
   `palette.md` before showing it. Name the rule anything fails; do not quietly
   repair it and do not claim a pass you did not check.

7. **Report** each candidate's label, subject, palette, saved path and size,
   and what if anything is still wrong with it. Then ask which to refine.

## The one check that decides it

Render the mark at **32 × 32** and look at it. If you cannot tell what it is,
the design has failed, however good it looks at full size — and no amount of
colour or detail fixes it, because detail is what broke it.

Everything in `design.md` exists to make that check pass.

On this page