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- Repository
- panel-ui/PanelUI
- 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-makerpnpm dlx skills add panel-ui/PanelUI --skill logo-makeryarn dlx skills add panel-ui/PanelUI --skill logo-makerbunx skills add panel-ui/PanelUI --skill logo-makerThen 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.
Apparatus
An agent skill that explains an idea with a machine the reader can touch — an isometric figure for a React Native screen, moved on the UI thread and framed in a PanelUI card.
panelwind
An ESLint plugin that checks how a screen uses the design system — and catches the classes that compile and then do nothing on a device.